Wednesday, July 25th, 2007
Yahoo! Announces YSlow, Firebug based performance tool
Category: Ajax
, Performance
Steve Souders, performance architect at Yahoo!, announced today the public release of YSlow.
Stoyan Stefanov reviewed it briefly and gave tips for custom scoring at his blog.
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.
Steve is going to be speaking about YSlow at the Ajax Experience that just kicked off. I am looking forward to meeting him and check out the tool. We should give it a run on your sites and post how you did (don’t run it on Ajaxian ;).
Dammit, I got an F! :P
That think kicks ass, but doesn’t seem to be too consistent.
Some feedback shows up as: Move JS to bottom, but on sites with JS on bottom it doesn’t say that. Thought I’d get an A for that line item :-)
I got 3 Fs, 1 D and a C. Guess I have some work tado, yet ebay, microsoft and amazon all get a big Fat F as well.
…this is freakin awesome… so are the 13 rules. Thanks, guys!!!
The one thing that really stands out about this, is the consistant poor grade most people will get for not utilizing CDN. It’s fair to say that all but a handful of sites are on a single server, or at least a single IP address. Distributing servers across the planet is best left for the largest of sites.
So why penalize people for something that they will most likely not be able to do??
Thanks for the feedback. I’ve already gotten a lot (scores) of emails about Rule 2 - use a CDN. You can expand and customize the CDN hostnames as described in this FAQ:
http://developer.yahoo.com/yslow/faq.html#faq_cdn
We’ll keep adding to the list of recognized CDNs. If you can’t afford a for-profit CDN service, investigate free services such as Globule, CoDeeN, and CoralCDN.
It always gives me a ‘C’ for rule #5.
2 external stylesheets were found outside the document HEAD.
However, I only use one .css, which is in the head. It @imports another .css which might be confusing yslow.
Got 2 D’s :( not my mommy will punish me :(
Jonathan, I’m getting the same thing where it says my stylesheets are not in the HEAD. I’m getting a D for that.
Really nice idea. The rules are obviously a little on the idealistic side. Even the YSlow page (http://developer.yahoo.com/yslow/) gets a 67 D.
Don’t feel bad about bad marks. Yahoo’s YSlow description page gets a D. ;)
It is also completely unsuitable for full size web applications.
Got 32 for mine. I won’t argue that it is slow and it will never be as fast as plain web pages, but when you compare it to all the refreshes you would have to do when not using AJAX you would see that the advantage is on side of non-static pages.
I suggest adding few modes to YSlow indicating what sort of page is this and apply different rules for web applications comparing to web sites.
GMail gets an A (98).
On the subject of CDNs, while there are free services out there this is still a bit of a stretch for most applications. I hope the rules are weighted, and that the CDN rule has less of an impact on the final grade than a rule such as 10 (JS minification).
I see that Yahoo / Chris Heilmann still have not abandoned his ideas of actually adding javascript to THE CONTENT of a page, and adding a the bottom. I’ve already flamed him once for this, and still firmly believe this to be a bad practice.
Yahoo, and Chris, do some exceptional work, but please beware something that says “best practices”… wonderful tool, but don’t replace your brain with it :P
wow, not too sure about how much weight is given to CDN, Expires Header and GZip
i see CDN as an issue if clients ever get a hand on this tool
and can only image the conversations, we got an F on CDN… …we want an A… ….insert $$$ here
B 1. Make fewer HTTP requests
F 2. Use a CDN
F 3. Add an Expires header
F 4. Gzip components
A 5. Put CSS at the top
A 6. Move scripts to the bottom
A 7. Avoid CSS expressions
n/a 8. Make JS and CSS external
A 9. Reduce DNS lookups
A 10. Minify JS
A 11. Avoid redirects
A 12. Remove duplicate scripts
F 13. Configure ETags
It’s really nice to see a vendor extending Firebug, and not to be a “hater”, but I have to say that I really don’t see the value in this tool. I could go through the list of 13 myself, and figure out what I’m failing at without the tool to tell me. Is there something I’m missing?
I will say the one valuable feature that is kind of buried is the JSLint integration - that is really nice!
I have to also say the CDN thing is a bit overweighted. It would be interesting to know how each one is weighted, as I doubt they are equally weighted. It does look like @import in stylesheets tend to confuse it somewhat. I’d like to know exactly how it does that measurement, so that could be explained. I do agree that I’m not sure of the value of this tool. While its fun to look, the values it produces are somewhat misleading and sometimes beyond the control of the developer.
You can configure CDN by typing about:config in the url bar in firefox and then do a right click, select New -> String. Type extensions.firebug.yslow.cdnHostnames as preference name and in the value just dump your domain eg ajaxian.com and then you can run your tests again. Actually, a cheap way to escape the ratings for CDN :)
I think it’s funny that Yahoo of all people have developed a method of rating your site’s slowness.
The new Yahoo Mail isn’t the future of web mail, it’s too slow. In fact it’s so slow I sometimes forget that the future is actually going to happen
“I could go through the list of 13 myself, and figure out what I’m failing at without the tool to tell me. Is there something I’m missing?”
Well, I could take out a fine-tipped pen and a magnifying glass and draw tiny dots on a piece of paper, but instead I have this thing called a printer. At first I didn’t get it, realizing I could just do it myself, but then the convenience, speed, and accuracy won me over.
Concerning the “tricky” Rule #5: it looks like the CSS files paths have to be LOWER CASE. Too weird!! Now, I have my B score and my life looks much more beautiful :-)