start blog post

Exceptional Performance: YSlow Update

YSlow, Yahoo's developer plugin for Firefox, just autoupdated yesterday, and what a massive overhaul it was! I've been playing around with it and love the new interface and features. Here's a quick walkthrough of the new interface.

YSlow's main panel, your website's "Grade". Several rules were added to the new release, including tips on improving AJAX call performance, reducing the number of DOM elements to speed up render time, and warnings about HTML-scaled images.

The Ruleset dropdown (at the top of the panel) lets you choose between the original set of rules, the new and expanded set of rules, or a "small site" ruleset which excludes some evaluations such as the CDN requirement, which can drag down otherwise highly performant websites. This screenshot was taken on my homepage... Looking good at 93%!

YSlow's components panel, very informative about the pieces that fit together to build your website, grouped by component type (document, script, stylesheet, inline vs CSS image, AJAX document, or redirect).

You can examine the gzipped and uncompressed sizes of appropriate files, whether or not they used cookies, even examine the headers sent when the browser made its request. Red highlights any of your images which were not found (HTTP 404) or have missing ETags or Expires headers.

YSlow's Statistics panel with its pretty pie charts. Pretty similar to YSlow v1's pie charts, just a bit reorganized. High performance websites have small numbers on the "primed cache" graph. To improve your statistics here, set your cache headers using .htaccess or PHP

The big new toy for this release is YSlow's Tools panel. Here you can validate the current page's JavaScript, show only JavaScript or CSS in easy-to-read formats, minify JavaScript, run Smush.it on all of the current page's images, or get a for-print version of YSlow's various panels. Very cool.

The Verdict?

Overall I think this is an excellent update to an already excellent web development tool. The new customization options will eliminate the need to "hack" the plugin via about:config, and the integrated tools panel will improve both speed to production and code review. Thanks Yahoo!

How to Start Using YSlow

  1. Install Firefox
  2. Install Firebug
  3. Install YSlow

var tags = [];

  • share this post:
  • email a friend
  • float this post
  • digg this post
  • share on stumbleupon
  • submit to technorati
  • tweet this post

end blog post

most viewed this week

least viewed this week