| Firefox Add-On: YSlow |
| Saturday, April 04 2009 |
|
Ever wonder why browsing a particular web site is slow? And maybe you’d like to know what the page load times are for that site. These questions can be answered quickly and easily with Yahoo’s YSlow add-on. YSlow gives you constant access to this type of information right within Firefox, and provides you some insight into possible reasons why a page is taking too long to load.
The first thing to know about using YSlow is that it depends on Firebug (another great add-on that I’ll write about in a future post), so install Firebug before installing YSlow; otherwise, YSlow will not run. Now that we’ve taken care of that little requirement, once YSlow is installed and you browse to a web site, you’ll notice some new things in the bottom-right of your Firefox statusbar:
 |
The little bug icon is for Firebug and the speedometer icon is for YSlow. At a glance YSlow gives you three pieces of information: a grade, page size, and load time. The image above is YSlow stats for loading my personal iGoogle page:
B = Overall grade
510.3K = Page size (uncached)
0.42s = Page load time
You might be wondering what the grading criteria is for YSlow; for that you need to read Yahoo’s 13 performance rules:
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.
The list is hard to argue with and provides solid guidance for speeding up web pages. I definitely recommend you give the 13 rules a read through.
So staying with my iGoogle page, clicking on the YSlow icon shows me the Performance tab with the 13 rules and a grade for each:
 |
Some of the rules have additional data you can expand, as shown below for the CDN (Content Delivery Network) rule:
 |
Clicking on the Stats tab shows a pie chart with some additional data. This is always interesting because it shows you the difference in page size when the page has cached resources versus not having cached resources. Here you see that my iGoogle page is 510.3K in size without cached images, but is only 58.8K when those images are cached:
 |
YSlow also has a Components tabs which shows you stats for each resource being loaded by the page (click the image for a better view):
 |
And there you have it. There’s not much to using YSlow, but it provides valuable insight as to why a page might be taking too long to load, or even why a page is blazing fast. YSlow is currently at version 1.0.2 and can be downloaded/installed from here.
