YSlow Frequently Asked Questions

Questions

Answers

What platforms does YSlow run on?

» View YSlow Ruleset Limitations across several browsers/platforms.

How does YSlow work?

YSlow works in three phases to generate its results.

  1. YSlow crawls the DOM to find all the components (images, scripts, stylesheets, etc.) in the page. After crawling the DOM, YSlow loops through Firebug's Net Panel components and adds those to the list of components already found in the DOM

  2. YSlow gets information about each component: size, whether it was gzipped, Expires header, etc. YSlow gets this information from Firebug's Net Panel if it's available. If the component's information is not available from Net Panel (for example, the component was read from cache or it had a 304 response) YSlow makes an XMLHttpRequest to fetch the component and track its headers and other necessary information.

  3. YSlow takes all this data about the page and generates a grade for each rule, which produces the overall grade.

How are the grades computed?

The grades for individual rules are computed differently depending on the rule. For example, for Rule 1, three external scripts are allowed. For each script above that, four points are deducted from the grade. The code for grading each rule is found in rules.js. The overall grade is a weighted average of the individual grades for each rule, calculated in controller.js The rules are approximately in order of importance, most important first. The specific weights are in the ruleset objects in rules.js.

Rule weights of YSlow V2 Ruleset.

Rule NameRule IdDefault weight
Make fewer HTTP requestsynumreq8
Use a CDNycdn6
Avoid empty src or hrefyemptysrc30
Add an Expires headeryexpires10
Compress componentsycompress8
Put CSS at topycsstop4
Put Javascript at the bottomyjsbottom4
Avoid CSS expressionyexpressions3
Make JS and CSS externalyexternal4
Reduce DNS lookupsydns3
Minify JS and CSSyminify4
Avoid redirectsyredirects4
Remove duplicate JS and CSSydupes4
Configure ETagsyetags2
Make Ajax cacheableyxhr4
Use GET for AJAX requestsyxhrmethod3
Reduce the Number of DOM elementsymindom3
No 404syno4044
Reduce Cookie Sizeymincookie3
Use Cookie-free Domainsycookiefree3
Avoid filtersynofilter4
Don't Scale Images in HTMLyimgnoscale3
Make favicon Small and Cacheableyfavicon2


» View YSlow Ruleset Matrix for more detailed information.

Does YSlow handle DHTML? Ajax? Web 2.0?

Many web pages are moving to a Web 2.0 style where the components in the page and the page itself are built dynamically in the browser using JavaScript. The main function behind Ajax is XMLHttpRequest. Similar functionality can be achieved using JSON and hidden iframes. YSlow analyzes all the components in the page, including components downloaded using these Web 2.0 techniques. If these dynamically loaded components are missing an Expires header or aren't gzipped they will be reported by YSlow, as expected.

If your Web 2.0 page dynamically downloads components after the onload handler or uses Ajax, these components will be excluded from YSlow grading. To run YSlow on these components, you will need to set "extensions.yslow.excludeAfterOnload", disable the YSlow Autorun option, and launch YSlow manually after all these requests are done.

  1. Go to about:config in Firefox. You'll see the current list of preferences.
  2. Enter extensions.yslow.excludeAfterOnload in Filter:.
  3. If it does not exist, right-click in the window and choose New and Boolean to create a new Boolean preference. Enter extensions.yslow.excludeAfterOnload for the preference name.
  4. Choose false and click OK.

How does YSlow integrate with Firebug's Net Panel?

YSlow uses the components' HTTP response headers to compute a score for each of the performance rules. For example, YSlow uses the Expires header to evaluate Rule 3, and the ETag header for Rule 13. If necessary, YSlow gets this header information by re-requesting the components using XMLHttpRequest, but this takes time and CPU.

The alternative that YSlow tries first is to get this header information from Firebug's Net Panel. Since YSlow is part of Firebug, it has access to Net Panel's data. Net Panel collects the HTTP header information from the original request for the component, so an additional XMLHttpRequest is not required. YSlow still has to do the XMLHttpRequest if Net Panel doesn't have a component (it was cached) or there was a 304 Not Modified response status code.

YSlow also uses Net Panel to "discover" components that are not part of the DOM (such as XMLHttpRequests) and examines those as well.

How accurate is YSlow at finding the components in the page? Why do YSlow and some packet sniffers differ?

