YSlow performance extension for Firebug

July 25th, 2007. Tagged: firebug, firefox, performance, tools, yahoo, yslow

Steve Souders, performance architect at Yahoo, announced today the public release of YSlow.

What's YSlow?

It's an extension to Firebug (yes, correct, Firebug, not Firefox) that helps with performance optimization efforts. It scores your page on the scale A to F, based on compliance with Yahoo's performance rules. It's a tool that has been used internally at Yahoo and is now released to the world.

The score

Here's how YSlow scores Yahoo's homepage, gives it an A with 93 points out of 100
yslow.png

You can see on the screenshot how YSlow is just another panel within Firebug, and when you select the panel it gives you a few features. The main one is Performance (shown on the screenshot).

You get a list of 13 things YSlow has evaluated (they are based on the performance rule) and if you don't get an A, there is an arrow that gives you more explanations why. Every one of the 13 items on the list is linked to online documentation of the rule so you can figure out right then what could be improved.

Other features

Besides Performance, there's also the Stats tab which gives you comparison of how your page size for visitors coming with an empty cache vs the ones that have previously visited the page.

yslow2.png

The other tab is Components which lists every component on the page along with some information, relevant to performance, such as if the component as gzipped, what was the ETag if any, component size and expiration date.

yslow31.png

In the tools section you'll find a nice surprise - integration with the JSLint tool, the unforgiving JavaScript verifier by Douglas Crockford.

The score (revisited)

OK, I'm sure you'll find the tool invaluable, but you may frown upon the score. Well, the scoring system is made so that it suits Yahoo's purposes, but you can modify it so that it fits your specific needs. In order to customize the points system you can go about:config in Firebug and search for yslow. There you can specify points for the score. In addition to that you can find the file called yslowcontext.js in your Firefox extensions folder (should be somewhere in Documents and Settings/Application Data/Mozilla/extensions/steve@yahoo/, path abbreviated), if you can't find it, just search for it. In this file, there is an array that defines the weight of each of the 13 rules in the overall score, so you can tweak that as well. To find the array, search for lintweights

Have fun!

And happy performance tunning!

Links

Tell your friends about this post: Facebook, Twitter, Google+

