YSlow for web developers: make your sites faster
Yslow is a plugin for Firebug that gives you a lot of really cool information about how to speed up your sites. What happens is that you load up any page and click the Yslow button in the lower-right corner of your Firefox window:
You then get four options for analysing your site:
Clicking on the button I’ve highlighted in a light blue labeled “Performance” will start the plugin analysing your website:
Yahoo! has come up with thirteen different rules that a web developer can live by to speed up the download and subsequent loading of their web page. A lot of these things are “common sense” to the seasoned web developer (remove duplicate scripts, put CSS at the top, gzip components), but there are a number of handy ideas and tools in YSlow that ever experienced developers may not have known about.
Your page is given a score on each of the thirteen items (if they apply) as well as an aggregate score at the top. You’ll see that my blog here was given a D by YSlow.
You can click on the text of any of the thirteen options to see an explaination of what fixing that problem entails, why it’s important, and maybe a little information on how to execute it. You can click the small disclosure triangle at the end of any line to expose which items on your page are applicable:
Additionally, you can then click the small magnifying glass to the left of each item to see its HTTP headers for troubleshooting the issue:
There are other features, of course. The menu item that I’ve highlighted in red labeled “stats” shows a nice summary of how “heavy” your site is. This file size list is broken into two tables—empty cache & full cache—and then into categories: HTML document, style sheets, javascripts, css images, normal images, etc.
My favorite view, however, is the “components” section which I’ve labeled in green above. You get a table of every component of your page, along with a bunch of really helpful info like expiration date, type, size, gzip size, response time, etag value, etc.:
All in all, a really great tool for optimizing your sites. I’ve already used it on a few of my sites and seen slight improvements—mostly because I’m pretty awesome as it is! ;)
YSlow is a plugin for Firebug and therefore needs Firefox with the Firebug extension installed. If you’re interested in website performance in general, check out the Yahoo! developer site, Exceptional Performance.
