Sunday, April 15, 2007

How To: improve page load times

No one likes a site that takes 15 or 30 seconds to load. Most visitors won't wait past 15 seconds for a page to load, and that statistic is probably outdated and over-optimistic. If your website takes more than 10 seconds to load, there's a problem. But there's something you can do about it.

Style sheets are cool, but they hurt your page load time. You can't just get rid of them, so what are you going to do? The answer is to make the file size smaller and the loading method quicker.

Examine your own style sheet(s). Does it use attributes like "background-color" and "background-image"? If so, you're using long notation. There's valuable shortcuts out there that can help reduce the character count, in turn reducing file size. The short-hand notation for any background related tags is just "background". They can all be fit into that one attribute. For example:

body {
    background: #000 url('img/background.jpg') 0 100% no-repeat;

Notice how that combined background color, position, image, and repeat all into one. I even abbreviated the color. Instead of writing out #000000 or #FFFFFF, only three characters have to be used. Each digit of the three-letter code is duplicated, so that something like #abc is actually #aabbcc. This is an effective way of reducing characters, and it looks better anyways. The only time you have to use the long version is if the "pairs" of letter or numbers are different (ex. #e15a00).

There is plenty more you can do, just search the web.