Introduction to YSlow: optimizing your actual and perceived download speed
Two days ago Yahoo! officially released their Firebug extionsion "YSlow". YSlow is a tool that coherently presents factors effecting actual and perceived download speed. Many of the features available thru YSlow are avaible thru the Firebug NET tab, and digging thru other Firebug panes. What makes YSlow such an effective tool is that it displays those features in a understandable and actionable way.
- Installing Yahoo! YSlow
- Turning YSlow on
- Using YSlow
- Missing Features
Installing Yahoo! YSlow
YSlow is a page analysis tool that helps you optimize your web pages for better perceived and actualy download speed. YSlow is an extension to Firebug which is a FireFox plug-in (Yes, it’s an extension to an extension). You must download and install Firebug: If you need instructions, I wrote a introduction to Firebug tutorial last month.
To install YSlow, download YSlow from the Mozilla website. Click on the "Install Now" button, then on "Install". You will need to restart Firefox for both the YSlow and the Firebug add-ons to work, so you might as well download and install both before restarting FireFox.
Turning YSlow on
While the YSlow icon will always be present in the right of the status bar, it is not actively running and analying all your page visits all of the time. To get YSlow to always be active, righ click on the word YSlow in the status and choose "Autorun" from the popup menu.
AutoRun: Having YSlow on all the time
You likely don’t want YSlow running all the time. The benefit of having YSlow on autorun is that you:
- Total download weight and time (to the right of the YSlow icon in the status bar),
- Faster access to YSlow features.
The downside is that having YSlow on all the time
- Faster perceived download time
- Uses RAM
My recommendation is to only have it on autorun if you are actively working on optimizing; and then turn it off the rest of the time.
Turning YSlow on Selectively
Unless you have selected autorun, you have to activate YSlow by opening up Firebug and clicking on the YSlow Tab, which brings you to a page instructing you how to activate YSlow by selecting which type of analysis you’re interested in. Select Performance, Stats or Component. Selecting from the Tools or Help menu will not analyze your page. For example, if you select JSLine from the Tools menu, you get results for the most recently analyzed page. The Tools drop down menu may actually be greyed out to start.
More information: If you don’t get an A on any of the parameters, simply click on the arrow to the right of the parameter, and more information will appear. You can also click on the "expand all" link in the upper right which will expand the sections not earning an A with an explanation of what the failings were. No matter your grade, if you click on the name of the parameter, you will be redirected to the Yahoo Developer Network for details on what the parameter means and how it effects your perceived and/or actual download speed.
YSlow Stats Tab
The Stats tab lets gives provides you with 3 bits of information:
- Page downloads when Cache is empty
- Page downloads when Cache is full
YSlow Components Tab
- File Type
- File URL
- Expires header date, if any, or today’s date if not explicitly set
- Gzip status
- Server response time
- Un-g-zipped file size
If you want more information, clicking on the magnifying glass next to the URL displays the headers (this is also available thru Firebug’s NET tab). If you click on the actual URL, it will open up that URL — be it an HTML file, a CSS file, an Image — in a new browser window.
YSlow Tools Tab
The Tools tab provides "links" to 4 reports: JSLint, JS, CSS, Printable Version
Prints to the browser all the CSS that is included in the currently analyzed page. This is similar to the Firefox Developer Toolbar. I prefer the toolbar version since it has the functionality of allowing you to close out individual CSS sources.
- Printable Version:
While this may seem like just a printable version of the performance tab, this page is actually very useful. It delineates all the things you can do to score a 100% on the Performance section of YSlow. It basically explains the performance tab in detail — what you would see if you clicked on the "expand all" link in the performance tab.
Dynamic Downloads not captured: