I’m excited because this morning (Sep. 21 2011) I finally put my fears behind me and set up a CDN for WinkPress. It was really easy, especially with Amazon CloudFront CDN and WP Super Cache (I love this plugin!).
WP Super Cache has built-in support for CDN. It borrows this CDN feature from another plugin actually—that plugin is CDN Linker lite. So, if you are not using WP Super Cache, you could use that other plugin.
Amazon CloudFront is also very cheap, like 20 cents per GB, at most. My websites last month got around 200,000 pageviews and a total of 25GBs out. So, if I were using CloudFront last month, my bill would’ve been around $5 only.
And the speed improvement is amazing—at least according to tools.pingdom.com, which was reporting 4 to 7 seconds load time for the shopping cart page. After implementing CloudFront, the page was loading in 2 seconds!
So, if you wanna setup CloudFront with WordPress…
Here’s How to Do It
Sign up with Amazon
Go to http://aws.amazon.com/cloudfront/ and sign up. Once you’re inside, select Amazon CloudFront from the drop down menu.
Click on ‘Create Distribution’
Select ‘Custom Origin’ and fill it out like this:
Notice how in the ‘Origin DNS Name’ there’s no ‘www’ or ‘http://’.
Click ‘Continue’ and you’ll see another screen, but you don’t need to change anything there. Click ‘Continue’ again. You’ll reach the ‘review’ step, nothing to change there either. Click ‘Create Distribution’.
As far as Amazon is concerned, you’re done. Just copy the unique domain name that was assigned to you (because WP Super Cache is gonna need it):
Turn on CDN in WP Super Cache
Now go to the CDN tab in WP Super Cache and paste your unique CloudFront domain name in the ‘Off-site URL’ field:
Click ‘Save Changes’.
Congratulations! Static resources on your site will now be served from Amazon’s CloudFront network. There’s nothing more you need to do.
Here’s how it works…
Like I said, there’s nothing more you need to do, but if you’re curious about how this works, here’s how I understand it.
WP Super Cache will rewrite URLs from:
Every URL that has the keywords wp-content and wp-includes will be rewritten. And Amazon CloudFront will download resources from your server and cache them and serve them to your visitors from their own network.
The cached resources will expire according to the HTTP headers that Amazon gets from your server. If your server doesn’t specify expiration headers, the resources will expire in 24 hours. If a resource is removed from your server, it will be removed from Amazon’s servers also within 24 hours.
Yoast’s WordPress SEO
My CDN setup caused a little problem with Yoast’s WordPress SEO sitemaps feature. The CSS for the sitemaps page was not loading correctly. To solve this I simply added ‘wordpress-seo’ to the list of excluded substrings in the CDN tab of WP Super Cache.
Using a Branded CDN Domain
If you don’t like how a CloudFront URL looks like, i.e http://d1wvbg9jrns2hd.cloudfront.net, then you could utilize the CNAMEs option when you ‘Create Distribution’ on Amazon’s web interface. Your CDN URLs could be changed to something like http://cdn.your-site.com/. I didn’t bother with that because I don’t mind Amazon’s ugly URLs. I don’t think many people are gonna see them. But more importantly, I’m thinking that maybe Amazon has an optimized DNS look up or something that makes it even faster than if I were to use my own domain name.
Perhaps I’ll share screenshots from my Webmaster Tools ‘Site performance’ when the effects of these changes start showing…