Posts Tagged ‘Performance’

Howto Optimize Rendering Speed of ASP.NET Ajax Websites

Monday, April 14th, 2008

A common case for most ASP.NET sites is slow frontend rendering due to many Javascripts. The typical requests graph looks like this:

ASP.NET Rendering Graph

All these AXD files are embedded Web Resources usually Javascripts and sometimes CSSs. The bad news about having many embedded Javascripts are:

  1. Many HTTP Requests (meaning generating more load to the web server)
  2. Poor rendering time because when the browser starts downloading a Javascript file it stops downloading(rendering) everything else (easily seen on the graph)
  3. Less chance for caching any of those files
  4. If HTTP compression is enabled in the IIS many files mean more load and worse compression ratio than one merged file.

The most common scenario for having many embedded Javascripts is either using AJAX or some commercial .NET controls.

The solution for merging AJAX AXDs in a single file is described in those two great posts:

Script combining made easy [Overview of the AJAX Control Toolkit’s ToolkitScriptManager]

and

Script combining made better [Overview of improvements to the AJAX Control Toolkit’s ToolkitScriptManager]

The recapitulation when with a friend of mine (Julian) tested out this technique was reducing the loading time with about 2 seconds on a quite clean and well build site. Also the better HTTP compression reduced the size a bit.

If you are using ComponentArt’s Web.UI version 2007.2 or later controls there is solution posted on their blogs too:

Optimizing Web.UI Client Script Deployment

And couple more general advices:

  1. If it depends on you merge all your Javascript and CSS files
  2. Load CSS at most top of you page
  3. Load Javascripts at most bottom of your page (if possible)
  4. Minify both Javascripts and CSSs
  5. Be smart 🙂

Update: Stefan Dobrev sent me a link for moving the AJAX Javascripts to the bottom (point 3 of the list above) which should improve rendering time too. Thanks Stefan

Dojo vs JQuery vs MooTools vs Prototype Performance Comparison

Sunday, February 24th, 2008

Updated: MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revised

As part of my Mootools lecture at Codecamp I showed a brief speed comparison between the most used Javascript Frameworks running in the major browsers. Now as the Mootools team has extended their performance test tool (slickspeed) it is time to revise my benchmarks and extend them over more browser/platforms.

Test results (Lower is better):

Speed Comparsion Graph

*For example FF (XP-NA) is Firefox 2.0.0.12 with no addons (extensions) enabled running under Windows XP

You can check the actual numbers (in ms) and the full browsers information in the table bellow:

Dojo 1.0.2 JQuery 1.2.3 MooTools 1.2beta2 Prototype 1.6.0.2
Mozilla Firefox 2.0.0.12 – no addons – winxp 128 266 115 259
Mozilla Firefox 2.0.0.12 – winxp 144 290 127 260
Mozilla Firefox 2.0.0.12 – linux 253 438 255 384
Opera 9.26 – winxp 32 136 148 194
Opera 9.26 – linux 110 188 238 364
Internet Explorer 7 – no addons – winxp 263 330 662 1563
Internet Explorer 7 – winxp 264 334 674 1583
Internet Explorer 6 387 600 945 2279
Internet Explorer 6 – linux (wine) 692 978 1310 2616
Safari 3.0.4 Beta 3 – winxp 36 76 84 116
Konqueror – linux 324 450 X X

Conclusions:

  • Safari under Windows XP is really blazing fast
  • Mootools and Prototype JS do not work under Konqueror (KDE’s default browser)
  • Dojo performs great. If we take only these test into consideration it safe to say it is the fastest Javascript Framework
  • Linux browsers are relatively slower against their Windows versions
  • Prototype is insanly slow under Internet Explorer

Disclaimer: This benchmark is somehow subjective because the test results depend on the current OS load and other factors. If you have any corrections or comments on this topic I will gladly review them and will revise the results if needed.