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

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.

wondeful. except that's not why it's slow

[brunascle]

that's all well and good, but it's slow because of the server-side scripts, not anything client side. and no browser plugin will ever know that.

Web site optimization for dummies

[Anonymous Coward]

Nice one Yahoo. Now people can optimize their website without bothering to read up on HTTP and thinking about what they're doing.

Since 9/10 web developers can't even be bothered using a validator, I predict great success for this tool.

Re:Another tool

[gblues]

I see your point, but keep in mind that the website server iikely has a far better uplink to the Internet than you do. A plug-in like this gives you real-world performance data if you're using it on, say, a residential DSL line.

hmmm...

[Tom]

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.

Re:My site gets a D too

[jamie]

Yeah it says the same for Slashdot's css files, which are indeed in the head. Guess that's a YSlow bug.

Why is this a troll?

[kat_skan]

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

Re:website testing

[QuickFox]

and that damn Flash is about the worst there is now.

The Firefox plugin Flashblock [mozilla.org] is quite wonderful. Flash items are replaced with a clickable surface. You get the option to click on the very few Flash items that you do want to view.

To me, that is the sign of real professional web developers.

More like a professional organization. If it were up to us developers, pages would be much better than they are.

load order effects perceived slowness

[kiick]

In my experience "slow" is a very subjective measure of a web site. It really depends on how quickly the content is displayed, not how quickly the entire page is loaded and rendered.

Lets say you visit, oh, dilbert.com (just to pick on a geeky site) to get your daily dose of dilbert. If the first thing that is rendered on your screen is the actual comic, you don't really care that it takes another 10-20 seconds to display the buttons, menus, sidebars, topbars, bottombars, animations, ads and ads for ads. It can do that while you chuckle over the comic.

On the other hand, if you have to sit there and drum your fingers while all the other crap loads first before you get to look at todays dilbert, then you are going to be muttering "why is this site so freaking slow?" And if wwww.weselladstoadserversbythebillions.com got it's DNS server taken out by a freak lightning strike, you could be sitting there a while.

Would it be possible to have a plug-in or extension, so that I could right click on the actual content of a site and say "next time I visit here, load this bit first?" Yes, I could just block everything else on the site, but then they'll change it a week later, and some of the non-content stuff might actually be useful on occasion. I don't want to have to be in an arms race with a million web-monkeys on a thousand different sites just to browse my RDA of surfing.