What platforms does YSlow run on?
How does YSlow work?
How are the grades computed?
Does YSlow handle DHTML? Ajax? Web 2.0?
How does YSlow integrate with Firebug's Net Panel?
How accurate is YSlow at finding the components in the page? Why do YSlow and Firebug's Net Panel lists differ?
How is the response time calculated? Why is it sometimes missing?
How do I add my CDN hostname to YSlow for Rule 2?
Does YSlow work with frames?
My component has an Expires or a Cache-Control header - why does YSlow say it doesn't?
What are the license terms that apply to YSlow?
YSlow for Firebug runs on Firefox. You must install Firebug in order to use YSlow.
YSlow makes three passes to generate its results.
In the first pass, 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
In the second pass, 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.
In the third pass, YSlow takes all this data about the page and generates a grade for each rule, which produces the overall grade.
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 lint.js. The overall grade is a weighted average of the individual grades for each rule. The rules are approximately in order of importance, most important first. The specific weights are in the lintweights array in yslowcontext.js.
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, you can measure these components by disabling the YSlow Autorun option, and instead launching YSlow manually after all these requests are done.
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.
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.
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.
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 using Firefox's preferences.
Here are the steps to follow:
about:config in Firefox. You'll see the current list of preferences.
extensions.firebug.yslow.cdnHostnames for the preference name.
mycdn.com.
Do not use quotes. If you have multiple CDN hostnames, separate them with commas.
If you specify CDN hostnames in your preferences, they'll be shown under the details for Rule 2 in the Performance view.
YSlow loops through all frames (recursively) searching for components. Frames are listed as "doc" components, while iframes show up as "iframe".
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.
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.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings