mostlylucid

STATIC ARCHIVE of mostlylucid.co.uk of old
posts - 892, comments - 676, trackbacks - 11

My Links

News

follow me on twitter!

Archives

Post Categories

Misc. Coding

Premature optimization and user perception...my pet project and CSS Sprites

One of the themes I'm looking at for vNext of ASP.NET is the optimization of sites by reducing the number of server requests required for a single page.
A new classic in the area of improving the perceived performance of your sites by reducing the number of server roundtrips is Steven Sounders book 'High Performance Websites'. Steven's book is very small, very readable and probably the best book on anything to do with the web that I've read in years.
This book was a huge revelation for me...I spent most of my coding career writing the slickest, highest performing code I could...and frankly thinking about the structure of the actualy pages the user sees would've been a better use of my time in a lot of cases. As an example,, this was one of the last sites which I worked on as a full time developer...the code is about the best I ever created, the DB is optimized up the wazoo and I very nearly killed myself trying to make it 'perfect'...but for the hundreds of hours I spent sweating blood over the code you could now spend a couple of thousand dollars on a faster server and improve the performance even more...(even ignoring the fact that it's HUGELY overengineered...even has it's own MVC system and templating feature...hey, I was bored!)
As servers get faster and programming frameworks get more efficient, the amount of time your web server actually spends processing a page, doing a DB request and whatever else it has to do to generate HTML gets smaller and smaller; with better use of caching, AJAX and other techniques it's likely that you page actually returns it's total content to the user in milliseconds.... You can really only make minimal gains to 'preceived performance' in your sites by optimizing the dynamic code in your web application these days...(and this will likely only reduce over time)

Welcome to Moore's law

The fact is that for 99% of web pages the issue is no longer really about optimizing the amount of time your page takes to return HTML content to the user...it's what happens afterwards which leads to poor download performance.

The Problem

Websites nowadays have more and more separate elements in a single webpage, images, css, js files, flash content, videos etc...often the number of requests sent from single page can take MANY (as in several orders of magnitude) times longer than the bit we developers commonly fret about. As an example a few seconds ago I requested the CNN homepage, the actual page of HTML content loaded in 222ms, but the OTHER 153 requests for the rest of the stuff the page needed took a total of 4.65s.
One way to avoid a large number of these other requests is to combine requests for multiple objects together. In ASP.NET 3.5 SP1 we'll be shipping a feature called 'ASP.NET AJAX Script Combining', as the name suggests this feature combines multiple HTTP requests (in this case for the ASP.NET AJAX scripts) into a single request, potentially greatly reducing the number of roundtrips to the server.

Where is this going?

Well, a feature I've been playing with (and which I'm considering for ASP.NET vNext) is an ASP.NET CSS Sprite Control. Zack Owens has already posted about a technique for doing this in ASP.NET, but I wanted to increase the usability of generating these sprites; think using an ASP.NET image control and them magically being combined and output as part of a Sprite...
For those who don't know, CSS Sprites are essentially a technique which involves combining multiple images into one and using CSS to specify which one to show when they download. With this technique you both reduce the number of server requests as well as 'pre-loading' images on the fly (when's the last time you had an image rollover which seemed to stutter as it loaded the next image?).
Anyway, that's the idea; below is a some ASP.NET markup I'm playing with...this would resuly in a single PNG image being generated, along with a CSS definition for the sprite and for each 'image' to be displayed in the page.
This is still very much a work in progress and there's a ton of challenges around persisting the generated image in a scalable way etc...But well, I've been quiet of late so I thought I'd let you know what I'm playing with these days...

<html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<title></title>
<cs:SpriteManager runat="server" GroupName="DEFAULTGROUP" ImageFormat="png"></cs:SpriteManager>
</
head>
<
body>
<form id="form1" runat="server">
<cs:Sprite ID="Sprite" ReferenceId="Clock" runat="server" ImageUrl="~/icons/Clock.ico"/>
<cs:Sprite ID="Sprite1" ReferenceId="Contacts" runat="server" ImageUrl="~/icons/contacts 1.ico"/>
<cs:Sprite ID="Sprite2" ReferenceId="Alerts" runat="server" ImageUrl="~/icons/alerts.ico" />
<cs:
Sprite ID="Sprite3" ReferenceId="Download" runat="server" ImageUrl="~/icons/download.ico"/>
<cs:Sprite ID="Sprite4" ReferenceId="Desktop" runat="server" ImageUrl="~/icons/desktop.ico" />
</form>
</
body>
</
html>
 

 

 

 

Print | posted on Friday, July 11, 2008 7:54 PM | Filed Under [ .NET ASP.NET Code Snippets ]

Feedback

# re: Premature optimization and user perception...my pet project and CSS Sprites

Cool stuff. Going to have to try the css sprite thing soon.
7/21/2008 11:26 PM | Mehul Harry

Post Comment

Title  
Name  
Email
Url
Comment   
Please add 1 and 4 and type the answer here:

Powered by: