Optimizing Asp.net web project to improve website performance.
In order to improve asp.net web page performance most important thing we should consider is
- Reduce asp.net page size - By reducing page size page it will get download quickly and thus load quickly on user's browser. It will also reduce bandwidth consumption of your website.
- Reduce number of HTTP request - It is very important to
reduce 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.
1) Avoid viewstate - viewstate is used to persist data of web
page on page postback. This increase 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 take user input or control whose values you want to
persist on page postback will require viewstate. Example: If user press
submit button and if there are error on page we should persist user
input, so in that case we should make EnableViewState="true" for those
control or may be at page level.
- Display pages or asp.net page which will not require page postback.
Example: Page on which you are displaying customers information in
datagrid, doesn't require viewstate so in this situation you can turn of
viewstate.
2) Use div instead of table. - Make use of div and css to replace table. Combination of div and css is much more faster than table.
3) Avoid big name for asp.net server control and CSS class tag - Do not give big name for ID field of asp.net server control, specially to ContentPlaceHolder asp.net server control in master page.
ContentPlaceHolder ID name is appended to each and every asp.net
server control inside 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
name on every instance you make use of that class tag and in return it
increase html size.
For this reason, I prefer to choose very short name for any controls or css tag definition.
Example: <asp:ContentPlaceHolder ID="CC" runat="server">
4) Remove unnecessary white space (Compress generated HTML Size)
- Remove white spaces between tags and lines of html render by asp.net page. In order to remove white space dynamically on all page, you should put "render" method inside 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 to production
server. Remember, Comments and whitespace inside your CSS and
Javascript file are not needed for execution; Removing them will speed
up css rendering time and script execution times. You can add this step
to your deployment checklist. You can take advantage of online compress css tool and online javascript compress tool.
5) 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 increase page size.
Find more on JQuery vs Ajax control toolkit.
Reduce number of HTTP request
With help of Firebug, Firefox extension, you can find out how many
resource request was made by your asp.net web page. It is very
important to reduce number of HTTP requests on your server, it will help
in reducing the server load and allowing more visitors to access your
website.
1) Make minimum use of Images. Images are good for UI but can increase size of web page and also results in 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 only take little more time for 1st
request, all sub subsequent request will be super fast. Combining
multiple css file into 1 will reduce number of http request.
4) Combine 2 or more javascript file into 1 file, since most of
modern browser do cache javascript file, it will only take little more
time for 1st request, all sub subsequent request will be super fast.
Combining multiple javascript file into 1 will reduce number of http
request.
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 less file size, since space and line
break 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 user a lightning fast effect, it is important that you avoid round trip to server. You can use:
Tips for writing code in order to enhance performance.
1 VS.Net 2010 Code Analysis
Database Optimizing tips to improve website performance.
1. Thumb rule decrease as many joins as possible. It will be very helpful in improving search query performance.
2. In order to avoid too many joins, make optimal use of "xml datatype".
That will help you to reduce needs of number of tables for small data
structure, also be helpful in storing complex data-type. (In summary, I
am in love of xml datatype, If you know correct way to use that, you
can optimize performance.)
3 Check out DB Optimization tricks
4 Use PL\SQL Programming instead of making too many DB Request.
One of the most resource efficient and performance improvement technique
is to make use of PL\SQL Programming inside stored procedure to avoid
round trip. But be careful with this technique if you don't know how to
use it efficiently, it may adversely affect performance.
Example: To Improve Performance through
The following are a few points that can
make a site scalable and reliable; but which may initially slow down
development. I believe that overall, when maintenance and future changes
are taken into account, total development time would be reduced.
1. Minimize HTTP based Requestss
Problem 1: Serving images - no matter if they are of less than 1 KB - as separate web resources, cause separate web requests to
the server, which impact performance.
Solutions:
- Use Image Maps
to merge up images, though image
Maps could only merge up those images which are in sequence, like
navigation images, so it depends upon your web site/page design.
- Use Inline images. Inline images could increase your HTML
page size but would cause fewer requests to the server.
- CSS Sprites can also be used to merge up images and setting
their position and backgrounds.
Problem 2: Using CSS is very good practice but serving stylesheets as separate resources, thus causing separate requests,
should be considered very carefully.
Solutions:
- Try your best to combine all your CSS based classes into a single .css file as lot of .css files will cause a large amount of
requests, regardless of the file sizes.
- .css files are normally cached by browsers, so a single and heavy .css file doesn’t cause a long wait on each page request.
- Inline .css classes could make HTML heavy, so again: go ahead with a single.css file.
Problem 3: JavaScript is an awesome scripting language
which can be quite powerful to play with. Nonetheless, it should be
used carefully not only for request size issues; but also because it can
have a way of causing unpredictable performance issues.
Solution: Inline JavaScript could make the HTML page heavy, so it’s preferred to serve separate .js files or a single
JavaScript file to keep all JavaScript-based scripts in a single place.
JavaScript files also get cached automatically by browsers, so
they usually aren’t requested each time the page is loaded by the browsers.
2. HTTP Compression
HTTP Compression
is used to compress contents from the web server. HTTP requests and
responses could be compressed, which can result in
great performance gains. Through HTTP compression, the size of the
payload can be reduced by about 50%, which is great. Isn’t it?
HTTP Compression is now widely supported by browsers and web servers.
If HTTP compression is enabled on the web server, and if
the request header includes an
Accept-Encoding: gzip, deflate
header, the browser supports gzip and deflate compression
mechanisms, so the response can be compressed in any of the given
formats by the web server in order to reduce the payload size. This
leads
to an increase in performance. Latter that compressed response is
decompressed by the browser and rendered normally.
Following are very
good links which detail HTTP Compression and their implementations:
- Click here to get detailed knowledge on
HTTP compression.
- Click here
to learn how to enable HTTP compression in IIS.
3. Correct Formatted Images at the Right Place
Problem: Normally designers use JPG or GIF formats quite randomly and ignore some other good formats to compress
images.
Solution: Correct format should be used for right purpose like
- If you have to place a background image, some large image or a screenshot then the suggested format is JPG/JPEG.
- If you have to use small graphics like button images, header
images, footer images, navigation bar images or clip arts, then the
suggested format is PNG.
- If an image is not required to be in high or true colors and 256 colors are enough, then GIF is preferred.
4. Compress CSS, JavaScript and Images
CSS files (.css), images and JavaScript (.js) files can be
compressed, as normally .css and .js files contain unnecessary spaces,
comments, unnecessary code and such other things. A number of high
quality (and free) utilities are available to help you pre-compress your
files.
Following are a few good links for such utilities:
- Compress PNG images by clicking here
- Compress JPG images by clicking here
- Compress .CSS files by clicking here and here and here
- Compress .Js files by clicking here and here and here
I have used these utilities and seen compression results of
about 50% in file size reduction after using such loss-less compression,
so I recommend them.
5. CSS at Top
The recommended approach is to put CSS links on top of the web page,
as it makes the page render progressively efficient. Since users want
to see the contents of a page whilst it’s loading rather than white
spaces, contents/formats should be given on top.
HTML Specifications clearly say to declare style sheets in the head section of a web
page.
6. Javascript at Bottom
When scripts are defined on top of the page they can take unnecessary
time to load; they don’t show the contents that users are expecting
after making any request to an HTTP web server. It's better to display a
the HTML contents of a page, then load any scripting code (when
possible, of course).
Preferably use/link up JavaScript-based scripts at the bottom of a web page. Alternatively you can use the
defer attribute, which runs the script at the end of page loading, but that is not the preferable approach as it is not browser
independent. For example, Firefox doesn’t support it and could mess up with
document.write, so only use it once you fully
understand the implications.
7. Content Delivery Network: (CDN)
When a browser makes a request to any web page – that is, he types a
URL/URI of any web page or web site, a request goes through many hops
(routers and computers) and then finally reaches its final destination.
This happens both for requests and responses. This operation affects
performance and can severely effect load time.
A Content Delivery Network implies a collection of computers, distributed all over the
world, which deliver data (contents). Through a CDN you can have
your website
data on multiple servers distributed in different locations
around the world. Distribute web application data in different places
around the world so request can be served from the nearest location and
save time (which means performance and money as well).
8. Ajax
Problemm: Ajax is being increasingly used to improve usability, but oftentimes in a way which increases overall server
load.
Solutions:
Preferably use the GET method for
Ajax based Requests, because if you use POST method then the request
header would be sent first, followed by the data, which basically splits
the request in two steps. A single-step request can be achieved with
GET if a cookie is not too long and the URL is not larger than 2k.
- When using ASP.NET AJAX and the UpdatePanel control for partial
page rendering, use the maximum number of update panels to update
small chunks of page, but use them wisely. Don’t set the
Update property to Always unless needed. Instead, set
the update mode to Conditional, otherwise all the partial chunks would be sent together after each asynchronous postback.
- Ajax based requests can also be cached when using the GET method. If the URL is the same, then cached data can be used from the
client, and a round trip to the server can be avoided.
9. Ajax vs. Callback
Problem: Ajax is a great solution for asynchronous
communication between client (web browser) and HTTP servers, but one
solution
can't be applied to every problem. This means that Ajax is great
mechanism for sending requests to the server without making a full page
postback, but what if you need to send a request to the server and don’t
even need partial rendering?
Solution: best solution
is Callback.
For example, if you need to check whether a user
exists or not, or if a user has forgotten his/her password and you just
need to send a request to the server to check if user name exist, there
is no need for client-side render - just a server side operation.
Following are a couple of great links which explain callbacks: Please click
here and
here.
10. Reduce Cookie size
Cookies are stored on the client side to keep information about users
(authentication and personalization). Since HTTP is a stateless
protocol, cookies are common in web development to maintain information
and state. Cookies are sent with every HTTP requests, so try to keep
them low in size to minimize effects on the HTTP response.
Cookie’s size should be minimized as much as possible.
Cookies
shouldn’t contain secret information. If really needed, that information should be either encrypted or encoded.
Try to minimize the
number of cookies by removing unnecessary cookies.
Cookies should expire as soon as they become useless for an application.
11. Use Cache appropriately
Cache mechanism is a great way to save server round trips - and also
database server round trips - as both round trips are expensive
processes. By caching data we can avoid hitting them when unnecessary.
Following are
few guidelines for implementing caching::
- Static contents should be cached, like “Contact us” and “About us”
pages, and such other pages which contain static information.
- If a page is not fully static, it contains some dynamic information. Such pages can leverage the ASP.NET technology, which
supports partial page caching.
- If data is dynamically accessed and used in web pages - like data
being accessed from some file or database - and even if data is
consistently or regularly changed, then that data could be cached by
using ASP.NET 2.0 cache dependency features. As soon as data changes
from the back-end by some other means, the cache would be updated.
Now that web technologies such ASP.NET have matured and offer
such great caching capabilities, there's really no reason not to make
extensive use of them.
Following are few very good links to implement caching for different types of data (static and dynamic):
- Click here to cache Full page (static page
caching).
- Click here and here to cache partial page caching.
- Click here to cache dynamic data with
dependency.
12. Upload compiled code rather than source code
Pre-compiled ASP.
NET pages perform much better than source code versions. Actually pre-compilation give web sites a performance boost
especially when the first request is made to a folder containing that resource.
Uploading a pre-compiled version boosts up
performance since the server doesn’t need to compile a page at request-time.
13. Conclusions
Following are few good practices to gain better performance::
- For HTTP compression, GZip is considered the most effective and
most popular by means of browsers and HTTP server. It can reduce
file size up to 70% in size.
- Always keep JavaScript and CSS in external files.
- Avoid redirects until needed.
Server.Transfer is also provided so consider that as well since it performs better in
some conditions.
- Minimize use of Iframes as it's costly.
- Avoid
try-catch blocks for control-flow as they perform poorly. Exceptions should be used only in truly exceptional
situations.
- Minimize Cookie/CSS sizes.
- Minimize DOM objects on page as they are heavy weight.
- Use
link tags rather than @import to use/link up CSS.
- Favicon, being a static image displayed in the browser’s address bar, should be cacheable and compressed.
- Always prefer a cache-friendly folder structure. For example, create specific folders for static contents, like /static for
static images/static pages…
- SSL can never be cached so minimize its usage. Keep it for those
pages which need to be secure, rather than using it for all the
pages.
- HTTP Post requests can’t be cached, so choose the HTTP method appropriately.
- Prevent Denial of Service (Dos) attacks. Recommended article here.
- Prevent SQL Injection. Recommended article here.
- Prevent Cross Site Scripting (XSS). Recommended article here.
I hope you have learned some very good approaches and techniques
to keep your web application in good shape on an HTTP server. I
personally don’t think any are flat-out ignorable nor is any too
difficult to implement.
As performance is a vital part of success
for
any web application, I have tried to be as general as possible, so every
web technology (ASP.NET, asp, php, jsp, jsf and so on) can follow
these tips.
