Let’s do some ASP.NET runtime analysis on www.dropthings.com. Those who don’t
know what it is, it’s an open source start page I made using
ASP.NET Ajax, .NET 3.0 and Linq.
ASP.NET Ajax has a pretty big runtime which consists of Core
Framework, scripts for UpdatePanel, Preview Script required for
Drag & Drop. Additionally I need Ajax Control Toolkit
(ACT). All these add up to a staggering 564 KB of download in 12
script references on the page. The download size mostly depends on
the usage of extenders and Ajax features. A moderate use of
extender results in the following download:
Here’s a simulation of 256kbps internet speed on 200ms
network latency. I use a tool named Charles ( www.xk72.com/charles) to capture
traffic and simulate slow internet speed by throttling data
transfer speed. From the durations, we see almost 20 sec is spent
on downloading the runtime over a 256kbps line!
Let’s explain which script in the above list does what. I
will be identifying the scripts using their file size in order of
their appearance:
- 21.64 KB – Handy script for Postbacks
- 83.38 KB – Microsoft Ajax Core runtime
- 30.16 KB – UpdatePanel, partial update, asynchronous postback
scripts. - 136.38 KB – Preview version of Ajax which allows Drag
& Drop script - 36.02 KB – The actual drag & drop script in Preview
library - 45.25 KB – Ajax Control Toolkit
- 4.08 KB – Timer script
- 140.86 KB – ACT Animation framework
- 18.05 KB – ACT Behavior base implementation. Required for
Behaviors provided in the Ajax Control Toolkit project. - 16.48 KB – ACT Animation Behavior
- 7.32 KB – My Custom Drag Drop behavior
- 9.73 KB – My Custom Floating Behavior
The total payload for only the runtime is too high to accept
because we cannot make a user wait for 20 sec just to download Ajax
scripts before user can actually start interacting on the page. So,
I took several approaches to reduce the size of the
download:
- Eliminate Preview version of Ajax completely and use ACT for
Drag & Drop - Use IIS 6 compression to deliver compressed scripts from the
client - Combine multiple script files into one file
ACT comes with its own DragDropManager which we need for Drag
& Drop. So far I thought of using
Sys.Preview.UI.DragDropManager in the ASP.NET Ajax January CTP. But
just for the DragDropManager, I need to add nearly 180 KB of
scripts for the entire Preview Library runtime. If I use
ACT’s DrgaDropManager, I can get rid of the Preview
runtime.
Without the preview scripts, the scripts downloaded are:
The following downloads are missing here:
- 136.38 KB – Preview version of Ajax which allows Drag
& Drop script - 36.02 KB – The actual drag & drop script in Preview
library
I saved about 180 KB, nearly 7 sec from total download. So,
user gets to work on the page 7 secs earlier than before.
When I enabled IIS 6 compression, the situation improved
dramatically. Here’s the data transfers when compression is
enabled:
The total download comes down from 448 KB to 163 KB! Total 64%
download bytes reduction! This results in 3 times faster page
download.
The scripts are downloaded in two steps – first the core
runtimes download and then ACT and other scripts download. The
content is displayed after the core runtime is downloaded. So, the
time it takes to show the content on the browser reduces
significantly because now it takes only 50KB to download before
something is visible on the screen compared to 130 KB on
non-compressed mode.
ScriptManager control has
LoadScriptsBeforeUI property which you
can set to “False” in order to postpone several script
downloads after the content is downloaded. This adds the script
references end of the
content first and then the additional scripts, exteders, ACT
scripts get downloaded and initialized.
You can explicitly set ScriptMode=false in order to emit release
mode highly optimized Ajax runtime scripts during local
debugging.
Very good article Omar, keep up the good work
Hi Swami,
As far as I know, ACT stands for Ajax Control Toolkit ;), just search for ajaxcontroltoolkit
Omar – here’s a few more suggestions.
Try using a response filter to enable script compression on your own scripts. By default ASP.NET uses GZipStream which turns out to be slower than the DeflateStream class.
Apparently there are some IP issues with using certain compression techniques with gzip so the .NET folk did not do a lot of the improvements that other gzip algorithms do. Using a 3rd party compression library is much faster with somewhat better ratios than using the .NET libraries.
What also has helped me is preloading web service requests. Atlas CTP had something like this in form of InitialData but it was later removed. It definitely helps out if it is implemented correctly.
AO
one technique I use in my ajax project is to do client processing to hide/show elements first, then fire an asynchronous task to do the actual stuff, e.g. when minimizing/showing those thingies (what are they called?) it would do it right away (visually)
Hi Eber Irigoyen,
how is possible to do client processing to hide/show elements? Is suppose you are doing it with JavaScript but how can JavaScript minimize some server control?
Hi,
I have created a webpage which contains two gridviews. The first gridview contains the list of orders made a company. The second gridview displays the details of the order. I also have a dropdownlist so that they can select particular year and view the list of orders for that year. The user can click on individual orders in the left side grid and it will display the order details on the right side grid. I am using callbacks to display the details. If I didn’t select any year and it is defaulted to all the years, the performance of the page is really slow. If I select a particular year and click on orders the performance is better. So I thought that if we didn’t select any year the view state will be big(that is why the performance is slow) and if we select particular year the viewstate will be less(better performance). But when I checked the viewstate in both the cases it is same. It has same number of characters. So I am not sure which is hurting the performance. Please let me know what I could do to improve the performace.
Thanks,
sridhar.
Pingback from Abgar.HeeftHetOver.Net » Blog Archive » Ajax Control Toolkit en performance
The IIS compression really help us much. I been using it logn time ago. the performance can be improve at least > 60-70%. Anybody tried out the IIS7 compression?
replicawatchesdiscount.info/…/citizen-automatic-dive-watch-vintage.php
Regarding the size of the js files used and the time required for downloading – are these files cached upon return trips? If caching does occur with ASP.NET AJAX, what effect will this have in regards to:
a) load times
b) compression
Thanks,
Joe
I using 2 updatepanel 2 tabcontainer on onne page all run ok but sometime get error: “Sys.InvalidOperationException: owner must be set before initialize”
it like:
forums.asp.net/…/1099039.aspx
i cannot fix please help me! thanks so much
http://index1.yritum.com >federal long shoreman act
http://index1.yritum.com >federal long shoreman act
http://index1.yritum.com >federal long shoreman act
I've seen on your portal(dropthings) that the .js for the Ajaxtoolkit is not compressed, and delivered with a lot of comments. Is it somehow possible to remove these comments or deliver a compressed version of that?
LoadScriptsBeforeUI=”false”. this saved my life 🙂 great article Omar, thanks 🙂
Hi Omar,
Do you get issues with IIS compression and the ScriptManager compression corrupting your script files?
We're using the ACT scriptmanager and I'm using Script Combination, but with HTTP compression running on IIS 5.0 the script files get GZIP'd twice and the resulting script files are unreadable gibberish.
You can't disable compression in the ACT scriptmanager in the version 1.0 toolkit for .Net 2.0 so I was wondering if anyone else (or yourself) had come up with a solution – unfortunately compression is a server-wide setting in 5.0 and I can't get around it.
Your research work rocks.