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: Facebook, Twitter, Google+

16 Responses

  1. [...] phpied.com put an intriguing blog post on YSlow-er?Here’s a quick excerpt [...]

  2. [...] Stoyan Stefanov goes into more detail on the new features, and you can check out the release notes. [...]

  3. [...] phpied.com wrote an interesting post today on YSlow-er?Here’s a quick excerpt 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 pr [...]

  4. [...] Stoyan Stefanov goes into more detail on the new features, and you can check out the release notes. [...]

  5. [...] Stoyan Stefanov goes into more detail on the new features, and you can check out the release notes. [...]

  6. [...] Steve Souders 和 Stoyan Stefanov 已经发布了 YSlow 0.9: 该版本有两个新特性.通过和Firebug更好地集成,YSlow现在查找非Dom元素,如Ajax和image,同时YSlow也抓去frame和iframe并且分析他们的资源。新版本也修改了许多Bug,这些Bug包括加亮404,更好地检测css表达式,Javascript minification,和利用YSlow进行查找。 这些新特性让YSlow更好地支持Web 2.0程序的开发。 可以参考的Stoyan Stefanov的goes into more detail 和 release notes [...]

  7. [...] Stoyan Stefanov goes into more detail on the new features, and you can check out the release notes. [...]

  8. [...] Check it out! While looking through the blogosphere we stumbled on an interesting post today.Here’s a quick excerptOne 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. … [...]

  9. [...] Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « linksfor 2007-12-16 [...]

  10. [...] Yahoo! released version 0.9 of YSlow recently. The release notes offer the highlights, but this blog entry by one of the developers provides more details. [...]

  11. Good One
    Know More About Silk Sarees In Kanchipuram At Kanchipuram Portal

  12. hey there and thank you for your info ¡V I have certainly picked up something new from right here. I did however expertise several technical points using this web site, as I experienced to reload the site a lot of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I’m complaining, but sluggish loading instances times will often affect your placement in google and can damage your quality score if ads and marketing with Adwords. Anyway I¡¦m adding this RSS to my e-mail and can look out for a lot more of your respective interesting content. Ensure that you update this again very soon..

  13. Find out how to capitalize on mobile social Media

  14. You may like Shades of Grey in Fifty but Lust brings on Journey to Higher level of Tantric lust

  15. I have been surfing the web more than 3 hours today, and this is the best article I’ve come across. I’m a content fiend so I’ve actually seen a lot already.In my opinion, if all site owners and bloggers made as good content as youhave, the internet would bea lot more useful than ever before.

  16. Hi there! I could have sworn I’ve been to this site before but after browsing through some of the post I realized it’s new to
    me. Anyhow, I’m definitely glad I found it and I’ll be book-marking and checking back frequently!

Leave a Reply