Scarf*oo

On one hand you have a carefully written fast web site and on the other one, well, you have another carefully written web site that isn’t quite as performant - but why is it so?

The answer doesn’t lie in your web site’s size, but in the number of elements on your site, and consequentially the number of requests to the server to fetch those elements. Surely, you should always be careful to cut down image size, choose the appropriate image format, produce clean and nice (x)html and couple it with CSS, but as experienced web developers we already know that, right? Right?

Let us now look at some ways to cut down server requests to speed-up our web site.

1. CSS sprites

A common way to speed up your web site (by reducing the number of images needed to be fetched from the server) is to group related images into a single big image and use the CSS background-position property to set a “window” - or “mask” if you prefer - on a particular part of the large image.
This technique is well documented, so you should have no problems implementing it. Visit Dave Shea’s article on CSS Sprites if you want a thorough view on the subject.

2. Larger images, smaller number

Decreasing image count is always a good thing, so try to have fewer of them for the sake of their size. You should carefully consider how to achieve this early enough - when cutting them out of your photoshop design, for example would be ideal.

3. More CSS, less background images

Try a solid background-color instead of a background-image whenever possible. If your design isn’t overly graphical or heavy on the gradients, you can get away with very few background images. Having many solid lines for section boundaries and such? Instead of heavy images, use CSS borders.

4. Prefer size over quantity of linked files

Although style sheets, javascript files, etc. are cached by the browser, they still get a request to the server - asking for an updated version of the file - each time your browser reloads. This leads us to the idea that fewer linked files means fewer update checks - It’s true.

Conclusion

The fact is that something so simple as file count gets little attention nowadays, but remember that as fast as the internet gets, latency will always be a problem, and that is why we should do our best to keep the file count down - the surfers will be glad we did.