Web Design and Web Development Help

An introduction to Yslow

Yslow is a tool to help you speed up your website. It’s an add-on for Firefox—or rather, an add-on to an add-on: Yslow installs on top of the popular Firebug add-on. So first you install Firebug, then you install Yslow.

When you run Yslow, it will analyse your web page according to 13 performance rules; for each rule, you receive a grade from A (best) to F (fail). You also receive an overall grade and a score (out of 100). At the time of writing, both Google.com and Yahoo.com score 96 (a high A); most websites get an F grade.

The scoring might seem harsh, and you might be tempted to dismiss these performance rules; but Yslow has been created by Yahoo’s Exceptional Performance team, and their rules deserve your respect. If you follow the rules to the best of your ability, improving your Yslow score, then you will see a significant performance improvement for your website.

If you look at the rules, you may notice a common theme: they are all concerned with components of your web page, such as javascript files, stylesheets, and images. The rules ignore the speed of your server, your databases, and other back-end issues—these only account for about 10–20% of the response time. The other 80–90% of response time is spent on the front-end; this is Yahoo’s golden rule of performance. You may also notice that the rules say nothing about your actual HTML coding practices; again, that’s because the efficiency of your markup has little effect on the performance of your pages: (X)HTML accounts for only about 5% of front-end response time, with the other 95% chewed up by components (JS, CSS, images, Flash, and so on). Next time a markup purist declares that you should use the minimum possible HTML, because it makes your site much faster, please point him in the direction of Yahoo’s Exceptional Performance team, who know better.

Using Yslow: from F to A

Before you start using Yslow, bear in mind that it’s a serious optimisation tool for webmasters who have already covered the basics. For example, Yslow won’t warn you when you have large images that could be compressed. If your files are just too damn large, then you should worry about that first.

When I first ran Yslow, I was surprised by my grade: an F (55). I was expecting to score well; I was expecting Yslow to pat me on the back for my good code. Not so! It turned out I had plenty of room for improvement.

Probably no-one here can afford a decent CDN (I know I can’t). In practice, this means that your maximum score is limited to 90; so in order to get an A grade, everything else must be perfect. You may also be further limited by other practical constraints—in particular, your score can be crippled by ads. With this in mind, just try to get your score as high as you reasonably can. Remember that most websites, even large corporate ones, score an F (here’s a few: ibm.com, unilever.com, goldmansachs.com, bp.com). Even a C grade is an achievement to be proud of.

Let’s go through each performance rule. Here’s the website I was working on: The Badminton Bible

1. Make fewer HTTP requests

For this rule, Yslow separately counts your javascript files, CSS files, and CSS images; it deducts points when you have too many. The following are the maximum numbers you can have without losing any points:

• 2 stylesheets
• 3 javascript files
• 6 CSS background images

It’s important to note that Yslow does not deduct points for content images (<img>). This means that you could inflate your Yslow score by using <img> for decorative images! This would be a silly thing to do: the HTTP request is still there, even though Yslow doesn’t penalise you for it. However, this helps explain why some badly-coded sites get quite good Yslow scores.

The first two items were not a problem. I have one screen stylesheet and one print stylesheet; and I had three javascript files. I had around 30 CSS images, however.

I used Smartsprites to help make CSS sprites. This utility takes most of the work out of creating and positioning your CSS sprites. Unfortunately it’s a pain to install: you need to install and configure Apache Ant first.

Creating the CSS sprites was the single most time-consuming item on my Yslow shopping list—by far. It takes a fair amount of patience. I added them only a few images at a time, and checked the results. I found that, although Smartsprites did most of the work, I still needed to edit the new CSS occasionally: Smartsprites is not clever enough to do everything automatically. I also had to edit one of the sprites, just slightly, to remove a small blemish.

I divided my images into four sprites: two non-repeating, one vertically repeating, and one horizontally repeating. For instance, here’s one of my sprites (this link is guaranteed to go stale; note the version suffix, and see rule 3!).

Overall, this rule is quite important; but the CSS images part is definitely the hardest thing to implement. If you’re in a hurry or impatient, this is not the place to start!

2. Use a CDN

You’re having a laugh.

Good for Yahoo; absurdly expensive for me. I’ll pass, thanks, and dream of the day when I have enough money to throw some at Akamai.

For the uninitiated: CDN stands for “Content Delivery Network” (the D can also stand for “Distribution”). Instead of using only one server, your website resources are served from a whole network of servers spread across the globe. As well as reducing the distance between server and client, this helps you to spread resources across multiple hostnames and thereby increase parallel downloads. Yahoo recommends a minimum of 2 and a maximum of 4 hostnames (see rule 9). Needless to say, commercial CDNs cost more money than most website owners can afford. There are some free alternatives such as CoralCDN, but these don’t seem to provide the same service (they are intended more to guard you from bandwidth spikes than to speed up your pages).

If you can’t afford a proper CDN, then tinkering with a free one is probably a waste of time; you might even slow your website down. When Yahoo say, “Use a CDN”, they are not thinking of Coral. You can’t get everything for free.

Pages: 1 2 3