Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

YSlow For QA

895 views

Published on

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 .

Published in: Software
  • Be the first to comment

YSlow For QA

  1. 1. Y Slow. By Nimmi Joseph nimmij@mindfiresolutions.com
  2. 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. 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. 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. 5. Step – 3 YSlow takes all this data about the page and generates a grade for each rule, which produces the overall grade.
  6. 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. 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. 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. 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. 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. 11. The first time you bring up YSlow, the following screen appears:
  12. 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. 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. 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.
  15. 15. 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.
  16. 16. 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.
  17. 17. 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.
  18. 18. 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.
  19. 19. 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.
  20. 20. 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.
  21. 21. 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.
  22. 22. 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.
  23. 23. 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 .
  24. 24. 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
  25. 25. 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 .
  26. 26. Reference Links. 1. http://yslow.org/ 2. http://yslow.org/user-guide/ 3.http://developer.yahoo.com/performance/rules.html# num_http

×