Optimizing load times …

1 Oct
2007

I’m not one to drop links, but for anyone on the bleeding edge of speed, you should look into CSS sprites.

The basic concept is simple – when you visit a webpage, multiple items are downloaded at the same time. But multiple does not mean all. In the case of 20 images, you could be loading 4 at a time.

The problem lies that a lot of the ‘overhead’ cost of downloading images is in the connection time. So every time an individual image is requested, a new connection is initiated (yes I know HTTP 1.0 vs 1.1, I am simplifying here).

So the solution is to bunch multiple small images into one larger image, and then use CSS to position show only the part of that image you want where you want it.

Unfortunately we don’t do this often enough ourselves, but it can make for an interesting improvement. A big user? Yahoo!’s front page.

2 Responses to Optimizing load times …

Avatar

imjuk

October 2nd, 2007 at 10:57 am

I just went and had a look at the stuff on a listapart – it just blew my mind – am away to hack together some images and sit and get this technique off pat – will make some stuff I was trying before so much simpler.
thanks
Michael

Avatar

Speed is everywhere … - Tech Soapbox

January 31st, 2008 at 5:14 pm

[...] wring out as much performance as you possibly can. I’ve talked about this in the context of CSS sprites (great for speed [...]

top