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.

1. Combined Files

   It makes sense that the first thing I should do is combine those javascript and css files. I certainly don’t need 17 when 2 or 3 will do just fine. So, what I’m going to do is take all of my separate javascript files, open them up, and copy and paste the code into one large file. Yes, this makes editing a little more time consuming, since you need to navigate a whole huge file to get the piece you want. Luckily, there are plugins available for different programming languages which will do this for you (pack:tag for java is an example). That way you can edit your original code, save it, and let the server handle this step. My site is simple, and if you aren’t that technically inclined, this method works so I’m outlining it here.

   Next, I’m going to do the same with the stylesheets. When I load YSlow and click on ‘components’, I see that one of my wordpress plugins is loading 2 stylesheets, so even with combining my own two I will still be loading three. I don’t really want this, so I did a search for the file in question, commented it out of the autoloading in the plugin (yes, it will come back if I upgrade and I’ll have to do it again), and pasted it into my style.css.

   Now that my files are combined, I’ll move on to the next recommended step.

2. CSS Sprites, Image Maps, Inline Images

   Okay, I cheated a little bit because I did this when I exported the original PSD. There are a few non-css-sprited images on the homepage, but they are there of necessity. The background, because its very wide and needs to repeat. The ocean in the footer for the same reason (which is also a png so the island can be seen behind it – even though a gif would be much smaller in file size), and the latest creations graphic (which is also currently a png, but I will likely change to a JPG as part of the optimization). The clouds and balloons are also graphics, but out of necessity – they need to be resizable.

   Image maps wouldn’t have really helped me on this design, and to be honest – I’m not a fan of inline images. Until there is a tool that automates their inclusion, adding that kind of code to an html page feels totally contrary to the entire value of CSS.

3. Wait, let’s do a little more.

   YSlow Step 10, minimize js, and Step 6 – put all javascript at the bottom are separate steps, but related to this exercise, so I’ll take care of them now. Currently, the site.js file is 173k, quite large. However, we can compress this by removing comments and whitespace, and shortening variable names. Again, we don’t have to do this ourselves. In fact, we can even do it online here. After minimization, that 173k file gets shrunk down to 93k.

   As for moving the javascript to the bottom of the page, I’ll just take my script and put it into the footer. I see that there are two javascript files being autoloaded into the header by the nggallery plugin. I want to get those to the bottom too, but will do so at a later time.

Results

1. Initial YSlow Score:	F(39)	Final YSlow Score:	D(61)
   Initial Requests:	23	Final Requests:	15: 3 js, 2 css, 9 images
   Initial Page Size:	600k	Final Page Size:	500k
   Initial Load Time:	6+ seconds	Final Load Time	2+ seconds

[singlepic id=9 w=298 h=150 float=right]

As you can see from these results, reducing the number of HTTP requests and minimizing our javascripts has increased load times by around 300%. We also raised our YSlow score by over 22 points. Not bad for about 30 minutes worth of optimizing.

Coming up next – adding Amazon Cloudfront as a Content Delivery Network

Currently, the site is totally unoptimized. I haven’t removed redundant or unused styles from the CSS. The javascript isn’t minified, its in the header, and each plugin is a separate file. Let’s see what YSlow starts us with:

[singlepic id=8 w=274 h=150 float=right]
If you enlarge the image, you’ll see that we’re starting off with a grade of F… and a numeric grade of 39. The current size of the homepage is about 600k, and the time to load is around six seconds. Looks like there’s a lot of room for improvement there. The first item of concern for YSlow is the number of http requests, currently topping 17 – with 12 javascript files and 5 css files. For our next installment, we’ll try to reduce this as close to 1 and 1 as possible.

See you then.