A common case for most ASP.NET sites is slow frontend rendering due to many Javascripts. The typical requests graph looks like this:
All these AXD files are embedded Web Resources usually Javascripts and sometimes CSSs. The bad news about having many embedded Javascripts are:
- Many HTTP Requests (meaning generating more load to the web server)
- Poor rendering time because when the browser starts downloading a Javascript file it stops downloading(rendering) everything else (easily seen on the graph)
- Less chance for caching any of those files
- 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 DeploymentAnd couple more general advices:
- If it depends on you merge all your Javascript and CSS files
- Load CSS at most top of you page
- Load Javascripts at most bottom of your page (if possible)
- Minify both Javascripts and CSSs
- 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