<!–
ASP.NET Development
guidelines
<!--[if !supportLists]-->·
<!--[endif]-->Guidelines
for ASP.NET AJAX
Performance Improvement
Among the 95% of the .NET developers that said they are
using some flavor of Ajax either in production, development or prototype, the
most used AJAX Framework is ASP.NET AJAX, with 73,7%, followed by the Ajax
Control Toolkit which is used by almost half of the .NET developer that are
using Ajax.
However ASP.NET AJAX model is showing performance problem.
The web application developed in ASP.NET AJAX makes the site slow down.
So following are the few of guideline which will help you
out to improve performance of ASP.NET AJAX application. This will basically
apply to the ASP.NET AJAX version 1.0 final release.
- Use HttpWatch to check the network traffic.
- This is one of important tool using which you can check the data returned by
the server. There is dedicated tool available for this. Moreover to that
you can also utilize Firebux extension of firefox to watch network
traffic. The dedicated tool is available for the download from following
URL: http://www.httpwatch.com/download/.This is a limited feature version.
- This is one of important tool using which you can check the data returned by
- Use "ScriptReferenceProfile" to show Javascript reference
- ScriptReferenceProfiler is an open source tool on CodePlex, for analysis the JavaScript
references of ASP.NET AJAX, we can simply add the following code to our
page in order to show the JavaScript references imported by
ScriptManager.<microsoft:scriptreferenceprofiler runat="server">
- ScriptReferenceProfiler is an open source tool on CodePlex, for analysis the JavaScript
</microsoft:scriptreferenceprofiler>
You can obtain it from the following URL
Reference: http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=13356
- Web.Config Optimization
- To have optimized web.config file our application, all we need to do is to
have a compression and caching is enabled in web.config file for the
ASP.NET AJAX Includes. You can use the following code in web.config file
to enable compression & caching for AJAX includes.<system.web.extensions>
<scripting>
<scriptResourceHandler enableCompression="true" enableCaching="true"/>
</scripting>
</system.web.extensions>
Also check before and after result of before and after of enabling
caching & compression in network traffic.Now this is limited to the compression and caching for AJAX includes. In our site we also
generally have many other script files included. There can also be no. of
different CSS files, JS files etc. We can also compress them so that It make fewer request in bytes.Basically there is no any method available in ASP.NET which allows the
compression of JS & CSS files. We need to do it manually and
reference those compressed file in our application.One very key important point to consider is related to change management
of those files. Once you have compressed file in place and referenced in
your different pages, If your JS file or CSS
file need to have any modification, then you again have to recompress it
from newer version.So this method should be adopted for such scripts or CSS which are less
frequently changed.There are different tools available which allows your script and CSS file
compression. Following are the different methods which can be used for
this purpose.1) Yahoo compresser (http://yui.2clics.net/)
2) http://www.vlead.in/resources/tools/minify-javascript/index.php
(The best one which I utilized)
- To have optimized web.config file our application, all we need to do is to
- Optimization of ScriptManager
- The ScriptManager control manages client script for AJAX-enabled ASP.NET Web
pages. By default, the ScriptManager control registers the script for the
Microsoft AJAX Library with the page. This enables client script to use
the type system extensions and to support features such as partial-page
rendering and Web-service calls. Following, we need to setting
the property of ScriptManager to optimize the performance of ASP.NET
AJAX.
- The ScriptManager control manages client script for AJAX-enabled ASP.NET Web
<!--[if !supportLists]-->·
<!--[endif]-->Set "scriptMode" to Release.
for e.g.
<asp:ScriptManager ID="ScriptManager1″
runat="server" ScriptMode="Release">
</asp:ScriptManager>
Moreover to this set "debug" mode in "compilation" section of web.config file
to false.
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
<!--[if !supportLists]-->·
<!--[endif]-->Disable partial page rendering
If we using the UpdatePanel in the page, we must set this property to true,
conversely, if the UpdatePanel is not using in our page, it would be better
that we set the EnablePartialRendering to false.
For e.g.
<asp:ScriptManager ID="ScriptManager1″ runat="server"
EnablePartialRendering="false">
</asp:ScriptManager>
- Move All Script Tags After Body Content
- ASP.NET ScriptManager control has a property "LoadScriptsBeforeUI", when set to
false, should load all AJAX
framework scripts after the content of the page. But it does not
effectively push down all scripts after the content. Some framework
scripts, extender scripts and other scripts registered by Ajax Control
Toolkit still load before the page content loads.
- ASP.NET ScriptManager control has a property "LoadScriptsBeforeUI", when set to
So these are the basic general guidelines which can be
followed one by one to have an improved ASP.NET AJAX response.
<!--[if !supportLists]-->·
<!--[endif]-->Guideline
for ASP.NET Application Performance
Following, I will demonstrate some of important guideline
for the improvement of ASP.NET application. These guidelines should be
implemented carefully by taking into consideration of development needs. It is
not necessary to have all following steps followed.
- Removing unnecessary HTTP MODUES from site.
- There are several ASP.NET default HttpModules which
sit in the request pipeline and intercept each and every request.For example, if you aren't using Membership and Profile provider, you
don't need "FormsAuthentication" module. If you aren't using Windows
Authentication for your users, you don't need "WindowsAuthentication".We can remove those unnecessary references of HTTP modules from
web.config using <remove> tag.Generally following are the HTTP modules which are not generally used in
our current development architecture.<remove name="WindowsAuthentication" />
<remove name="PassportAuthentication" />
<remove name="AnonymousIdentification" />
<remove name="UrlAuthorization" />
<remove name="FileAuthorization" />
- There are several ASP.NET default HttpModules which
- Removing or compressing "VIEWSTATE" from page
- We can override few of method of default System.Web.UI.Page class of .net
framework.Use the following file and include it in your project's APP_CODE.
Inherits rest of all your pages from this page instead of regular System.Web.UI.Page
class.Ref: BasePage.vb
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
- We can override few of method of default System.Web.UI.Page class of .net
- Use caching for pages which changes less frequently
- There are several ways to use the cache; we'll focus on the easiest tricks to
get you started, then point you toward some resources that will help you
tackle more advanced ways to utilize the cache.The simplest solution is to use the OutputCache directive on your pages
or user controls.
- There are several ways to use the cache; we'll focus on the easiest tricks to
- Disable VIEWSTATE for pages where no Grid related functionality.
- One should set the VIEWSTATE disabled in those pages where there is no grid
level manipulation. When we have a simple page with no complex logic, it
should be disabled.Moreover to that set the following pages which are not security
sensitive.1) EnableViewStateMac="false"
2) ViewStateEncryptionMode="never"
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
- One should set the VIEWSTATE disabled in those pages where there is no grid
- Use classical ASP type of page for normal pages.
- Another important point is to use a classical ASP type of pages which are simple.
Those pages which do not have any complex display should be developed
like normal ASP pages. Please check the following referenced page for
this similar purpose.these are such files which do not have underlying code behind file
attached to it.We can also utilize the feature of "include" file method which is there
in classical ASP.
- Another important point is to use a classical ASP type of pages which are simple.
<!--[if !supportLists]-->·
<!--[endif]-->Guidelines
for structuring ASP.NET Application
In the following, I will demonstrate the basic guidelines
for the structuring of any web application.
See these guidelines are generally be best suitable for SEO
oriented sites. It can also be adopted for general site also keeping
requirement in mind.
These guidelines are prepared keeping modularized
development in mind. So there are no such tricks that by following them you
will be able to better structure your site. One should do the do modularized
development in their programming also to achieve this.
- Use dedicated folders for JS & CSS files.In a site generally there are different JS & CSS files for different
functionality. These JS & CSS files should be accordingly structure
inside your website. Please take a look at the following example for the
better illustration of this method.Say for e.g. in a site few pages have functionality to display a jQuery
zoom light box when anyone click on the image of product.So following should be the structure of JS & CSS files.
In this example, assume there are also few global JS & CSS. So I will
also demonstrate the purpose of integrating them in site.Root
|___js
| |___lightbox
| |___lightbox.js
|____|___global
|____jquery-1.2.6.min.js
|____common.js
|___css
| |___lighbox
| |___ lighbox.css
|________global
|____global.css
This modularization can also be used to
differentiate CSS & JS for each page of site.Modularization is also not limited to the CSS & JS files, one can
follow same modularization concept across different type of files also
like XML content, flash content, image folders etc.<!--[if !supportLineBreakNewLine]-->
<!--[endif]--> - Use proper naming conversion in CSS files.
- Care full design of CSS classes and attributes provide better traceability. As
you just shown above that the CSS & JS can be modularized. We should
also use proper naming convention in those CSS file. If you follow these
conventions, you can easily identify respective class.Say for e.g.
you set naming abbreviation of respective CSS as per below.
1) global.css
= glb2) lightbox.css = lg
so now you can have following CSS class/section defined in respective css
files.like in global.css
glb-main
{
}
.glb-title
{
color: #7D3D0D;
font-family: Arial;
font-size: 20px;
font-weight: normal;
text-decoration: none;
clear: both;
}
in the same way, you can also different class in lighbox.css
.lg-dvtop
{
width: 100%;
margin: 20px 10px 10px 10px;
}
.lg-content
{
width: 700px;
height: 600px;
}
- Care full design of CSS classes and attributes provide better traceability. As
- Configure
APP_CODE to have two sub directories. Each sub directory can be used for
different language. It is generally like following.APP_CODE
|___VB|___CS
Respective programming files should be placed in respective folders. Also
make sure to configure code sub directory in web.config also.
<!--[if !supportLists]-->·
<!--[endif]-->Guidelines
before final release of site
Following, there are some important and necessary checks
that web-sites should be checked against before the official launch.
- Favicon
- A favicon icon the tab or window in which your website is open in the
user's browser. It is also saved with the bookmark so that users can
easily identify pages from your website.for e.g.
<link href="images/fav_icon.ico" rel="icon"
type="image/Jpeg" />
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
- A favicon icon the tab or window in which your website is open in the
- Title & Meta data
- Your page title is the most important element for SEO and is also important so
that users know what's on the page. Make sure it changes on every page
and relates to that page's content.Also one should make sure that related meta data
details are also get placed in every pages and are changes as it should
be to different pages.
- Your page title is the most important element for SEO and is also important so
- Cross-Browser Check
- The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox
3, Safari 3. Following are the few methods used to do cross browser check1) XecoCode (http://www.xenocode.com/browsers/)
2) IETester (http://www.my-debugbar.com/wiki/IETester/HomePage)
3) Browser shot (http://browsershots.org/)
- The most popular browsers to check are Internet Explorer 6, 7 and 8, Firefox
- Links
- Don't just assume all your links work. Click on them. You may often forget to
add "http://" to links to external websites. There may be case when some
URL rewriting related prefix or postfix would be forgotten.
- Don't just assume all your links work. Click on them. You may often forget to
No comments:
Post a Comment