25 Responses

  1. YSlow – Yahoo’s performance extension for Firebug…

    Steve Souders, performance architect at Yahoo, announced today the public release of YSlow.

    YSlow is an open-source Firefox extension that adds a new panel to Firebug and provides some quite nice performance-related tools. It scores the page you visit…

  2. [...] YouTube Link to Article firefox YSlow performance extension for Firebug » Posted at phpied.com on Wednesday, July 25, 2007 YSlow performance extension for Firebug July 25th, 2007 Steve Souders, performance architect at Yahoo, announced today the public release of YSlow. What’s YSlow? It’s an extension to Firebug (yes, correct, Firebug, not Firefox) that helps … . In addition to that you can find the file called yslowcontext.js in your Firefox extensions folder View Entire Article » [...]

  3. The “13 rules” are fantastic. I’d observed most of these in my own practice, but kept having people tell me a different set of optimization strategies that seemed both less common-sense and more prone to create complexity management issues. I would add one more commonsense rule: consider minimizing interface and studying user attention flow, instead of throwing lots of code at the problem.

  4. [...] “YSlow is an extension to Firebug that helps with performance optimization efforts. It scores your page on the scale A to F, based on compliance with Yahoo’s performance rules. It’s a tool that has been used internally at Yahoo and is now released to the world.” Spread the word! [...]

  5. [...] Mise à jour : une étude plus détaillée ici. [...]

  6. [...] Stoyan Stefanov reviewed it briefly and gave tips for custom scoring at his blog. [...]

  7. [...] Stoyan Stefanov reviewed it briefly and gave tips for custom scoring at his blog. [...]

  8. [...] New tool to help check for slowness problems and possible solutions – Today, 08:16 AM Spied this on Slashdot today… It is a plug-in for Firebug that helps evaluate and score your site for speed. Sounds like it can be useful for all of us. Check out the write-up here. [...]

  9. [...] If you want some fancy screenshots to oggle over and to find out a bit more about the plugin before you play, you can find a review of the actual plugin over at phpied.com and check out the actual YSlow page. Filed under: Software, Internet   |    Tags: Firebug, Firefox, performance, YSlow. [...]

  10. [...] Ich selbst habe YSlow zwar noch nicht ausprobiert, der Screenshot und der zugehörtige Artikel von phpied.com geben aber einen guten Eindruck davon, wie man damit die Stellen einer Seite findet, die man für eine höhere Geschwindigkeit optimieren sollte. [...]

  11. [...] YSlow YSlow is an excellent FireFox plugin to determine how well your pages load, and where exactly performance improvements can be had. You will need FireBug installed to run YSlow. I managed to shave seconds in loading time by concatenating my javascript and css assets, and then deflating (mod_deflate) them via my .htaccess. The page went from about 330Kb to 80Kb. [...]

  12. [...] Stoyan Stefanov reviewed it briefly and gave tips for custom scoring at his blog. [...]

  13. [...] From phpied.com [...]

  14. I checked it out and decided to keep it at both work and home, but sadly, it gave me no reasons as per why http://mixtaping.com is so darned slow.

  15. Hi Phil,

    I did a quick look at your YSLow score, there are some recommendations for you. Here are the ones I think will have the most impact:

    1. remove this line – <script type=”text/javascript” src=”/mint/?js”> it results in a 404 and because it’s a script, it blocks all other downloads.
    2. remove the reference to print.css – also a 404 Not found
    3. check if you do need all those scriptaculous files, for example do you really need drag and drop and slider?
    4. combine all scripts into one file, then move the script tag right before the
    5. gzip the script and the stylesheet (notice singular form) – check here for ideas – http://www.phpied.com/phpbb-front-end-optimization-1-hour-workshop/
    6. try spriting some of the background images – use http://www.csssprites.com to make it easier

    Let me know if there are any problems and tell me how it loads after you implement these

  16. hmm, and this is not good – YSLow complained that you use CSS expressions and here’s what I found:

    .commentinfo {
    height: 78px;
    margin-left: 122px;
    margin-top: -83px;
    max-width: 450px;
    width:expression(450 + “px”);

    overflow: hidden
    }

    I guess you’re targeting IE that doesn’t support max-width. IF you find another way to do the same, it would be good, because these expressions are evaluated many times. This is your last concern though, your expression doesn’t access the DOM so it should be fast.

    I’d say focus on 1-4 from the list above and see how it goes.

  17. [...] Overall, this is a fantastic tool for developers to help optimize speed and efficiency on your websites. There is a good overview of the tool on PHPied’s website, so give it a look if you are interested. Click to submit to the social network These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

  18. [...] http://www.phpied.com/yslow-performance-extension-for-firebug/ [...]

  19. [...] Stoyan Stefanov reviewed it briefly and gave tips for custom scoring at his blog. [...]

  20. Thanks i try in thi moment, have a god job.

  21. [...] I’ve blogged before on YSlow, but here’s a word in case you’re not familiar with this ultra-useful tool for speeding up your web site. YSlow inspects a page you give it for compliance with Yahoo’s rules for front-end performance (my SitePoint article on the subject) and hints you how you can speed up your page, using a convenient action-oriented list. In addition to that there is a full list of the page components being inspected and also some other useful tools. [...]

  22. I managed to get a 100 :) I’m taking a website and analyzing how they could improve performance and have a faster loading site.

    let me know what you think about it.

  23. YSlow is very useful, providing you use a bit of common sense and don’t become too obsessed with your score. Some things (like CDNs) simply aren’t relevent for small sites. I actually tend to use this tool too: http://linuxbox.co.uk/website_performance_test.php it does pretty much the same as YSlow, but does a few extra things too (and invariably gives slightly different results)

  24. Very useful Firebug Extension.
    Can’t live without my Firebug :)

  25. Lastabwurfsysteme…

    [...]YSlow performance extension for Firebug / Stoyan’s phpied.com[...]…

Leave a Reply