October 30th, 2009

Speeding Up Your Website in 5 Minutes (CSS Sprites) by Selwin Ong

In the first article of our website optimization series we discussed about the importance of reducing page load times by compressing text based files served by our website.

I would like to once again stress the importance of building a highly optimized website, this time by highlighting some facts presented in the Velocity 2009 performance & scalability conference. In this conference Shopzilla, an online price comparison website shared their findings that increasing their page load times from 4-6 seconds to 1.5 seconds increased their conversion rate from 7 to 12%!

Reduced page load time leads to increased revenue and page views

Image courtesy of artzstudio

If in the first article we showed you how to reduce page load time by decreasing the number of bytes needed to be moved across the network, now we will tackle this issue from a different angle – reducing the number of items that need to be loaded. Each element in a web page (image, icons, external JavaScript and CSS files) represents a request that needs to be served by the server. The less items that need to be served, the faster the load time, plain and simple.

A popular technique to minimize the number of server requests is called Pingdom’s website testing tool that shows how quickly a page loads.

The first page (with CSS sprites) is rendered in 0.9 seconds, while the second page (regular icons) is rendered in 2.4 seconds – quite a big difference! Furthermore, if we look closely, the image sprite is only 4.96 KB big, while the total size of 8 different icons is 9.72 KB so not only CSS sprites reduce the number of HTTP requests, but it also reduces the aggregate file size.

Using this technique is really easy:
1. Visit css-sprit.es
2. Upload the images you want to combine
3. After you’re done uploading the images press on the “Create CSS Sprite” button
4. Download the resultant image sprite and CSS codes
5. Paste it into your HTML code

Aside from increasing website performance, you could also use techniques that combine JavaScript animation with CSS sprites to make attractive navigation menus. Smashing Magazine has this excellent write up about CSS sprites that you might want to read.

Copyright © 2020 User Inspired Technology Services.