« Back to Fireday

YSlow for Firefox

August 3rd, 2007 at 4:00am — Rating: Firefox pointFirefox pointFirefox pointFirefox pointFirefox pointLink

Optimizing your web site is one of the most important factors when constructing your awesome web site, but designers are always looking for the best way to make your web site scream.

Now, one of the best Firefox extensions out there is the Firebug (review) add-on. It provides a fantastic breadth of tools in debugging web pages and optimizing code.

I know what you're thinking. Why are you talking about Firebug when this review is about YSlow? Because the Yahoo! Developer network created a Firefox add-on to a Firefox add-on. They built another tab in Firebug called YSlow, which is their web page analyzer.


First, you need to install Firebug. After installing Firebug, install YSlow. The extension is transparent until you actually need it, just like Firebug. Press F12 to toggle Firebug and you should instantly see the new tab called YSlow.


Of course, a new tab is added to Firebug along with the additional pulldown menu options.

The Performance option reloads your current page and analyzes it for any ideas on how to improve your web page. YSlow proceeds to list all of the issues that need resolved on the page. After running YSlow on DCS Media, some of the issues listed are completely unavoidable, like the amount of external CSS files used for the site or the "Avoid CSS Expressions" item, which is IE specific. Even though they were reported, there are currently only two CSS files used on the site. Not quite what I consider "excess files."

The Stats option provides a summary of what the page contains, how long it took to load, cookies you picked up from the page, and the amount of objects in an empty cache and full cache.

If you want to find out what kind of HTTP header you received when downloading the page, you can head over to the Components option to view all of the response headers, size, URL, expiration, and response time for each object. When I say object, I mean CSS, JavaScript, image files, and actually the page itself. Click on the magnifying glass to see the detail of the particular object. We are talking some detailed data on how you received your web page.

Lastly, under Tools, there are four options: All JS, All CSS, Printable View, and JSLint. All JS will open a new window with a complete listing of the JavaScript used on the page. All CSS (as you can guess) displays all of the CSS in a new window as well. Printable View also opens a new window, but this feature could be considered a summary report more than a "printable view." It includes all of the Performance, Stats, and Components analyzed from the tabs in one document for you to print and, as an example, you could use it as a checklist for optimizing your site.

JSLint is a routine derived from a C program way back before JavaScript that examined all of the source code and reported on any problems with the code. It's basically retrofitted to work with JavaScript instead of C. There is a list of what JSLint examines in your JavaScript code. The list is too long to go into here, but you can read the JSLint documentation of how it works. The cool thing about it is that it's included into YSlow and it's just an option you select.


Since YSlow attaches to Firebug, there aren't any options for this add-on. The options button is even disabled in the Add-ons dialog box. I guess that's that.


YSlow is the perfect complement to Firebug and the Web Developer add-ons if you are a web designer, programmer, or power Firefox user. YSlow will show you everything you need to know about dissecting a web page. Which images took a long time to download, can I optimize my JavaScript and CSS into smaller files, or even how can I speed up the overall download time of my web pages.

Based on what I've seen from Yahoo! Exceptional Performance Group (does that make them the YEP Group?), this add-on is an awesome add-on and rightly deserves a 5 out of 5 rating.

UPDATE: Coding Horror has an update as to the scoring of Yahoo's YSlow extension. Quite enlightening.