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:
http://your-site.com/wp-content/uploads/2011/9/some-image.png |
To
http://crypt1csubd0m41n.coudfront.net/wp-content/uploads/2011/9/some-image.png |
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.
More tips…
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…
Boy! I can’t seem to get the wp super cache to rewrite the url’s.
I created a CDN with origin www.rightclickpr.com
http://www.rightclickpr.com/wp-content/uploads/2012/02/iPad_v2.jpg
http://d1gpyjuuwakdug.cloudfront.net/wp-content/uploads/2012/02/iPad_v2.jpg
All i need is that the super cache rewrites the url’s
I actually don’t use WP Super Cache anymore. It was really awesome while I was using it. It was faster than W3 Total Cache, but it didn’t have a way to minify HTML, CSS, and JavaScript, so I switched to W4 Total Cache recently.
Setting up Amazon CloudFront with W3 Total Cache is really easy.
As for your specific case, Rob, make sure that you do not include the “www” in the origin—use just rightclickpr.com.
Tried super cache…and found my css and javascript all messed up, some pages displaying as text. SO disabled caching, but site runs exactly the same speed as prior to installing cloudfront…
Doesn’t seem to be working. Does it normally take some time? I looked at the urls and nothing has changes.
Followed all of the steps too.
Hmmmm…
Not sure what your problem could be. You need to narrow it down a bit.
I don’t know what else would help.
I have gone through the process several times and repeated the steps very carefully.
Any common problem?
Could something like a child theme or plugin be the cause?
Tell me how is it not working, are you saying nothing happens at all, as if you’re not even using this CDN feature?
Yes. It is as if I am not using it at all.
I don’t know. Again, it could be anything, but it’s probably something very obvious since it’s completely not working.
Got it. I ran my site through pingdom and saw the right urls.
Thanks for the help.
A handy article and it made setting it up on my site really easy. Top work!
Thanks for the info
We went through this article http://www.labnol.org/internet/host-images-files-on-amazon-s3-storage/4923/ and after reading your post and with the help of wp-supercache. It has become easy. Thanks again
team SK
Very helpful, thanks! If I have a very media-heavy blog — a ton of high-resolution images — will Cloudfront cache everything and only charge for bandwidth? Or is S3 a must in this case?
I think CloudFront will cache everything and charge for the bandwidth. That’s what’s happening with me here on WinkPress, and I don’t even know how to setup S3.
Thanks for this. I had been trying to do this with S3 as the source, and a CNAME, and various other complications. Turns out none of them was necessary.
I followed your exact instructions (very helpful!) but I’m having a problem with my file locations now…
As an example: what should be this:
http://d2cjpez25y4em5.cloudfront.net/wp-content/uploads/2011/10/floating_fest_CMJ_11.jpg
is actually this:
http://www.iguessimfloating.net/2011/10/d2cjpez25y4em5.cloudfront.net/wp-content/uploads/2011/10/floating_fest_CMJ_11.jpg
Any ideas?
Also whenever I go to http://d2cjpez25y4em5.cloudfront.net or a file on that mirror, I get redirected to my site or said file hosted on my site. Is that normal?
Thanks!
When you enter your “off-site URL” in WP Super Cache, don’t forget the http://.
I mean, this is good: http://d2cjpez25y4em5.cloudfront.net
But this is bad: d2cjpez25y4em5.cloudfront.net
As for being redirected to the original site, I don’t know but I don’t think it’s supposed to do that. For example, my CloudFront domain is
http://d1wvbg9jrns2hd.cloudfront.net/and if you try to go there, it won’t redirect you tohttp://winkpress.com/. So, I’m not sure what’s happening in your case…Wow that was easy! I can’t believe I didn’t think of that (holds head in shame).
As for the redirect… we’re using the Smart 404 plugin that attempts to redirect users to relevant content if they try to access an unavailable / broken link… but the redirect from the CDN would be from Amazon’s end, right?
Nope, I don’t think it’s from Amazon. It’s possible and likely that it’s from your own server—maybe a plugin or something…
I had the same problem and I found this in the forums. I thought it might be helpful to you.
https://forums.aws.amazon.com/thread.jspa?threadID=81650
Right now I’m resetting up my deployment with a www at the front of my origin url and crossing my fingers…..oh and I think it worked!
So if you have your site set up so that http://mysite.com automatically redirects to http://www.mysite.com you should enter a www before your origin name. I think that’s what this means.
Good luck!