Optimizing This Site, Part II: Use a CDN

The second recommendation yahoo makes is to use a CDN - or Content Delivery Network. The idea of a CDN is to take the uploaded files, and distribute them to servers around the world, so when a file is requested it is served from the nearest/lowest latency server. The secondary benefit is that this also offloads some of the processing power from your server, to an entire network of servers - whose whole purpose is to serve your files as quickly as possible. Since these are merely file servers and nothing more, generally only static content is suitable to be put onto a CDN - things like javascripts, stylesheets, and images.

Initially, I was planning to use Amazon's Cloudfront CDN, because it is very low cost and has Amazon backing it. However, during my research I discovered that Cloudfront is not website optimization friendly. Specifically, it isn't a simple process to gzip files, or to set expires headers on them so they get cached. For the sake of time, I wanted something simple. I saw a few comments about SimpleCDN - which is actually lower cost than Cloudfront, and supports those optimization methods out of the box. One short account later, and I was ready to rock.

SimpleCDN offers three modes of getting your files onto their service. I chose to use their upload tool, because while it is the most manual labor, it also offer the most fine-grained control over the files being uploaded. All you need to do is login to their admin tool, create a 'bucket' - which is really just a folder that holds your files, and them use the provided ftp info to login to the 'bucket' and upload your files. You can then CNAME a domain (in my case cdnc.mrforbes.com) to the service. They give you plenty of options on how you want to serve your files - zipped or not zipped, headers set to expire after a day, 3 days, etc... At that point, its just a matter of pointing your files to the right place in your code, and your good to go.

Results

If you recall, we ended Part 1 with a YSlow score of 61, and an average load time of around 2 seconds.  This is pretty fast, but we'll see how a CDN helps us out.  Our grade on this YSlow metric is currently an F.

I followed the procedure above, and got all of my files up onto the CDN. The one thing to keep in mind here is if you change any of the files, you generally need to rename them, relink them in the code, and re-upload them.. otherwise you'll be waiting for CDN to re-propagate, which can take up to 24 hours. Completing this, I ran YSlow again.

[singlepic id=9 w=295 h=150 float=right] If you expand the image, you'll see that my site now received a Yslow score of 98. Before you start thinking a CDN is the answer to all things optimized - keep in mind that the CDN is also gzipping and caching the files it is serving, which are other recommendations for website optimization. Essentially, by adding SimpleCDN I changed 3 scores, not one. My only question is, if I have all As, why did I get a 98? How do I get 100?

  1. Initial YSlow Score: D(61) Final YSlow Score: A(98)
    Initial Page Size: 500k Final Page Size: 400k
    Initial Load Time: 2+ seconds Final Load Time 1.5+ seconds

*Update: I have since added a few Wordpress plugins which are loading their own images and stylesheets, so if you run YSlow on my site you won't get the same numbers I have here. I plan to optimize again once I have decided on final functionality for the site.