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%!
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