Optimizing web requests and responses is a multi-faceted endeavor. Using YSlow can help you sort through all the available vectors and quickly identify where your website’s optimization opportunities lie.
Your primary tool in the battle against slow load times and abundant http requests is a Firefox extension, Yahoo’s YSlow. This component integrates with FireBug. FireBug is a fantastic developer-oriented console for firefox that provides all kinds of helpful debugging tools, including JavaScript breakpoints, the ability to edit CSS on the fly, tracking all XHR requests and responses, and more.
YSlow analyzes all the components on a page and gives you a grade based on a number of optimization criteria. For example, it told me that cnn.com has 29 external JS pages, 6 external stylesheets, and 46 css background images. This results in a grade of ‘F’ in the category of ‘Make fewer HTTP Requests’.
If these CSS sheets were combined, the JS minified and combined, and the CSS backgrounds all placed into a master sprite image, we could reduce the number of HTTP requests from 81 to 3. This would greatly improve load times due to most browsers limiting the number of allowed HTTP connections per subdomain. Of course this may not be feasible for all of the content coming in from third parties on sites like cnn.com, but for most developers it is extremely helpful information.
Of course applying some of the fixes suggested by YSlow is easier if you have a good working knowledge base to pull from. I found these articles to be very helpful:
Concurrent Pipelines and Hostnames – This article focuses on concurrent HTTP pipelines and using multiple hostnames to improve performance.
Caching – Deals with the intricacies of caching, and is very thorough. I recommend checking out the tips section for a quick overview.
In my next post I’ll identify a few WordPress plugins to help improve your site’s performance (and YSlow grade) out of the box.
Tags: http, optimization, web development, yslow