Yahoo’s YSlow is a ‘must have’ Firefox add-on and is an extension (for performance) to the Firebug tool. YSlow analyzes web pages and suggests ways to improve the performance of web pages based on a set of rules for high performance web pages laid out by Yahoo. There are 34 rules laid out by Yahoo and YSlow is capable of testing 22 of them.
The 22 rules testable by YSlow and as listed in the YSlow user guide, are:
- Minimize HTTP Requests
- Use a Content Delivery Network
- Add an Expires or a Cache-Control Header
- Gzip Components
- Put StyleSheets at the Top
- Put Scripts at the Bottom
- Avoid CSS Expressions
- Reduce DNS Lookups
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
- Make AJAX Cacheable
- Use GET for AJAX Requests
- Reduce the Number of DOM Elements
- No 404s
- Reduce Cookie Size
- Use Cookie-Free Domains for Components
- Avoid Filters
- Do Not Scale Images in HTML
- Make favicon.ico Small and Cacheable
Assuming you have downloaded YSlow and installed it in Firefox, let us quickly run the YSlow tool on a website and then dissect the results to understand the tool better. Once installed, the YSlow tool can be invoked from Firefox. Just open your web page in Firefox and click the YSlow tool (lower right corner of the Firefox status bar). Here are the results of running YSlow on a sample webpage from my site.
As you can observe, the results consists of 4 Tabs – Grade, Components, Statistics and Tools. The screenshot also shows the rulesets applied as well as the the Grade received by the website. Let us understand these terms one by one.
Let us first understand the rulesets that YSlow uses to grade pages (we will understand grading shortly). There are 3 predefined rulesets that you can choose to apply on a webpage:
YSlow(V2) - This ruleset contains the 22 rules listed in the beginning of this article.
Classic (V1) - This ruleset contains rules from 1 to 13.
Small Site or Blog - This ruleset contains 14 rules that are applicable to
small websites or blogs. These are Rule 1, 4, 5, 6, 7, 9, 10, 11, 12, 16, 17, 20, 21 and 22.
In addition to these rulesets, you can also create your own set of rules. For more information on creating custom set of rules, read Customizing Rulesets.
‘Grade’ is one of the four tabs as shown below and depicts a report card on our page’s performance.
YSlow examines all the components of a webpage and then grades the web page based on one of three predefined ruleset or even a custom-defined ruleset, we discussed about in the Rulesets section. How the grading works, is when YSlow analyzes a webpage, it deducts points for every breach of a rule and then applies a grade to each rule. Here’s a sample screenshot of the grades received by the webpage for each rule and the suggestion for improvement, shown on the right.
Then a final grade is computed (in our case ‘B’) by summing up the values of the points gained for each rule, weighted by the rule's importance.
Components is the second of the four tabs as shown below:
Statistics is the third tab and provides a graphical representation of the number of HTTP requests made to the server and the total weight of the page in kilobytes for both Empty Cache and Primed Cache scenarios.
The Empty Cache scenario is when the browser makes the first request to the page and the Primed Cache scenario is when the browser has a cached version of the page. In a Primed Cache scenario, the components are already in the cache, so this will reduce the number of HTTP requests and thereby the weight of the page.
With this, I hope this quick guide explained what YSlow is all about and how you can use it to analyze and improve the performance of your web pages. I am going to apply this tool on my web pages and follow the recommendations made by this tool to improve performance. I hope you do the same for your web pages too! You can read more about YSlow in the YSlow User Guide.
Will you give this article a +1 ? Thanks in advance