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!

You might be asking yourself, what is a CSS Sprite? It’s a CSS technique to combine several smaller images into one image and gain performance. As web design guru, Chris Coyier [1] puts it:

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.

Table 1: 9.2 vs 9.3 Performance of CSS Sprites in 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

 

DXperience? What's That?

DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

heather

great stuff...let's have it...bring it on.

These continued performance enhancements to the DX experience really bring about real world improvements.  Vol 2 had some nice speed enhancemnts and I can't wait for v3.

29 October, 2009

This is a good thing, however, I would be more interested in stats on the more common controls like the ASPxGridView, ASPxRoundPanel, etc...

29 October, 2009
Tom

Great :)

You should really add some nifty features to ASP controls. You are loosing battle with competitor :S and I love your products.

29 October, 2009

DotNetBurner - burning hot .net content

29 October, 2009

Thanks Heather!

Brien, Once the 9.3 beta is out then you'll be able to see and measure the controls. The controls with the most images are the ones that will benefit the most. The ASPxHtmlEditor is one of these.

29 October, 2009

Tom,

Thanks for your support. Please let me know what features you'd like to see added. Email me mharry at DevExpress.

29 October, 2009

Ive been waiting for this and other tweaks, as I use Devexpress controls extensively in some large apps and have had to do as much tweaking on my own, but without the real ability to get down and dirty and replace all the existing css/images to introduce sprites myself... So a BIG THANK YOU.

29 October, 2009
Drew Stainton

Will this affect the way custom themes are created and used?  Is the large "sprite" image created dynamically on the server or is it a pre-built part of the theme?

29 October, 2009

Where is the new site? I was hoping to see all of the new speed boosting technology on your main site. :(

Anyways, I'm always happy to see new stuff come out of DX! Keep up the good work and blog more! I frequent the site at least  3-4 times a day looking for something new!

29 October, 2009
Peter Thorpe

@Christoper - I'm keeping a look out for the new site too was blogged about ages ago now.

Keep up the good work DevExpress i've been very impressed with the speed improvements you have made to your asp.net controls over the past year and am amazed you are still pulling out such large improvements.

29 October, 2009
ccchai

Although perf improvement is a good thing, but I am still waiting for asp.net layout control like the one in winforms and silverlight

30 October, 2009
Rinaldo

Great news... I hope this process will be well documented on the help files of the versions to come.

Can we wait for more new CSS features?

Thanks,

Rinaldo

30 October, 2009

Hi Guys,

In a little different topic, do you guys have a CSS book that you will recommend.

Thanks

30 October, 2009

@Peter and @Christopher

The new site is in the final stages of review. Probably a few more weeks before it goes live. And thanks!

30 October, 2009

@ccchai,

The upcoming ASPxSplitter in v9.3 will help you with layout:

community.devexpress.com/.../sneak-peek-asp-net-splitter-control.aspx

30 October, 2009
Heather
30 October, 2009

@Rinaldo,

The good news is that you don't need to do anything in order to get the performance benefits of our CSS sprites. As for new CSS features, if you have a suggestion then please let us know. Thanks.

@Julio,

Check out the suggestions here:

community.devexpress.com/.../sneak-peek-asp-net-splitter-control.aspx

And let me know which one you end up getting and if it's worth it. Thanks :)

30 October, 2009
Junior Thurler

Mehul, one of the major difficult in working with ASP.NET is with layout of the components, when I drop the components in the form and I don´t have control over the position of the controls and in most times I have to "accept" the position and size of buttons, textbox because I don´t know how to control this problem. I´ve tried working with colums but doesn´t works. Is CSS the solution to my problems ? And if yes, could you suggest books for help me ?

Thanks and congratulations of the excelent quality of the components. I´m a customer since 1999 and I´m very satisfy with you comps.

30 October, 2009

Very cool.... :)))))

I submitted this suggestion to XAF some time ago and it appears this was considered after all, although on a more  basic layer :))

31 October, 2009

Please login or register to post comments.