Sneak Peak: CSS Sprites Make Your Websites Faster

Let’s get right to the good news. The CSS Sprites technique has been added to some of the major ASP.NET controls in the DXperience 2009 volume 3 release!

The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one.

Using the CSS Sprite technique has the effect of reducing the amount of requests sent to the web server: one big image requested instead of many many small images. And less requests on your web server means 2 things:

1. There’s less to send over the wire.
2. Pages load faster!

How fast?

We tested the performance using the 512kps speed settings in Fiddler. Just to be sure that we’re targeting a common speed that users might have if their visiting your website from home.

The result? If one of the ASP.NET controls contains a lot of images, for example the ASPxHtmlEditor, then the CSS Sprites approach gives you a staggering improvement of about 1.5 to 2 times for a page with the ASPxHtmlEditor.

Your Feedback Is Appreciated

This post has a lot of information to digest so fire away if you've got more questions.

References:

[1] CSS Sprites: What They Are, Why They’re Cool, and How To Use Them by Chris Coyier

Free DevExpress Products - Get Your Copy Today