Understanding YSlow: What Matters; What Doesn’t

YSlow by Yahoo! is a great little plugin for Firefox and Firebug. It looks at a page and uses Yahoo!’s Best Practices for Speeding Up Your Web Site to tell you how to make the page load faster. At least that is the idea behind it. In practice, however, not all of its suggestions are useful or even meaningful.

Let’s break it down and see what is worth the blood, sweat, and tears, and what is not.

1. Make Fewer HTTP Requests

• Weight: 12.5%
• The idea: If the browser has to make fewer requests, it can display your page faster.
• The implementation: That fewer requests leads to faster display is generally true, although some types of pages require more images and such as part of their content. To account for this, YSlow only looks at three types of request: Javascript files, style sheet files, and images references in style sheets (CSS images). For each one of these, if you have too many of them, your score starts to drop. The limits are 3 scripts, 2 style sheets, and 6 CSS images.
• Recommendation: Follow their suggestions, although the CSS images one may be too strict.

2. Use a Content Delivery Network

• Weight: 9.375%
• The idea: Content delivery networks let you spread your content out on a geographically dispersed network of servers so it can be delivered to your users more quickly. This is especially good to do for components of your page such as images and scripts, rather than the core content that you may need to serve dynamically.
• The implementation: YSlow restricts its attention to scripts, images, CSS images, style sheets, and Flash objects. For each of these, it matches the URL against a list of known CDN URL patterns. You can also add your own CDN patterns, if you need to. Every one of those files that doesn’t match a CDN costs you points.
• Recommendation: Ignore it or cheat (see below). With all due respect to Yahoo!, I get the feeling they are a little too used to dealing with Yahoo! and Flickr scale sites and have forgotten what it is like for everyone else. A CDN is overkill for probably 95%-99% of the web sites in the world. Not only do most sites not get enough traffic to justify it, but CDNs are too expensive for most webmasters.
• How to Cheat: Got to about:config and create an integer setting called “firebug.extensions.yslow.pointsNotCDN” with the value 0. This tells YSlow that each file that is not on a CDN deducts zero points. Instant A.

3. Add an Expires Header

• Weight: 15.625%
• The idea: Save requests for your return visitors by letting them know how long page elements are good.
• The implementation: Again YSlow turns its eye to scripts, images, CSS images, style sheets, and Flash objects. If any don’t have an expires header that lets them live at least 48 hours (or a cache-control header that does the same thing), down goes your score.
• Recommendation: Just do it! This is the single biggest part of your YSlow score and for good reason. Expires headers really do help speed things up and they are just so easy to add. In Apache, it is as simple as adding a couple of mod_expires directives to your .htaccess file.

4. Gzip Components

• Weight: 12.5%
• The idea: If you compress your content it will get your users faster.
• The implementation: Images are generally already compressed by virtue of their file formats (JPEG, GIF, etc.), so this time YSlow focuses on everything else. If any of them aren’t compressed, you lose points fast. Even one infraction and you have lost your A. Miss four and you get an F.
• Recommendation: Do it. Computers are fast and networks are slow. Compressing your files just makes sense and is easy to do. Apache’s mod_deflate (or mod_gzip for the 1.3 crowd) lets you do it with a few small changes to your .htaccess file.

5. Put CSS at the Top

• Weight: 6.25%
• The idea: Give your browser all the style information upfront so it can get the layout right the first time.
• The implementation: Every style sheet used that is not mentioned in the header costs you a letter grade.
• Recommendation: Do what you can. It is a good idea, but is not always possible if you are including dynamic content from other sites, such as widgets, ads, etc. that include their own CSS.

6. Move Scripts to the Bottom

• Weight: 6.25%
• The idea: Let the browser finish laying out your page before you start running all sorts of dynamic scripts.
• The implementation: The same as #5, except every script used that is mentioned in the header costs you a letter grade.
• Recommendation: Not sure. On the one hand, they do have a point about how the page will load. On the other hand, the scripts will download faster if they are referenced in the header. This is what onLoad is for, honestly. And many widgets and ads have to be included inline so you can’t win anyway. Do what you want.

7. Avoid CSS Expressions

