YSlow is a tool that helps one to analyze the performance of a website. It is available as a browser plugin in Chrome, Firefox, Safari and Opera. It’s also available as a bookmarklet which is ideal for analyzing mobile sites. This seminar is for QA's to discuss on what and how to use the tool while testing .

1. Y Slow.
By Nimmi Joseph
nimmij@mindfiresolutions.com

2. What is YSlow?
YSlow analyzes web page performance by examining
all the components on the page, including components
dynamically created by using JavaScript.
It measures the page's performance and offers
suggestions for improvement.
It suggest ways to improve the performance based on
a set of rules for high performance web pages.

3. Features of Y Slow?
- Grades web page based on one of three predefined
ruleset or a user-defined ruleset.
- It offers suggestions for improving the page's
performance.
- Summarizes the page's components.
- Displays statistics about the page.
- Provides tools for performance analysis.

4. How does YSlow work?
YSlow works in three phases to generate its results.
Step -1
YSlow crawls the DOM to find all the components
(images, scripts, stylesheets, etc.) in the page and loops
through Firebug's Net Panel components and adds
those to the list of components already found in the
DOM.
Step – 2
YSlow gets information about each component: size,
whether it was gzipped, Expires header, etc.

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

6. Performance Rules of YSlow.
Yahoo!'s Exceptional Performance team has
identified 34 rules that affect web page performance.
YSlow's web page analysis is based on the 23 of
these 34 rules that are testable.
Studies have shown that web page response time can
be improved by 25% to 50% by following these
rules.
1. Minimize HTTP Requests
2. Use a Content Delivery Network
3. Avoid empty src or href

7. 4. Add an Expires or a Cache-Control Header
5. Gzip Components
6. Put StyleSheets at the Top
7. Put Scripts at the Bottom
8. Avoid CSS Expressions
9. Make JavaScript and CSS External
10.Reduce DNS Lookups
11. Minify JavaScript and CSS
12.Avoid Redirects
13.Remove Duplicate Scripts
14. Configure ETags
15. Make AJAX Cacheable
16. Use GET for AJAX Requests
17. Reduce the Number of DOM Elements
18. No 404s

8. 19. Reduce Cookie Size
20. Use Cookie-Free Domains for Components
21. Avoid Filters
22. Do Not Scale Images in HTML
23. Make favicon.ico Small and Cacheable.
For more details on the rules refer the following url
http://developer.yahoo.com/performance/rules.html#n
um_http
When analyzing a web page, YSlow deducts points
for each infraction of a rule and then applies a grade
to each rule.
An overall grade and score for the web page is
computed by summing up the values of the score for
each rule weighted by the rule's importance.

9. Installing YSlow.
Firefox
YSlow for Firefox needs Firebug to run.
Latest version of Firebug can be obtained from
https://addons.mozilla.org/en-US/firefox/addon/1843
--------------------------
Safari
Latest version and installation process can be obtained
from
http://yslow.org/safari/
---------------------------
For Chrome
https://chrome.google.com/webstore/detail/yslow/ninejjco

10. How to run the YSlow.
Firefox
YSlow for Firefox runs in the Firebug window, so in
order to run the tool, Firebug must be enabled.
There are different ways to start YSlow for Firefox:
1. Open the Firebug window and click on the YSlow
tab.
2. Click the YSlow button on the status bar.

11. The first time you bring up YSlow, the following
screen appears:

12. Run the Test.
Click Run Test to run YSlow.
OR
Click on the Grade, Components or Statistics tabs to
start the web page analysis.
Autorun YSlow.
Clicking on the box next to Autorun, makes the
YSlow run each time a web page is loaded in the
browser.
You can enable or disable the Autorun option by
selecting or deselecting Autorun OR by right clicking
anywhere in the YSlow status bar.
NOTE : Autorun option is only available for Firefox
browser.

