Slashdot Mirror

← Back to Stories (view on slashdot.org)

Yahoo's YSlow Plug-in Tells You Why Your Site is Slow

Posted by CmdrTaco on from the like-i-need-a-plugin-to-tell-me-i-suck dept.

Stoyan writes "Steve Souders, performance architect at Yahoo, announced today the public release of YSlow — a Firefox extension that adds a new panel to Firebug and reports page's performance score in addition to other performance-related features. Here is a review plus helpful tips how to make the scoring system match your needs.

14 of 103 comments (clear)

  1. /. gets a D by LoadWB · · Score: 4, Funny

    Interesting utility. Slashdot gets a D on the homepage, F on a comments page. Many media sites score Fs, mostly thanks to numerous ad and cookie sites.

    1. Re:/. gets a D by JuanCarlosII · · Score: 5, Funny

      Even better than that, http://developer.yahoo.com/yslow/ gets a D for performance.

    2. Re:/. gets a D by jrumney · · Score: 4, Interesting

      My own site also got a 'D', so that seems to be the standard grade. Everything that matters, it got an 'A' for, except for using non-inlined CSS which it got a 'B' for the test that said you shouldn't (to reduce HTTP requests), and an N/A for the test that says you should (to take advantage of caching). Then there were a whole lot of irrelevant things that it got an 'F' for. The fact that none of my site is hosted on a distributed network, the fact that I leave the browser cache to make its own decision about expiring pages since I don't know in advance when I'm going to next change it, and something about ETags, I'm not sure whether it is saying I should have more of them, or I should get rid of the ones I've got.

    3. Re:/. gets a D by daeg · · Score: 3, Interesting

      It depends on the headers (server), browser, and method, actually. Under some circumstances, for instance under SSL, full copies of all files will be downloaded for every request. As HTTP headers get more complex (some browsers with toolbars, etc, plus a plethora of cookies), the HTTP request/response cycle expands. It may not seem like a lot, but a .5kb request header multiplied by dozens of elements and you can quickly use up a lot of bandwidth. Firefox does a much better job than Internet Explorer under SSL, but not by much unless you enable disk-based caching.

      Something I would love to see are some of the headers condensed by the browser and server. For instance, on first request the browser sends the full headers. In the reply headers, the server would set a X-SLIM-REQUEST header with a unique ID that represents that browser configuration's set of optional headers (Accept, Accept-language, Accept-encoding, Accept-charset, User-agent, and other static headers). Further requests from that browser would then simply send the X-SLIM-REQUEST header and unique ID and the server would handle unpacking it -- if the headers are even needed. Servers that don't supply the header would continue to receive full requests, preserving full backward and forward compatibility.

      There are a few things to reduce request sizes for web applications. MOD_ASIS is one of the best ones. We use it as one of the last steps of our deployment process. All images are read in via script, compressed if they are over a certain threshold, and minimal headers are added. Apache then delivers them as-is -- reducing load on Apache as well as the network (the only thing Apache adds is the Server: and Date: lines). ETags and last-modified dates are calculated in advance. Also certain responses such as simple HTTP Moved (Location:) responses, GZip isn't used -- GZiping the response actually *adds* to the size due to their very small document size.

    4. Re:/. gets a D by mr_mischief · · Score: 4, Interesting

      I've killed some time on this since it's a pretty interesting idea. It turns out there are plenty outside the D and F range. It does seem to like pages with a single Flash object and not much else, so that's bad. It also makes some pretty arbitrary decisions which don't mean squat to many sites. There are some sites that get enough traffic that speed is a factor but not so much that a content delivery network is really necessary, for example.

      I skipped the actual link and score on sites that are pretty much just representative of the sites around them. I wanted to include them by name, though, to show where they fall. I've stuck mostly to main index pages, and I've noted where I've gone deeper.

      A: Google (99%), Altavista main page (98%), Altavista Babelfish (90%) (including upon doing a translation from English to French), Craigslist (96%), Pricewatch (93%), Slackware Linux, OpenBSD, Led Zeppelin site at Atlantic (100%), supremecommander.com, w3m web browser site (96%)

      B: Apache.org (87%), the lighttpd web server (84%), Google Maps, which also got a C once (84% in most cases), Perlmonks (84%), Dragonfly BSD (85%), Butthole Surfers band page (81%), 37 Signals

      C: One Laptop Per Child,, ESR's homepage, the Open Source Initiative (78%), Google News (73%), Lucid CMS (74%), Perl.org (75%), lucasfilm.com, Charred Dirt game

      D: gnu.org, The Register, A9 (66%), kernel.org, Akamai (64%), kuro5hin.org, freshmeat.net, linuxcd.org, Movable Type (61%), Postnuke, blogster.com, Joel on Software (67%), Fog Creek Software, metallica.com, gaspowered.com, Scorched 3D (68%), id software (64%), ISBN.nu book search

      F: MS IIS (49%), microsoft.com, msn.com, linux.com, fsf.org, discovery.com, newegg.com, rackspace.com, the Simtel archive (26%), CNet Download (29%), Adobe (58%), savvis.com, mtv.com, sun.com, pclinuxos.com, freebsd.org, phpnuke.org, use.perl.org, ruby-lang.org, python.org, java.com, Rolling Stones band page (56%), powellsbooks.com, amazon.com, barnesandnoble.com, getfirefox.com

      My site for my company (96%) gets an A (no, I'm not going to get it slashdotted) which is pretty simple but has a pic and some Javascript on it. Several sites I have done or have helped design with someone else get C or D ratings.

  2. Sure but by loconet · · Score: 3, Funny

    I bet it doesn't actually tell you your site is being /.ed

    --
    [alk]
  3. Re:Firebug not Firefox by JuanCarlosII · · Score: 4, Informative

    YSlow require Firebug to previously be installed in order to run. It is an extension of the capabilities of Firebug and so is an extension of an extension, a meta-extension if you will.

  4. Re:Another tool by danbert8 · · Score: 4, Funny

    I think you slashdotted a website efficiency report of Slashdot. Shouldn't that cause a black hole or something?

    --
    Yes it's an anecdote! Were you expecting original research in a Slashdot comment?
  5. F: You are co-located at 365 Main. by jea6 · · Score: 4, Funny

    F: You are co-located at 365 Main.

    --

    sarchasm: The gulf between the author of sarcastic wit and the person who doesn't get it.
  6. hmmm... by Tom · · Score: 4, Insightful

    Interesting approach, with lots of flaws.

    For example "use CDN" (aka Akamai, etc.) - yeah, right. For Yahoo.com that's an idea. For my private website, that's bullshit. If they really use this internally to rate sites, their rating sucks by definition.

    So in summary there are a couple good points there, and a couple that are not really appropriate. Expires: Headers are a nice idea for static webpages. But YSlow still gives me an F for not using one on a PHP page that really does change every time you load it.

    --
    Assorted stuff I do sometimes: Lemuria.org
  7. Friendlier Reporting by HitekHobo · · Score: 3, Funny

    I think I'd prefer it to use a bit more realistic reporting. How about: 1) Your web developer is a complete incompetent. 2) Buy more hardware, tightwad. 3) There is no need to add every script plugin you come across. 4) Animated gif's are annoying as well as slow to load. 5) Yes, it does take time to download and render an entire book in html.

    --
    A couple of 30-somethings embark on the ultimate roadtrip
  8. Re:My site gets a D too by grahamsz · · Score: 3, Informative

    If you put the links to the CSS at the very top of the head section then that grade will jump from an F to an A.

    I doubt moving them above title makes any noticeable difference in the real world though.

  9. Just the start of their new plugin scanners by 192939495969798999 · · Score: 3, Funny

    YSucks - reveals why your site sucks.
    YMe - translates your site into emo-speak.

    --
    stuff |
  10. Why is this a troll? by kat_skan · · Score: 5, Insightful

    The Anonymous Coward here is spot on. This thing gives awful, awful advice. Some of these in particular I really hated as a dialup user.

    CSS Sprites are the preferred method for reducing the number of image requests. Combine all the images in your page into a single image and use the CSS background-image and background-position properties to display the desired image segment.

    This is only a win if your images are tiny. Why are you optimizing for this? Tiny images do not take long to download, even on dialup, because they are tiny. Frankly I would prefer to have all the site's little icons progressively appear as they become available than have to wait while a single image thirty times the size of any one of them loads. Or, perhaps, fails to load, so that I have to download the whole thing again instead of just the parts I have.

    Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages.

    This is hands down the stupidest idea I have ever heard. Ignoring for the moment that it won't even work for the 70% of your visitors using IE, sending the same image multiple times as base64-encoded text will completely swamp any overhead that would have been introduced by the HTTP headers.

    Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all stylesheets into a single stylesheet.

    Less egregious than suggesting CSS Sprites, but it still suffers from the same problems. These are not large files, and if they are large files, the headers are not larger.

    As described in Tenni Theurer's blog Browser Cache Usage - Exposed!, 40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.

    What, seriously? Are you really optimizing for your visitors who load one and only one page before their cache is cleared? Even though you "measured... and found the number of page views with a primed cache is 75-85%"?

    Add an Expires Header

    ...

    Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster. A web server uses the Expires header in the HTTP response to tell the client how long a component can be cached. This is a far future Expires header, telling the browser that this response won't be stale until April 15, 2010.

    Expires: Thu, 15 Apr 2010 20:00:00 GMT

    ...

    Keep in mind, if you use a far future Expires header you have to change the component's filename whenever the component changes.

    And if you ever change something but forget to change the file name, your visitors will have to reload everything on the damn page to get the current version of the one thing you changed. Assuming, of course, they even realize there should be a newer version than the one they're seeing. And assuming that they actually know how to do that.

    Put CSS at the Top

    While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages load faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

    Um. Duh? link elements are not valid in the body. style elements are