• Weight: 4.6875%
• The idea: Don’t make the browser work harder than necessary for your style sheets.
• The implementation: You start this one with barely an A and work down from there. Every expression costs you just two points, so you can get away with a few and still get a B.
• Recommendation: You should avoid CSS expressions, although not necessarily for speed reasons. You should avoid them because they are a nonstandard Microsoft “extension” that will do nothing but cause you headaches as you try to make your site work cross-browser. Anyone who gets less than an A here deserves their headaches.

8. Make JavaScript and CSS External

• Weight: 6.25%
• The idea: Moving style sheets and scripts out of your (X)HTML will allow them to be cached by browsers for subsequent page views on your site.
• The implementation: None. The code for this test is a stub that always gives you an “n/a” with a note saying this it only makes sense for home pages.
• Recommendation: Make them external if they are used on multiple pages of your site. It will help on subsequent pages. On the other hand, if stuff is specific to one page, feel free to inline with immunity.

9. Reduce DNS Lookups

• Weight: 4.6875%
• The idea: The fewer host names a browser has to resolve, the faster it can load your page.
• The implementation: YSlow counts up all the host names for all the components. Anything past two will cost you 5 points. So, four or fewer is an A, five of six a B, and so on.
• Recommendation: Hard call. Most of the time if you have multiple host names being used, it is because you are including widgets or ads from somewhere else or you are using a CDN (see rule #2) to speed things up. Nice catch-22 there. Try to minimize the number of hosts, but don’t sweat it too much for things like ads and CDNs, as your users’ browsers may already have resolved those hosts.

10. Minify JavaScript

• Weight: 6.25%
• The idea: While compressing Javascripts saves bandwidth and time (see rule #4), it turns out that compression works out even better on Javascript that has been “minified.”
• The implementation: YSlow does a clever thing here and just looks for whitespace and comments in your JS files. If it finds them, the file is definitely not minified. You lose 10 points per non-minified file, so one offense is still an A, but you drop a letter grade for each additional infraction.
• Recommendation: Do it, once you have your scripts debugged. Debugging minified code is self-flagellation. The difference between compression on a minified script and a non-minified one is small, but measurable, so it is probably worth the one-time effort. Compressor Rater can help you find the best compression overall for your Javascript.

11. Avoid Redirects

• Weight: 6.25%
• The idea: Bouncing between different URLs causes more requests and more time, so avoid them.
• The implementation: YSlow looks at each component to check for redirects. As with non-minified JS files, you lose 10 points per redirect. One redirect is okay, but any past that and your grade drops fast.
• Recommendation: Redirects are a useful tool, and are sometime quite useful, but they can be overused. Avoid them if you don’t have a good reason to use them.

12. Remove Duplicate Scripts

• Weight: 6.25%
• The idea: Don’t load twice what you can load once.
• The implementation: Any JS file loaded more than once costs you five points, which means you can still get an A with three duplicates.
• Recommendation: Do your best. Duplicated scripts are rarely intentional, but they do happen all the time. Every page that has moer than one AdSense block on it is guilty, which is probably why YSlow cuts you some slack.

13. Configure ETags

• Weight: 3.125%
• The idea: ETags help reduce duplicate requests, so using them is good.
• The implementation: YSlow doesn’t just look for ETag headers, but looks for ones that it feels are valid. This means that it expects any application-generated ETag headers to match those generated by your web server. As with several of the other tests, YSlow only looks at scripts, images, CSS images, style sheets, and Flash objects.
• Recommendation: Don’t bother. ETags are helpful, but Expires headers accomplish much of the same job. Furthermore, YSlow’s implementation is, in my opinion, broken. There is nothing in the HTTP specification that requires a specific format for ETags. An web application should be able to generate whatever form ETag it wants provided it can use it to determine if the content of the page has changed. A commonly used technique is to use an MD5 of the content, but YSlow deems this unacceptable.

Related Posts

• YSlow Shootout: Social News Sites
  YSlow ShootOut will be a new feature, each Wednesday, where I will look at a few competing sites and how they stand up to YSlow's scrutiny. While I am not sure it necessarily translates to any real v...
• 243.4 Terabits per Month – The Speed of Hosting
  There are a lot of different types of hosting. You can use shared hosting, a VPS, or a dedicated server. You can use Windows or Unix. You can use Apache or IIS. You can use something more off-the-...
• Best Dedicated Server Hosts
  Sometimes sharing just isn't an option. Whether you are dealing with sensitive information, are doing lots of processing, or just need to handle a ton of traffic, dedicated servers are the answer wh...