Using Amazon CloudFront CDN to speed up WordPress

Finally, here it is. The steps I used to speed up this WordPress-powered blog of mine with Amazon CloudFront CDN.

By now you’ve probably heard of and know what a CDN or Content Distribution Network is? Not yet? Here’s a recap. A Content Distribution Network or CDN is a network of servers scattered throughout the globe, usually in strategic places called ‘edge locations’, that contains copies of your website’s files or content. It could be images, videos, PDFs, scripts, CSS files etc.

When someone visits your website, the server nearest geographically to that visitor delivers the corresponding site files it has, instead of being pulled from the actual server hosting your website, which could be a thousand miles away from that said visitor. The effect is faster load times for your site which is what visitors really really love.

Amazon CloudFront CDN is exactly that, a network of edge servers throughout the world ready to host your site files and speed up your website. Today, I’m going to help you integrate it with your WordPress blog making it load even faster than before.

Things you need:

Amazon AWS account – to access Amazon CloudFront CDN and Amazon S3
W3 Total Cache Plugin for WordPress
S3Fox plugin for managing your AWS account via Firefox

Here are the steps:

1) Sign up for an Amazon AWS

Create your Amazon Web Services account which is your key to signup for Amazon CloudFront CDN and Amazon S3.

Once your signup is completed, you will be given an Access Key ID and matching Secret Access Key which you will need later on in this setup.

AWS Security credentials

Remember to keep this only to your self

Amazon S3 is a cheap storage solution that will used to store your files for use by Amazon CloudFront CDN. They’re like twins that make this magic happen.

2) Create an S3 bucket.
Download and install S3Fox for Firefox. Use your Access Key ID and Secret Access Key mentioned earlier to get it working with your AWS account.

Once connected, create an S3 bucket and name it something like “cdn.yourdomain.com” in my case I used “turbo.jrocas.com.ph

This is where your theme and media files will be stored and Amazon CDN to use as an origin or source for distribution of your files.

You need an Amazon S3 bucket to host your files.

3) Create a CloudFront Distribution
Choose the bucket you’re going to use as an origin for Cloudfront, right-click then select enable distribution.

Create Cloudfront Distribution using S3Fox

Follow the steps to create your Amazon Cloudfront distribution

4)Create CNAMEs for your CDN
This is a fancy way of masking the ugly default URI of your CloudFront distribution, e.g. “http://d346xe97ckw69d.cloudfront.net” into something much cooler like a subdomain for your URI which is “cdn.yourdomain.com” or what ever you like to call it. In my case I used turbo.jrocas.com.ph. Plus, this makes it look that you’re some big Internet magnate or something.

5) Create the CNAME records for your domain
Contact your webhost or domain registrar for assistance with this step, tell them you want a CNAME record that lets cdn.yourdomain.com to point to your CloudFront’s default URI http://d346xe97ckw69d.cloudfront.net. Wait for a few minutes or hours for the changes to be propagated.

Create CNAM records

Remember to coordinate with your domain registrar or web host to create these CNAME records

I used four subdomains, turbo, turbo1, turbo2, etc. because most browsers can perform simultaneous HTTP requests for faster web page loading. Though others may not agree with this method. It’s really up to your preferences.

6) Setup your WordPress blog
Download and install the W3 Total Cache plugin. This is a popular and powerful caching plugin that easily integrates with most CDN providers like Amazon CloudFront with your WordPress blog.

Configure W3 Total Cache plugin

Configure W3 Total Cache plugin

It’s completely up to you whether you’re going to deploy all the caching features of the W3 Total Cache plugin but for this tutorial, we’re just going to focus on getting it to work with your newly created Amazon CloudFront distribution.

7)Upload your files to Amazon CloudFront
After uploading your static files to your Amazon CloudFront distribution, you can preview how it will work or deploy it live to your blog. And that’s it, your WordPress blog is now being accelerated by Amazon Cloudfront CDN, just like the other pro-bloggers who also use other CDN providers to speed up their blogs.

You can use various online tools to see how it has improved your blog’s load times but expect to see an improvement of around 3x or up to 6x in some geographic locations.

Another great thing about this whole setup is you can turn it on or off whenever you feel like it and no harm would come to your blog.

Compared to most CDN providers which provide bulk charges, Amazon CloudFront is more cost-efficient because of its pay-per-use billing scheme and reasonable rates. You can use it for a month, a week, half-a-year and you only pay for that long and how much resources like storage and bandwidth you have actually used.

Hope this has helped you a lot and if you have questions or experience with Amazon CloudFront or other CDN providers, do share your stories with us through the comments thread below.

7 Comments

  1. I set up CloudFront on my website a few days ago and its been working well.

    However I thought its worth mentioning that you need to wait until your CloudFront distribution has a status of “Deployed” before configuring W3 total cache to use your new CNAMEs.

    Also, when upgrading WordPress versions or modifying your theme, you will need to re-upload the files to CloudFront. And once you’ve re-uploaded the files, it can take up to a day for all of Amazon CloudFront servers to recognise the changes.

    Reply

    1. Thanks for pointing that out James. Usually though, by the time the CNAME records get propagated, the CloudFront distribution is also “Deployed”.

      Now about the updates to WordPress and theme files, W3TC plugin allows us to set header expiration times to facilitate the change propagation to Amazon’s servers.

      Reply

  2. Well written tutorial my friend. I’ll be bookmarking this as I might need this in the near future although I already have a sponsor for my blog’s CDN. hehe 😀

    Reply

  3. Thanks a zillion. Not only your article convinced me to go for amazon cloudfront, but it also helped me install and configure this thing completely. Thanks again for the great article.

    Reply

Leave a Reply