Performance Tuning according to Yahoo!

A few days ago, Yahoo! released YSlow, a free Firefox add-on integrated with Firebug built to analyze Web pages and tell you why they’re slow, according to the Yahoo! Developer Network. The Firefox Web browser and some of its helpful add-ons like the Web Developer Toolbar and Firebug can be used to quickly dissect a Web site. With the addition of YSlow, you can get a quick heads-up on speeding up your site.

The news of this nifty little add-on isn’t necessarily what I’m interested in as a Web developer, but what I am interested in is the research and online documentation that goes with it—thirteen simple rules that the Yahoo! performance evangelists have defined based on their research. Of course YSlow is not the first tool of its kind.

WebSiteOptimization.com is another free tool that is a bit less accessible, hidden away as ‘Speed Report’ under Tools in the Web Developer toolbar (Firefox). Also, WebSiteOptimization.com doesn’t go into as much detail, as it only gives information about file size and number of HTTP requests.

Like any online tool of this kind, YSlow is probably best treated as a guide rather than a comprehensive report. According to YSlow, the Yahoo! home page gets a “B” performance grade and their actual performance page gets a “D”— a marking that is hardly up to par. A standard Google search results page gets an “A” performance grade, which doesn’t surprise me. On the other hand, all other professional standards-based sites I tested either failed miserably or scratched out a “D”.

The three rules that seemed to have been ignored the most were:

Rule #2
Use of a Content Delivery Network

Rule #4
Gzip components by compressing the response of HTTP requests

Rule #13
Configured Entity Tags, which identifies the version of a component.

If solutions to the above rules are currently out of reach, for whatever reason, it’s important to remember that reducing the number of HTTP requests (images, JavaScript, stylesheets and Flash files) on a Web page is key to reducing the end-user response time on the front-end. Compression is also important—besides proper compression of image files such as JPEGs, JavaScript files for instance can be minified by removing all white space and line breaks. Lastly, images such as CSS background images can number quite a few individual HTTP requests so using a method called CSS sprites is beneficial.

After all, a lean Web site is a speedy Web site.