Hey folks! This ones for those speed freaks who are never satisfied with their page load times. This is for good reason. Page load time could mean the difference between a conversion and a lost visitor.
Why?
There are many, many things you can do to improve site performance. Today I’ll explain CSS sprites and why they can help with performance. The goal of using CSS sprites is to minimize the number of HTTP requests. Each HTTP requests has overhead – the browser has to send a request to your web server and then the web server has to respond with an answer (which could include an image, css file, etc). So minimize the amount of HTTP requests and you speed up your page.
What’s a CSS Sprite?
What the heck is this CSS sprite thing that I’m talking about? Well you know all those little background images that you put on your webpage via CSS? They may be round corners, gradients, icons, etc. Well each of those comes with the price of HTTP requests. Using CSS sprites is essentially a technique of combining some of those background images into one image (called the sprite) to minimize the number of HTTP requests.
How?
Luckily there is a tool that makes generating this CSS sprite super easy: SpriteMe. It was created by Steve Sounders, a performance guru. Once you create your CSS Sprite, use it in your CSS by utilizing background-position. Using background-position, you can adjust which part of the CSS Sprite shows up, allowing you to reuse the CSS Sprite throughout your page. On a recent project I was involved with, we reduced the number of HTTP requests by 13!
Interested in more performance tips? Feel free to check out the Yahoo Developer Network, they have some great advice on this subject.
George Gonzalez
Ray Dollete
dpchoung
