Optimizing Web Page Load Time: An Introducing to YSlow

Jordan Sandford - August 5, 2009

Today, I’ll introduce YSlow, an add-on for Firefox.

YSlow was born out of Yahoo’s development department after they wrote some best practices for making high performance web sites. All the gory details are found in their Best Practices for Speeding Up Your Web Site document.

You might know that Firefox has thousands of add-ons available to help you with all sorts of things, and to be accurate, YSlow is actually an add-on to the Firebug add-on for the Firefox web browser.

Screenshot of FireBug with YSlow installed.

YSlow has four sections: Grade (grading performance), Components (listing web page components), Statistics (statistic on web page components) and Tools.

In the Grade tab inside YSlow, you’ll see that the grading is done on 22 performance metrics, which are divided into six categories: content, cookies, CSS, images, Javascript, and server. YSlow provides descriptions for each metric and a link to the full description in its Best Practices document. YSlow understands that there are different types of web sites and grades according to the ruleset you choose (e.g. blog, small website or large web site). You can create custom rulesets as well.

The Components tab provides all components that YSlow detects your web page uses and lists very useful and pertinent information about them under five categories: doc (genrally, any HTML, XML or XHTML file), js (Javascript), css, cssimage (images that your CSS files request) and image. It will show any component in red if the browser cannot find it (404 error). It also gives the count for all components by category.

The Statistics tab compares the page loading (total file size, to be exact) when components were not cached (saved from previous visits) verses when they components were actually cached when you ran the YSlow test.

The Tools tab provides features that can make some optimizations much easier. For example, to implement suggestion 4 in my previous post, click the All CSS link to combine all CSS used by the web page. Clicking on the All JS link will do the same thing for JavaScript.

My next post will delve a little deeper into YSlow.