Website Optimization: YSlow Tutorial

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

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:

  1. Total download weight and time (to the right of the YSlow icon in the status bar),
  2. Faster access to YSlow features.

The downside is that having YSlow on all the time

  1. Faster perceived download time
  2. 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.

YSlow Screen Shot.

Using YSlow

YSlow Performance

YSlow gives you a grades for each of 13 areas of download speed plus an over grade with total score. You get graded on the number of HTTP requests made, using expires headers, gzipping files, having CSS at the top, javascript at the bottom, not using CSS expressions, minimizing the number of domains hit for page componenents, minifying javascripts, avoiding redirects, removing duplicate javascript functions, turning off eTags and having static files served from Content Distribution Networks (CDN). I will go over most of these in my blog post on improving perceived and actual download speed. Not included in the list is reducing the number of HTTP requests even further for a home page only by using inpage CSS and JavaScript.

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.

Changing Grades: If you don’t like the grading system, you can configure YSlow to weight things differently by altering the javascript file. Search for yslow.js on your computer. Mine was located at c:\documents and settings\estelle\Application Data\Mozilla\Firefox\Profiles\extensions\[email protected]\default\preferences\.

YSlow Stats Tab

The Stats tab lets gives provides you with 3 bits of information:

  • Page downloads when Cache is empty
    This includes the number of HTTP requests and file weight of all the HTML, JavaScript, CSS files and images, includeing images called from the CSS, downloaded to render the page. A few things to note about this value: if your page is set as the home page for someone, IE pretends the cache is empty and downloads everything, irrespective of expires headers. If you click on the "(est)" next to a cache parameter, YSlow provides you with an estimate as to how your speed can improve.
  • Page downloads when Cache is full
    This includes only the number of HTTP requests and file weight for the files that do not have a future expires date and are not cached. The total includes thell the HTML, JavaScript, CSS files and images not cached.
  • Cookies

YSlow Components Tab

The Components tab describes in more detail each of the files that make up the sum total in "Page downloads when Cache is empty" described above. For each HTML (or PHP, or whatever the main file is), CSS, JavaScript, CSS image, regular image, etc., YSlow grabs the header information and provides the following in human readable form:

  • 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
  • E-Tag

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

  • JSLint:
    I am not 100% sure, but I think JSLint explains errors that would need to be rectified before passing your JavaScript file thru Crockford’s JSLint minification tool. For JSLint to work, you have to include components in your Javascript that would otherwise be optional in the loosely typed language, such as ending your lines with a semi-colon. The JSLint response warns you of these necessary edits..
  • JS:
    Prints to the browser all the JavaScript that is included in the currently analyzed page
  • CSS:
    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.

Missing Features

Dynamic Downloads not captured:
YSlow isn’t perfect. It does not display properties of elements brought into the page dynamically such as multimedia, javascript rendered images, componenents rendered from XMLHTTPRequests, or any DOM changes. You can use Firebug’s NET tab to garner that data. It seems that YSlow takes a look at the page being analyzed, and does an XMLHTTPRequest to get download time information. Firebug, on the other hand, collects and stores the information for each request. For true web page weight, Firebug is more precise. For actual download time, Firebug is also more precise. For perceived download time, however, YSlow gives you a good estimate.

This entry was posted in Best Practices, firebug, Web Development. Bookmark the permalink.

3 Responses to Website Optimization: YSlow Tutorial

  1. Pingback: the online fox

  2. Pingback: trainingo2.net

  3. Very helpful at all. Some of the last time I tried to optimize the speed of my site, so I was stranded on your website.
    But I have a small question for you, does google chrome have yslow extension?

Leave a Reply

Your email address will not be published. Required fields are marked *