Performance Optimization of ASP.NET Applications on Client-side

Introduction

With the advent of new web applications with rich user interface, there is a lot of processing on the client side. Most of this processing is done using scripting languages like JavaScript, etc. Lot of new frameworks are in the market ranging from the ones doing simple manipulation of DOM to the most complex of templates for data and charts. Not only web 2.0 applications like Facebook, myspace are using this technology extensively, but line of business applications are also moving towards this model. Ajax technology provides users with a whole new experience which is very close to desktop applications.

New browsers are concentrating on this model as well with the introduction of new faster JavaScript engines. Chrome’s interface is done in a way that gives the impression of a stand-alone application running on top of desktop instead of an application opened in a browser.

This new model has given rise to many challenges in terms of performance of web applications. Client side frameworks and other resources like custom JavaScript files, style sheets, images, etc. are downloaded on the browser and if not managed properly, can really affect the performance of an application.

This article is more oriented towards how to improve performance of ASP.NET Ajax applications on the client side.

Following is a list of guidelines to consider for improving performance of an application:

• Make fewer HTTP requests
  • Combine files
  • Use CSS sprites and image maps
• Reduce file size
  • Minify files
  • Compress files
• Add expiration headers
• Put CSS files on top and JS files at the bottom

An exhaustive list of these best practices can be found on Yahoo’s developer website.

Make Fewer HTTP Requests

With rich user interface sites, lot of files are downloaded on the client side. These files include JavaScript files, style sheets, images, flash, pages, etc. HTTP protocol does a separate request for each file downloaded on the client side which can really slow down the loading of a page depending on number of files and network latency.

Frameworks like jquery and its plug-ins, Ajax toolkit, telerik, etc. add their own resources as well. So reducing the number of these files is very important and can radically change the performance of an application.

Following are a few techniques to reduce the number of HTTP requests.

Combine Files

Custom Files

• Have a script/program which automatically take resources and combine them into one or more files during deployment.
• Reduce the number of files and merge them into a single file manually. Normally we create more files for modular purposes so this is not really a best practice to.
• Combine files at run-time and put them in a cache. It could be done by using HTTP handlers. For example, you can dynamically create separate files for all JavaScripts and stylesheets and add them in application cache which would be used for subsequent requests.
  Following is an ASP.NET handler used for this purpose. You can use it as a base code and then add/modify code to match your needs.
• HttpCombiner - combine, compress and cache multiple CSS, JavaScript or URL

There are a few important points to consider using these methods. 

• The URLs of images, etc. in CSS files should be relative to root directory otherwise the links will be broken in the combined file.
• If you are using ASP.NET themes to handle skinning even if you combine your files the framework will still add all the CSS files under theme directory in the header of every page. To avoid this, you can manually delete CSS files added by the framework and replace them with the combined file.
• For JavaScript files, you can also use composite script feature of .NET 3.5 SP1. There is however a limitation in it that you cannot use more than a certain number of files. A stop-gap solution is to use multiple scriptmanagerproxy controls with composite controls but this way you will have multiple combined files downloaded on the client side instead of one.
  
  

  <asp:ScriptManager ID="ScriptManager1" runat="server" >
  <CompositeScript ScriptMode="Release">
  <Scripts>
  <asp:ScriptReference name="" assembly=""/>
  <asp:ScriptReference Path="~/js/Validations.js" />
  </Scripts>
  </CompositeScript>
  </asp:ScriptManager>

Framework Files

Frameworks like Telerik, Ajax toolkit, etc. have their own embedded resources which are downloaded on the client side. To disable it and rather use the combined files, these frameworks do let you configure the default behaviour. For example for telerik you can disable the embedded resources on control or application basis and then combine them either by using CompositeScript of script manager or another method discussed above.

Css Sprites and Image Maps

To further reduce the number of files downloaded on the client, instead of having multiple image files, they can be combined in one file and then with CSS background-image and background-position properties, a segment of this file can be used to display a particular image.

Reduce File Size

Minify Files

To reduce the file size, one important thing to do is to remove comments, spaces, line breaks etc. from files sent to a client. There exist a number of solutions to minify files like JSMin, Yahoo, etc. In CodePlex, there is an open source .NET project which uses Yahoo YUI compressor to minify files.

In case files are combined using a handler in the same handler you can call this library to minify the combined file.

Compress Files

Compression can be done either on the code or IIS level. Files combined using HTTP handler can be compressed in the code and enabled or disabled based on certain criteria like browser support, etc.

To enable compression on IIS, follow these guidelines.

• Customizing the File Types IIS Compresses (IIS 6.0)
• Enabling HTTP Compression in IIS 6.0

Put CSS Files on Top and JS Files at the Bottom

To reduce the delay between the time a user requests a page and the time when something is displayed, the best practice is to add CSS files in the header on the top and JS files at the bottom. This way, the page would start displaying as soon as the CSS files are downloaded on the client side and won't wait for the JavaScript files which could be loaded in the end once the page is fully loaded and client could interact with it.

ScriptManager also has a parameter LoadScriptsBeforeUI which can be used for this purpose.

Add Expiration Headers

Another important thing to configure is activating browser cache for resources like images, JavaScript, stylesheets, etc. For static components, you can configure never expire as well. Adding these headers will not download cached files if they are already fetched on the client side, thus saving the number of requests.

• Using Content Expiration (IIS 6.0)

ASP.NET also provides certain techniques to configure cache for controls and pages.

• @ OutputCache

Tools

Number of tools exist to measure the performance of your pages on the client side.

• YSlow plug-in for Firefox
• Developer toolbar for Internet Explorer
• Fiddler

YSlow provides an in depth view to improve performance along with guidelines about how to achieve it.

Example

Following are some statistics of an ASP.NET web application before and after performance optimization using the above mentioned guidelines.

Yslow Stats Without Any Optimization

Yslow Stats With Optimization

Results

• Number of JavaScript files are reduced from 26 to 10.
• Number of style sheets are reduced from 8 to 1.
• Size of files is considerably reduced.
• With proper cache implementation, the total number of files downloaded on subsequent requests is reduced to 11.

Conclusion

If properly implemented, these guidelines can drastically improve the performance of an application. Lot of effort is put on the server side for this purpose but even a small percentage of it spent on client side can take performance to the next level.

History

• 17^th December, 2008: Initial post