Optimizing UI response'ness with JS and CSS combining

Topics: Feature requests, General
Oct 30, 2010 at 12:26 PM

Requests are slow! Its not the bandwidth we're struggling with anymore, but latency and any request takes time and is contributing to the overall lagging experience the user might have by using a webpage.

Ideally any given page would only have to make a single request for respectively css and js. The content of these should be minified and compressed but thats actually less important than minimizing the number of requests made by the browser. Its also less important to make sure you ONLY serve the actual css or js that the current page needs than minimizing the number of requests.

I've been working with this practice for some years now and i've solved it by analyzing and putting all my pages into a number of different categories. For each category i define a set of css and js files they need and i then make sure just to load one css and one js file that fits the category my page is in.

As a sidenote you should use .ashx handlers instead of .aspx for serving the scripts and css on the server. It takes less resources for the asp.net runtime to instantiate whatever class that implements IHttpHandler than creating a full Page-object.

Oct 30, 2010 at 7:03 PM

We're already using that technique. At the moment when you're starting C1 console, by pressing "Shift" in the login screen, you can choose between

a) "Normal" mode - the majority of js and css files are "compiled" to files "/Composite/scripts/compressed/*.js" and "/Composite/skins/skin_compiled.css"

b) "Debug" mode - all js and css files are loaded in a normal way so it is easy to debug js, and find right css file to fix

 

Of course, we haven't gone "all the way" and some js/css files are not included into compilation, but it isn't as important because the time taken for executing those requests is much smaller than the time that IE/FireFox spent for JavaScript execution and DOM rendering. The best way to see this is to see how quick C1 console works on Chrome, we did it on an internal build it is much, much faster.

 

>> As a sidenote you should use .ashx handlers instead of .aspx for serving the scripts and css on the server. It takes less resources for the asp.net runtime to instantiate whatever class that implements IHttpHandler than creating a full Page-object.

aspx -> ashx - good point!