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
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.
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
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.
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.
Put CSS Files on Top and JS Files at the Bottom
ScriptManager also has a parameter
LoadScriptsBeforeUI which can be used for this purpose.
Add Expiration Headers
ASP.NET also provides certain techniques to configure cache for controls and pages.
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
YSlow provides an in depth view to improve performance along with guidelines about how to achieve it.
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
- 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.
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.
- 17th December, 2008: Initial post