According to YSlow, I received an F for the number of http requests made by my homepage. This page currently has 23 http requests, including 12 javascript files and 5 css files. This is way too many, and we need to bring this number down. Here is a link to what Yahoo has to say about reducing HTTP requests. I'll list my updates in the same order.
-
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.
-
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.
-
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
-
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