13. YSlow Views.
The results of analysis are displayed in three different
views
1. Grade View
2. Components view.
3. Statistics View.
They can be navigated by selecting the tab with the
view name under the Yslow tab.

14. Grade View .
Grade tab displays an analysis of the page's
performance.
The Grade View displays a report card for the web
page with grade for the page displayed at the top along
with an overall numeric performance score.
The rules are listed in order of importance from most
important to least important.
Each rule is assigned a letter grade A through F,A
being the highest grade.

16. If a rule is not relevant to the web page, the grade
returned is N/A, not applicable.
Each of the 23 testable rules can be reviewed for the
web page.
For each rule, a grade is listed along with a list of
components that violated the rule and suggestions for
improvement.
There is a short description of the rule and a “Read
More” link to read more about how the rule impacts
web page performance.

17. Component View.
Component tab displays information about all the
components present on the web page.
This view, helps to see which components could be
gzipped to improve performance.

18. At the top it displays a summary of the total number
of components on the page and the page weight in
kilobytes.
Then there is a table with the component information.
Click on the Expand All link to expand all the rows in
the table.
Following is a summary of the columns in the
Components View table:
1. Type - the component's type. The page is
comprised of components of the following types: doc,
js, css, flash, cssimage, image, redirect, favicon, xhr,
and iframe.

19. Size - the component's size in kilobytes.
Gzip - the component's gzipped size in kilobytes.
Cookie Received - the number of bytes in the HTTP
Set-Cookie response header.
Cookie Sent - the number of bytes in the HTTP
Cookie request header.
Headers - the HTTP header icon. To view the header
click the magnifying glass icon. Click the icon again
to close the header.

20. URL - the component's URL.
Expires - the date in the Expires header or max-age in
the cache-control header. This field is set to no
expires if there is no expires information.
Response Time - the time in milliseconds it takes to
load the component using XMLHttpRequest.
ETag - the ETag response header value, if applicable.
Action - an action to take on the component for
additional performance analysis.

21. Statistics view dislays a summary of the total number
of HTTP requests and the total weight of the page in
kilobytes as well as page weight analysis for both
Empty Cache and Primed Cache perspectives.
The Empty Cache perspective indicates all the
components that the browser must request to load the
page when the user visits it for the first time.
In the Primed Cache perspective, all or most of the
components would already be in the cache, which
would reduce the number of HTTP requests and the
weight of the page.
Statistics View.

23. There are 3 predefined rulesets .
1.YSlow(V2) - this ruleset contains all 23 testable
rules.
2.Classic(V1) - this ruleset contains the original 13
rules that were used in YSlow 1.0.
3. Small Site or Blog - this ruleset contains the 14 rules
that are applicable to small web sites or blogs.
4. [Own Ruleset ] - To create our own ruleset, click on
the Edit button next to the Rulesets pull-down menu.
Ruleset.

24. Select the rules that needs to be included in the
ruleset and then save the ruleset with a name.
To run a particular ruleset , select the ruleset and
click on " Run Test"
If the ruleset is no longer needed , it can be deleted
by clicking on the Delete button.

25. Clicking on the Printable View link displays the page
performance analysis.
YSlow asks what information you want to display.
Selecting one or more of the available views opens a
new window, formatted for printing, containing the
information from the views you selected.
Printable View .

26. Help Menu.
Clicking on Help brings up the following menus
- YSlow Help - links to this document, the YSlow
User Guide
- YSlow FAQ - links to frequently asked questions
about using YSlow
- YSlow Community - links to the Exceptional
Performance Yahoo! group
- Send Feedback - links to a feedback form for
sending comments and suggestions
- YSlow Home - links to YSlow home page

27. YSlow's Tools menu provides several reporting tools
that you can use to get information to help with your
web page analysis.
NOTE – The Tools menu is only available for Firefox
browser.
Tools Menu .

28. Reference Links.
1. http://yslow.org/
2. http://yslow.org/user-guide/
3.http://developer.yahoo.com/performance/rules.html#
num_http