YSlow-er?

December 5th, 2007. Tagged: yahoo, yslow

One of the hidden perks about working at Yahoo! is that you get to interact with a lot of smart people, and even some celebrities in the web dev profession. Rasmus Lerdorf, Douglas Crockford, YUI guys, the list is way too long... Those couple of weeks I had the pleasure of working closely with Steve Souders, chief performance architect, creator of YSlow and author of High-Performance Web Sites. We're in the same team (although he's in the Sunnyvale HQ and I'm in Santa Monica) and this time the project was the new YSlow release. I had a lot of fun, this was one of my first exposures to YSlow's code and to working on a Firefox extension in general.

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.

So what's new?

Net panel integration

YSlow used to be a DOM crawler, meaning it will look into the current page's DOM tree in order to find components. Firebug's Net panel is a packet sniffer, meaning it reports network traffic. Both of these have drawbacks. A DOM crawler doesn't see all component, like XMLHttpRequests and image beacons that are not part of the DOM. A packet sniffer doesn't see components that are read from the cache.

Since the new version 0.9 YSlow is a combination of a packet sniffer and a DOM crawler. It will first crawl the DOM, looping recursively through all frames (and their frames, and their frames...) and once done, it will look into what Net panel has listed. The resulting list of components is the union of the two lists.

So now YSlow catches XMLHttpRequests, image beacons and any other components that are requested but not included in the DOM.

BTW, by image beacon I mean you do something like this in JavaScript but never add it to the DOM of the page:

var im = new Image();
im.src="logo.png";

Crawling frames

YSlow now recursively crawls frames/iframes to discover components.

a la Net panel tooltips

When you mouse over an image asset inside the Components view or the Performance view, you now get an image preview, just like in Firebug.

tooltip.png

tooltip2.png

Search inside YSlow

Another feature you might be used to in Firebug is now part of YSlow.

search-cr.png

Highlighting 4xx

All components that respond with a 4xx status code, like for example 404 Not Found are now highlighted.

error-4xx-cr.png

The biggie - your score might be lower!

This may be bad news, or good news, depending on how you look at it. Since now YSlow examines more components (frames, XHR) there is a greater chance that some of the newly discovered components are not following the performance rules. So you get a lower score, which is bad. But it is actually good that you're now informed about more improvements you can make, such as make sure your XHRs calls return gzipped responses.

The following screenshots take you through how YSlow works (now and before).

Examining www.yahoo.com

If you take a look around on yahoo.com, there are some areas that are only displayed after you mouse over (Mail, Messenger, Radio) or click (Entertainment, Sports, Video, World, Local, etc). The content for the hidden areas is not available on page load. It's requested via XHR or dynamic script tags. What does this mean for examining the page with YSlow? It means that if you run YSlow right after the page is loaded you get one "static" list of components. But if you first mouse over or click around to bring up some extra content and run YSlow afterwards, you'll get a larger list of components. This even results in a different YSlow grade.

The new YSlow version will give you an even larger list of components as it now includes XHRs among others.

Running YSlow 0.8. on yahoo.com right after initial load

YSlow gives an A (95) which is pretty impressive for such a busy page. The total number of examined components is 34.

8-before-performance-vr.png

8-before-stats-cr.png

Running YSlow 0.8. on yahoo.com after some serious activity

Now I reloaded the page, and hovered over and clicked anything that I believed that will result in extra components being downloaded.

The result is YSlow grade of B (88) now based on the 92 components being inspected.

8-after-performance-cr.png

8-after-stats-cr.png

Running YSlow 0.9

Same as before - reload the page, click around, mouse over, etc. In 0.9. now XHRs and everything over the wire is inspected, so the result is all of a sudden - grade D (63) based on 141 components.

9-performance-cr.png

9-stats-cr.png

Tell your friends about this post on Facebook and Twitter

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov