Tue 31 Jul 2007
Yahoo! Developer Network released the Yslow Firefox/Firebug plugin about a week ago. Yslow is a tool for analyzing web site performance from a frontend perspective. Somehow, despite being subscribed to their blog and about 100 other web development blogs, this completely slipped by me. The best part is it assigns a letter grade, A-F, to each site. The whole thing is oddly addicting. Below is a head to head battle of some related sites.
The Undercard
Digg - F (54) vs Slashdot - F (48)
Not a good outing by either site. Two of the biggest geek sites around produce some of the worst performance. Digg gets 4 F’s including one for “Make fewer HTTP requests”. They load 12(!) external JavaScript files and 22 CSS background images. Slashdot got F’s in the first five categories, including one for having five CSS stylesheets outside of the head tag. Digg for the win, although really they’re both losers.
Amazon.com - F (53) vs Buy.com - D (61)
The top two e-commerce sites don’t fare much better. Buy.com at least gets out of the F range, barely, scoring just a 61. Amazon receives an F for not having a content delivery network (CDN). I have to believe this is a mistake. Amazon themselves runs a service, S3, for delivery of this type of static content. Buy.com receives an F for not minifying their JavaScript. They do however gzip it. Amazon on the other hand minifies their JavaScript, but doesn’t gzip it. Go figure. I’m giving Amazon the win here, despite the lower score. Their F for not having a CDN just doesn’t seem right.
ESPN - F (34) vs CNNSI - F (47)
Just when you think you can’t get any worse. ESPN pulls off an amazing 37. For kicks I was going to see if I can put together a page that scored 0, but ESPN’s 37 kind of took all the fun out of that. They deliver a whopping 7 F’s. They fail big time with “reduce DNS lookups”, as content is pulled from 11 domains. The scary thing is I remember reading an article not long ago about how ESPN completely re-did their site to go to a CSS based layout and generally optimize the whole experience. Might be time to head back to the drawing board. Not much to say about CNNSI - they suffer the same general failures as all the other sites. CNNSI wins when ESPN fails to show up for the fight.
The Main Event
Yahoo - B (89) vs Google - A (99) vs iGoogle - D (60)
I included iGoogle here since Google’s slimmed down search page isn’t really comparable to Yahoo’s portal style search page. Although iGoogle isn’t really a good match either. It’s closer to a My Yahoo page (C - 78, if you were curious). Your scores are likely to differ depending on what plugins you have loaded on your iGoogle or My Yahoo. The score for the main Yahoo page seems to change based on the content as well. Yesterday they were a A (94). The Yahoo page is interesting in that they receive a bunch of B grades for individual items. This is odd since generally sites are either applying the rule or not, which leads to either A’s or F’s. Yahoo seems to be applying the rules in some instances, which may be intentional as the rules are a good guideline, but may not always lead to the best performance. Yahoo receives a B for missing an expires header on one image, an image with the word “updated”. They also lose credit for including a CSS file outside of the head.
Google gets straight A’s for every category. The only note is under the CDN section, because Google isn’t using a CDN for it’s main logo. Considering this is the only graphic on the page it seems strange they would get an A here. Regardless it’s obvious Google went of it’s way to make this page as responsive as possible. It’s slimmed down and optimized in pretty much every possible way. It is possible to get a perfect 100, so Google just missed out there.
iGoogle on the other hand suffers from many of the problems seen on other sites. I wouldn’t expect a more complex page, such as this one to score as well as the main Google search, but they fail on relatively simple things such as adding an expires header to images that are unlikely to change. My Yahoo on the other hand scores a fairly respectable C (78) for their customizable home page. They lose credit for making multiple DNS requests, but some of that is due to the RSS feeds I have on the page. The images associated with the feeds are loaded directly from the respective site. Therefor if you have a bunch of feeds your’re going to rack up the DNS requests. They also lose credit for not using a CDN, but all the items listed are ico files, including ones for the feeds I have setup. Not really much Yahoo can do about that.
Google gets the win for search, but Yahoo makes a strong showing with its personalize home page.
Post Fight Wrap up
Some surprising results here, mostly related to poor performances. Granted this criteria is the opinion of Yahoo developers and open to critique. Most of the factors are generally strong and provide a good best practice approach that can be tweaked for individual sites.
Popularity: 40% [?]










Follow!
August 1st, 2007 at 10:10 am
As mentioned in the SitePoint blog post about this add-on extension (add-on because it requires Firebug), the tests themselves can actually be modified, such as the CDN which most sites would not be taking advantage of. The page for YSlow itself is rated as an F (or it was as of the release anyway); somewhat ironic, but maybe they just wanted to show the possible error messages. It truly is handy, but for actual comparisons it’s not much more than a tool for an entertainment factor (as we can see from your post here, hehe - it was entertaining too!).
August 1st, 2007 at 4:57 pm
This is the SitePoint article Brendon mentions. The tip about configuring the CDN is in the comments. Basically go to about:config in your browser’s address. All the YSlow still is under “extensions.firebug.yslow”.
Thanks for the tip Brendon.
April 30th, 2008 at 5:57 am
Good article. I wrote a similar article on my blog and take issue with the whole scoring system as well. After reading your post, I have to conclude that it does little more than point out just a very few of the things one can do to improve a website’s performance.