CSS Sprites and SpriteMe

Was on the phone checking over some HTML templates this afternoon (that’s right, I test my HTML templates on an old analog “round dial” phone, then IE6), and happened to click on the Firefox YSlow extension, for no particular reason.
This excellent tool breaks down your page and list recommendation for improving load speed – along with some very informative pointers.

One of the more interesting suggestions was to use CSS Sprites, which I personally had no clue about. For a really good introduction and discussion of these check this page: http://css-tricks.com/css-sprites/ – however just to cover the basics:

If you have loads of (non-repeated) background images in your page, each single image (and other external resources) of course requires the browser to perform a HTTP GET, that is open an connection and request a resource from your server. To make matters worse most browsers will only download between 2 and 4 external resources (images, CSS, js) in parallel per domain, so that means you literally have these forming a little queue, politely waiting for things ahead of them to finish before joining in.
You can see this behaviour by using the NET panel of the Firebug extension, after the main page load you tend to get a staggered list of resources being loaded in chunks (thou at least in Firefox it looks like more than 4 at a time to me, but it’s a valid point nonetheless).

So the idea with Sprites is one big image conmtaining all your background images – and then you use CSS to set the position of the background on your various HTML elements.
Some people have pointed out that this adds some complexity to your development – when adding new images you have to drop them into your big Sprite image and then re-export and figure out the exact pixel position etc.
However a very nifty tool called SpriteMe takes a lot of the hassle out of this. Build your page exactly as normal, then go on here, accept (and even tweak) the suggestions for “Spritable” candidates, and then you can not only download a dynamically generated Sprite – but also the CSS you will need to replace…. and it’s a free service! Amazing – enjoy it while it lasts.

A related issue to this is “Javascript Blocking” – caused by the fact that browsers only load one single Javascript file at a time – however you can inject javascript src files using document write to get round this – more on this here: https://blogbustingbeats.wordpress.com/2011/01/04/javascript-blocking-loading-js-dynamically/

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: