I wrote a post a number of months ago about using Amazon S3 to create a free CDN for your WordPress. Someone at the time correctly commented that this wasn’t a true CDN, because a CDN has a number of servers all over the world with syndicated content from your website, whereas S3 stores your information on a single server, so all it serves to do is reduce the load on your own server.
After recognising this, I set about making the switch to CloudFront, which is Amazon’s CDN offering. I was initially skeptical about the cost, but in actual fact, despite having an increase in visitors in the months since doing this, my monthly cost has gone down by 50-75% (from my S3 hosting costs). I pay just a couple of bucks a month for my CDN as well as a chunk of S3 storage.
Install W3 Total Cache
In order to do this, you’ll need to install the magnificent W3 Total Cache plugin. This plugin’s principal purpose is to cache your dynamic content into static pages to significantly speed up how quickly your site loads (and for this reason it is one of about two plugins that I will install on every single installation of WordPress). However, in the plugin’s development, they soon added the capability to use a CDN to further speed up your site by delivering your site’s static content (images and static files) from servers all over the world.
Install the plugin and activate it. The options for setting up the plugin are quite extensive, so I’ve covered that in a separate tutorial: Speed Up WordPress with W3 Total Cache.
Be sure not to get ahead of yourself. Do not activate the CDN from the plugin’s General Settings yet. We’re going to set up the CDN so that everything’s ready and then turn it on; otherwise you’ll be telling the plugin to use a CDN that doesn’t exist and you’ll have loads of missing content. However, do be sure to select Amazon CloudFront (Pull) as your CDN provider and save your changes.
Get set up with Amazon CloudFront
Most of you will likely have an Amazon account. If not, you’ll have to go through a few more steps to get set up. Go to Amazon Web Services and either create an account, or use your existing account to get signed in.
Once you’ve set up an account, go to your Account and go to the Security Credentials section. From there, create a new access key and keep the Access Key ID and Secret Access Key handy because you’ll need them later.
Set up the CDN in W3 Total Cache
Go to the CDN tab of the W3 Total Cache configuration page. In the General section, check every box, except for the last (Import external media library attachments). You don’t want to be storing other people’s data, unless you have concerns about the reliability of their servers.
In the next section (Configuration), you’ll need to enter your security credentials from Amazon AWS that we got earlier. You’ll then see a button for creating a distribution. Click on that to create the distribution within CloudFront. If you entered your details correctly, you’ll see a little message that says that the distribution was created successfully. You’ll also note that it will populate the field titled “Replace site’s hostname with” with your unique CloudFront subdomain. You can test the distribution to make sure everything is set up correctly.
Activate the CDN
You’re all set to activate the CDN now. Go back to W3 Total Cache General settings and enable the CDN. Load your site and check that it loads as expected. At this point, you now have a fully functional CDN running through Amazon CloudFront.
Set up CNAMEs
Stopping at this point is fine; everything works correctly and you’ve achieved what you set out to do. However, another nice touch that W3 Total Cache added was the ability to use CNAMEs for your CDN. What does that mean I hear you ask? Well, if you look at the URL of any of your images on your site with the CDN active, you’ll see that the location is some random subdomain on cloudfront.net. It works, but you can make it look more professional and also help SEO a little in the process by replacing the random CloudFront domain with your own domain.
First of all, log in to your web host’s control panel and look for a DNS Zone Editor. Next you’ll need to create a CNAME for subdomains that you want to use in place of your CloudFront subdomain.
For example, on my site, I have created CNAMEs called cdn, cdn1, cdn2 through cdn7, which all point to my CloudFront subdomain. You could choose names like media, cdn, files, static or whatever you like. I recommend creating 8-10 though to spread your DNS/HTTP requests across multiple CNAMEs. See the image above for how I set it up in WebHost Manager:
Once the CNAMEs are set up with your web host, go back to the AWS console, find your CloudFront distribution and edit it. It will bring up a window where you can enter all the CNAMEs for your site. Enter them all here and save them. Then go back to your W3 Total Cache CDN configuration page and enter the same CNAMEs in place of your CloudFront subdomain that was automatically populated when you created your distribution earlier. See the image below for how to enter this information.
Then, make sure to test your CloudFront distribution to ensure that it is configured correctly. If the test passes, save everything and reload your site and make sure that (a) everything looks like it should and (b) your files are being served from your CNAMEs instead of your CloudFront subdomain.
This whole tutorial seems imposing, but once you get into the swing of things, it really doesn’t take more than about 15 minutes. It makes such an improvement to your site speed, so it’s well worth your time and efforts. If you have any trouble with it, leave a comment and I’ll try and help you.