Asp.net page Performance Improvement

ASP.NET Website Performance Improvement

In this article I will be explaining some quick, easy and must use Asp.net website Performance Improvement tips.

Asp.net Performance Improvement checklist is divided into 4 broad categories:

1.  Identifying which part of asp.net web application requires optimization.
2. Optimizing Asp.net web project to improve website performance
3. Tips for writing codes in order to enhance performance.
4. Database Optimization to improve performance (I will be explaining with regards to SQL Server but the same tips also apply to MySQL, Oracle or any other DB by changing syntactical meaning respectively.)

I will be discussing each asp.net performance improvement categories in detail.
Identifying which part of asp.net web application requires optimization
It is very important to identify which part of your application requires more attention in order to improve website performance.
1.      Using VS.Net 2010 Profiler
2.      Tracing asp.net web application
3.      Extension (Firefox Firebug, YSlow, Google Chrome Speed Tracer, IE9 Developer Tools)
4.      Monitoring tools like fiddler is also helpful.
Optimizing Asp.net web project to improve website performance
In order to improve asp.net web page performance, the most important aspect to consider is

• Reducing asp.net page size - By reducing the page size it will get downloaded quickly and thus load quickly on the user's browser.  It will also reduce the bandwidth consumption of the website.  
• Reduce number of HTTP requests -  It is very important to reduce the  number of HTTP requests on your server, it will help in reducing the server load and allowing more visitors to access your website.
• Avoid round trip to server. 

In order to reduce asp.net page size
Avoid viewstate
Viewstate is used to maintain data of the web page on page postback. This increases page size.  I always prefer to turn off viewstate at page level and only turn on viewstate to specific control whose data I need to persist over page postback.
You can do so by <%@ Page  EnableViewState="false" %>
Situation in which you must avoid viewstate.

• Only page which takes user input or control whose values you want to persist on page postback will require viewstate.  Example: If the user clicks on the submit button and if there are errors on the page you should persist user input, therefore in that case you should make EnableViewState="true" for those control or may be at page level.
• Display pages or asp.net page that does not require page postback.  Example: Page on which you want to display the customer’s information in the datagrid, does not require viewstate therefore in this situation you can turn off viewstate.

Use div instead of table
Make use of div and css to replace table.  Combination of div and css is much faster than table.
Avoid big name for asp.net server control and CSS class tag
Do not give big name for ID fields of asp.net server control, especially to Content Place Holder asp.net server control in master page.  Content Place Holder ID name is appended to each asp.net server control inside the child page, so if you choose a big name for your asp.net server control, it will increase html file size.
Similarly if you choose a big name for CSS class tag, it will have long names and on every instance you make you need to use that class tag and in return this will increase the html size.
For this reason, I prefer to choose very short names for any control or css tag definition.
Example: <asp:ContentPlaceHolder ID="CC" runat="server">
Remove unnecessary white space (Compress generated HTML Size)

• Remove white spaces between tags and lines of html render by asp.net pages.  In order to remove white spaces dynamically on all pages, you should put "render" method inside the master page class file.
• Remove unused tags from CSS file and also remove unused script from Javascript file.
• Remove white spaces from CSS file while deploying on production server. Remember that comments and whitespace inside your CSS and Javascript file are not required for execution; removing them will speed up css rendering time and script execution time.  You can add this step to your deployment checklist. You can take advantage of online compress css tool and online javascript compress tool.

Make use of JQuery instead of Ajax Control toolkit. 
I have observed that JQuery can do the task with less code and light weight, while Ajax control toolkit is bulkier and increases page size.
Reduce number of HTTP request
With the help of Firebug, Firefox extension, you can find out how many resource requests are made by your asp.net web page.  It is very important to reduce the number of HTTP requests on your server; it will help in reducing the server load and allow more visitors to access your website.
1.      Make minimum use of Images.  Images are good for UI but can increase the size of the  web page and lead to too many http request.
2.     Combine multiple db request into single db request.  Find more details on How to avoid multiple database request to improve performance. 
3.     Combine 2 or more css file into 1 file, since most of modern browser do cache css file, it will take some more time for 1st request, but the other subsequent requests will be fast.  Combining multiple css file into 1 will reduce number of http request.
You can use minifier tools as well to give a boost to performance of application.
4.     Combine 2 or more javascript file into 1 file, since most modern browsers do cache javascript file, it takes some time for 1st request, but the other subsequent requests will be fast.  Combining multiple javascript file into one will reduce the number of http request.
You can use minifier tools as well to give a boost to performance of application.
5.      Special tips if your web application is using JQuery

• Try to use Jquery from CDN (Content distribution network) link for google CDN http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
• While adding JQuery try using min version (Example: jquery-1.6.2.min.js), which is of less file size, since space and line breaks are removed from that.  This will help in faster loading of file and also improves performance of web application.
• Avoid too many third party jquery controls, rather make use of JQuery UI, which supports too many control within one js file.

Avoid round trip to server
In order to give users a lightning fast effect, it is important that you avoid round trip to server.  You can use:

• Caching
• JQuery Ajax