- Deepali More
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:
Identifying which part of asp.net web application requires optimization.
Optimizing Asp.net web project to improve website performance
Tips for writing codes in order to enhance performance.
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:
