14 September 2010

One way to reduce HTTP requests

CSS Data URI's are a way to encode images directly into CSS.  This helps to reduce the number of HTTP requests on your server.  For example:  Instead of linking to an external resource like a background image, your CSS can have the image available within it.  As soon as the CSS is loaded the browser is ready to render the image.

This can have real speed advantages, especially if the browser is configured to limit the number of connections to a host.  By freeing up a connection you can improve your rendering time.

Another advantage is that if you are serving across a secure connection then all of your page elements can originate from the same, secure site, and not generate those annoying warnings to your visitors that some elements are not secure.

More information on CSS data URI is available at http://en.wikipedia.org/wiki/Data_URI_scheme

Spritebaker (http://http://www.spritebaker.com/) offers a free web-service.  They will take your CSS and parse it for content, then return to you the newly encoded CSS file.

Of course the size of your CSS will increase because it now contains extra data.  Implementing server side compression can help reduce the impact of this bloat.  Spritebaker offers some advice on enabling mod_gzip on Apache and this tutorial is useful background reading.

And if you're using IIS then you don't need to worry about compression.  People should buy faster computers and get more expensive internet connections to support your Microsoft habit. 
Tip