Notebook
Y Slow.
By Nimmi [email protected]
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.
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.
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 2YSlow gets information about each component: size, whether
it was gzipped, Expires header, etc.
Step 3
YSlow takes all this data about the page and generates a grade
for each rule, which produces the overall grade.
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 Requests2. Use a Content Delivery Network3.
Avoid empty src or href
4. Add an Expires or a Cache-Control Header5. Gzip Components6.
Put StyleSheets at the Top7. Put Scripts at the Bottom8. Avoid CSS
Expressions9. Make JavaScript and CSS External10.Reduce DNS
Lookups11. Minify JavaScript and CSS12.Avoid Redirects13.Remove
Duplicate Scripts
14. Configure ETags15. Make AJAX Cacheable16. Use GET for AJAX
Requests17. Reduce the Number of DOM Elements18. No 404s
19. Reduce Cookie Size20. Use Cookie-Free Domains for
Components21. Avoid Filters22. Do Not Scale Images in HTML23. Make
favicon.ico Small and Cacheable. For more details on the rules
refer the following url
http://developer.yahoo.com/performance/rules.html#num_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.
Installing YSlow.
FirefoxYSlow 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/ninejjcohidippngpapiilnmkgllmakh?hl=en
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.
The first time you bring up YSlow, the following screen
appears:
Run the Test.Click Run Test to run YSlow. ORClick 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.
YSlow Views.
The results of analysis are displayed in three different
views
1. Grade View2. Components view.3. Statistics View.
They can be navigated by selecting the tab with the view name
under the Yslow tab.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 .
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
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 .
Reference Links.
1. http://yslow.org/
2. http://yslow.org/user-guide/
3.http://developer.yahoo.com/performance/rules.html#num_http
