Boosting Page Load Times with Amazon Cloudfront and W3 Total Cache

Boosting Page Load Times with Amazon Cloudfront and W3 Total Cache

The more I dig into what's possible with Amazon's Web Services the more excited I get. The last time I really played around with them was a year and a half ago when I figured out how to setup a live broadcasting stream using EC2 that would only cost pennies per hour. A few days ago I started looking around again to see what was available. What I love about Amazon's services is that although the pricing can be confusing it's rarely expensive to experiment and play around. I came across Amazon's CloudFront CDN and decided to see if it could power parts of my blog to speed up load times. CDN stands for Content Delivery Network and basically the way it works is that you have a file that people are going to view on the web. Normally if you were hosting this yourself all requests for the file would go to that server, regardless of location. That's great if your server is in New York and someone in New Jersey wants to view it. But if you're in Japan, Germany, or anywhere much further away those requests ultimately take much longer to load. CDNs solve this issue by holding copies of your file on servers all over the world so they can deliver the file on the closest server within the geographical region the request is coming from. This is really popular for video delivery (where buffering is much more noticeable due to the large file sizes) but it can also be an effective way to speed up your site by hosting all images, CSS, JS, and other various files. Normally getting this all setup would be a manual process, but there are (of course) Wordpress plugins out there to do most of the heavy lifting for you. One such plugin is W3 Total Cache. Running a cache plugin on your site is just good practice anyway, but combine it with the Amazon Cloudfront integration and you've got something really special. There are actually two Amazon services being used here, CloudFront and S3. S3 stands for Simple Storage Service and it's basically redundant storage in the cloud. W3 Total Cache will push all your media uploads (existing as well as future uploads) to the S3 storage space which is linked with your CloudFront distribution and update all the links appropriately. All it really requires is setting up the S3 space, creating the CloudFront distribution (I chose mostly default settings following this tutorial) and then giving an Access Key to W3TC to interface with it. The result is that all the static content on this site is now being pulled from Amazon's servers instead of Hippie Hosting so it should be a lot faster for everyone. Of course the real question is "What does it cost?" There are two charges to keep an eye out for. One is the pricing for storage on S3 which is $0.095 per GB per month. The other cost is Cloudfront which is a bit more complicated (see the pricing table here) but basically ranges from $0.12-$0.25 per GB of data transfer per month depending on which server is delivering the files. There are also smaller costs for the http requests but again these are pennies (and sometimes fractions of pennies) and for a site my size I figured it was worth turning it on and keeping an eye on it. After 2 full days of use the grand total for all of this? $0.18. Not bad at all.