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.
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.
3) Create a CloudFront Distribution
Choose the bucket you’re going to use as an origin for Cloudfront, right-click then select enable 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.
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.
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.