There are two main approaches for finding components in a web page: sniffing packets and crawling the DOM. Firebug's Net Panel, ethereal, and IBM Page Detailer are packet sniffers. YSlow, Instant Source, and the AIS Accessibility Toolbar crawl the DOM.

The problem with sniffing packets is sometimes components are read from the browser's disk cache. If the user forgets to clear their cache, the components shown by the packet sniffer don't reflect all the components in the page. Packet sniffers tell the user only about the components that generated network traffic for the current web page request.

DOM crawlers, on the other hand, report all the components found in the DOM of the current page, whether they were read from disk or downloaded over the Internet. The problem with DOM crawlers is not all HTTP requests show up in the DOM. Specifically, beacons, XHR, and JSON requests aren't found in the DOM.

YSlow is a combination of a DOM crawler and a packet sniffer. YSlow has a built-in DOM crawler that discovers components, but in addition YSlow also integrates with Net Panel to find additional components that are not part of the DOM, such as XMLHttpRequests and image beacons. The Stats view in YSlow gives a breakdown of empty cache versus primed cache component counts, so you can get an idea of the amount of network traffic that would occur under each scenario.

Firebug's Net Panel generally lists only the components that generated network traffic, as expected of a packet sniffer. One exception is that it shows scripts and stylesheets that were read from the browser cache, even though they did not generate any network traffic. This is a known issue with Firebug. The problem does not occur for images. It's not always the case that a component listed there actually generated an HTTP request, especially for scripts and stylesheets. An easy way to find out is to look at the HTTP headers. If the Date response header is in the past, the component was most likely read from the browser cache. Make sure to keep this in mind when using Net Panel, although YSlow also includes a patch to this problem.

How is the response time calculated? Why is it sometimes missing?

The response time shown by YSlow in the status bar is the number of milliseconds between the onbeforeunload and onload events, in other words, the time between when the previous page unloaded and the requested page was done loading. If you download components after the onload event, those aren't included. Sometimes the response time isn't shown. This typically happens if there was no previous page, such as the first page viewed after the browser starts or after a browser tab was just opened. This also happens if the page being viewed is not an HTML document, such as about:blank.

How do I add my CDN hostname to YSlow for Rule 2?

Rule 2 says to use a content delivery network (CDN). The score for this rule is computed by checking the hostname of each component against the list of known CDNs. Unfortunately, the list of "known CDNs" are the ones used by Yahoo!. Most likely these are not relevant to your web site, except for potentially yui.yahooapis.com. If you want an accurate score for your web site, you can add your CDN hostnames to YSlow for Firefox and Chrome only, using the button right next to each offender hostname under details. YSlow recalculates scores and grade automatically.

The list of custom CDN hostnames can also be set on Firefox's preferences or Chrome's options. Here are the steps to follow:

Firefox

  1. Go to about:config on location bar. You'll see the current list of preferences.
  2. Right-click in the window and choose New and String to create a new string preference.
  3. Enter extensions.yslow.cdnHostnames for the preference name.
  4. For the string value, enter the hostname of your CDN, for example, mycdn.com. Do not use quotes. If you have multiple CDN hostnames, separate them with commas.

Chrome

  1. Right-click YSlow button on extension bar and choose Options. You'll see the current list of preferences.
  2. Look for extensions.yslow.cdnHostnames preference item.
  3. Enter/edit the hostname of your CDN, for example, mycdn.com. Do not use quotes. If you have multiple CDN hostnames, separate them with commas.

Firefox and Chrome no longer need to be restarted in order to the list of custom CDNs to become effective. Just hit Run button to recalculate YSlow scores and grade.

If you specify CDN hostnames in your preferences, they'll be shown under the details for Rule 2 in the Performance view.

Does YSlow work with frames?

YSlow loops through all frames (recursively) searching for components. Frames are listed as "doc" components, while iframes show up as "iframe".

My component has an Expires or a Cache-Control header - why does YSlow say it doesn't?

The expiration time must be at least 48 hours in the future for components to avoid being flagged by Rule 3.

What YSlow results are included in the YSlow beacon

Please see the YSlow Beacon section in YSlow documentation.

What are the license terms that apply to YSlow?

Most files comprising YSlow are licensed under the Mozilla Public License (MPL) version 1.1, with a couple of exceptions. YSlow includes jslint by Douglas Crockford, which is licensed under a BSD-style license. YSlow also includes files from the Yahoo! User Interface library, which are licensed under the BSD license.

Contact Us

YSlow development is discussed in the Exceptional Performance group.