Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

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/

Published Oct 29 2009, 12:45 PM by
Bookmark and Share

Comments

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.

October 29, 2009 4:27 PM

Brien King

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

October 29, 2009 4:46 PM

Tom

Great :)

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

October 29, 2009 5:12 PM

DotNetBurner - ASP.net

DotNetBurner - burning hot .net content

October 29, 2009 5:26 PM

Mehul Harry (DevExpress)

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.

October 29, 2009 5:28 PM

Mehul Harry (DevExpress)

Tom,

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

October 29, 2009 5:29 PM

Greg Caiazzo

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.

October 29, 2009 6:43 PM

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?

October 29, 2009 7:10 PM

Christopher D. Todd

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!

October 29, 2009 7:58 PM

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.

October 29, 2009 10:46 PM

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

October 30, 2009 1:53 AM

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

October 30, 2009 7:44 AM

Julio Delgado_1

Hi Guys,

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

Thanks

October 30, 2009 8:43 AM

Mehul Harry (DevExpress)

@Peter and @Christopher

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

October 30, 2009 1:20 PM

Mehul Harry (DevExpress)

@ccchai,

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

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

October 30, 2009 1:21 PM

Heather

October 30, 2009 1:22 PM

Mehul Harry (DevExpress)

@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 :)

October 30, 2009 1:27 PM

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.

October 30, 2009 5:39 PM

CA Team Member

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 :))

October 31, 2009 3:36 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners