YSlow analyzes web page performance and tells you why performance is slow. It is integrated into the Firebug web development tool for Firefox.
![[Note]](images/docbook/note.png) |
Note |
|---|---|
YSlow is not yet integrated into Firebug Lite for Internet Explorer. |
Many web pages are now 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. YSlow analyzes the page's components, including
downloaded components, using advanced techniques. For example, the front
page of Yahoo! News might display an image on that dynamically rotates
through one of four "top photos of the day" by setting the image's
src to the different image URLs. YSlow measures performance
for sites that use these advanced techniques and reports when the
dynamically loaded components are missing an Expires
header.
YSlow's web page analysis is based on 13 identified basic rules that affect web page performance. They are listed roughly in order of importance/effectiveness. Studies have shown that response time can be improved by 25-50% by following these rules.
Each rule is weighted according to importance. When analyzing a web page, YSlow deducts points for each infraction of the rule, and then applies a grade to each rule and an overall grade and score for the page. Note that these rules are weighted for an "average" page. Some rules may be less important for your web page for various reasons, and you might want to tweak the weightings to better represent your page's efficiency. See "Customizing YSlow Preferences" to learn how to customize the rules.
YSlow needs Firebug to run. You can obtain the latest version of Firebug from https://addons.mozilla.org/en-US/firefox/addon/1843. To view and download Firebug documentation see http://www.getfirebug.com/docs.html.
Once Firebug is installed, download YSlow from http://developer.yahoo.com/yslow and follow the prompts to install it.
To run YSlow and view the results, Firebug must be enabled, and the Firebug window must be open. You will see the YSlow page.
To have YSlow analyze the page, select Performance, Stats, or Components, or right-click YSlow in the status bar and select Run Once. When YSlow analyzes the page, the Firebug window displays the your view (or the Performance view if you chose Run Once), and the status bar at the bottom of the window displays the overall grade for the page, and its size. Reloading the page and running YSlow again also displays the amount of time (in seconds) it took to load the page. (The page must be loaded a second time to calculate the response time because YSlow needs a starting point from which it can begin tracking time.)
You can also run YSlow continuously. The Autorun feature automatically runs YSlow each
time a page loads. To enable Autorun before a page
has been analyzed, right-click the YSlow logo 
in the status bar and select
, or select
from the
menu. To enable Autorun after YSlow has
already analyzed a page, right-click the YSlow grade, page size, or
response time in the status bar and choose
from the context menu.
YSlow displays the results of its analysis as tabs in the Firebug console. This section describes each of the views.
To view an analysis of the page's performance, choose the Performance tab, or click the page's letter grade in the status bar.
The Performance view displays a report card for your web page. The overall grade for the page is displayed at the top, with the overall score in parentheses. The page is graded based on 13 guidelines for improving web page performance (see "Performance Rules"). Each rule is listed in order of greatest impact or importance, and displays a letter grade-A through F, with A being the highest/best grade. You can see the numeric score for a particular rule by hovering your pointer over the grade.
Some rules, graded with n/a, may not be relevant to the current web page and no score is given.
Each rule is a link to a detailed document that describes the impact of the rule on web page performance. Click the rule to open the document in a new window, or right click it to open it in a new tab.
Expanding a rule in the Performance view displays suggested areas that could improve performance if fixed. Expand or collapse details for all the rules by selecting Expand All or Collapse All.
You can view the header data for the URL by clicking the 
icon next to the URL, as shown below. Click the
icon again to close the Headers tab.
To view page statistics, choose the Stats tab, or right click the page size in the status bar. The Stats view gives summary information, including the total size for each component type, an overall total page size, and the number of HTTP requests made to view the page.
The summary information is displayed from both an Empty Cache and Primed Cache perspective. The Empty Cache perspective indicates all the components that the browser has to request to load the page when the user visits it for the first time. In the Full Cache perspective, ideally all or most of the components should be found in the disk cache, reducing the number of HTTP requests and the number of bytes.
The Expires and Last-Modified headers of
each component affect the Empty and Full Cache perspectives. For
example, when the cache is full, a component with a far-future
Expires header doesn't require an HTTP request, and thus
adds no weight to the page size. If a component is expired, but has a
fairly old Last-Modified date, then it generates a
conditional GET HTTP request. However, this usually results
in a 304 Not Modified response and doesn't add any weight
to the page.
You may see 0.0k byte components contributing to the number of
requests in the Full Cache perspective, as shown above. Components
having an if-modified-since header require the browser to
always send a request to the server, and thus are counted as
requests.
The Cookies section displays the size and content of all cookies requested for the page. Information about cookies is exchanged in the HTTP headers between web servers and browsers. The greater the total bytes of cookies (either large individual cookies or multiple cookies totaling a large number of bytes), the slower the user response time, particularly over dial-up. Be sure to mind the size of your cookies and eliminate any unnecessary ones.
To display information about the page's components, choose the Components tab. The Components view displays all the components present in the web page. For example, you might use it to see which components need to be gzipped.
The Components view gives the following information:
Type-The component's type: doc (HTML document), iframe, redirect, image, css-image, js, etc .
URL-The URL of the component. The URL also includes the HTTP header icon.
To view the HTTP response header in a
Headers tab, click the icon next to the URL. Click the icon again to
close the Headers tab.
Click the URL to open the link in a new window, or right click it to open it in a new tab.
Expires-The date in the Expires response header. This field is blank if there is no Expires header.
Gzip-Indicates whether or not the component was gzipped.
RespTime-The time (in milliseconds) taken
to load the component using XMLHttpRequest.
Size (Ungzip)-The HTTP response size. If the component was gzipped, the estimated unzipped size appears in parentheses. The ungzipped size is calculated at three times the gzipped size.
ETag-The Etag response header value, if applicable.
YSlow's Tools menu provides several reporting tools that you can use as a quick reference when looking at the page analysis.
JSLint collects all external and inline JavaScript from the current page, submits it to the JSLint JavaScript verifier, and displays it in a separate window. JSLint returns a message describing the problem and an approximate location within the source. The problem may not necessarily be a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems.
collects all external and inline JavaScript from the page and displays it in a separate window. You might use this page to see which scripts the page actually uses and whether the page is pulling them in correctly.
opens a new window with the YSlow results from the , , and views, formatted for printing.
The YSlow menu links you to additional sources of information and assistance:
YSlow Help-Opens this document.
YSlow FAQ-Frequently asked questions about using YSlow.
YSlow Blog-The official blog site for YSlow users to share questions, problems and ideas.
YSlow Community-Links to the YSlow user page.
Send Feedback-Provides a form for sending comments and suggestions.
YSlow Home-Links to the YSlow home page.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings
