ASP.NET Ajax in-depth performance analysis
Let's do some ASP.NET AJAX runtime analysis on a website www.dropthings.com. Those who don't know what it is, it's an open source Web Portal 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 <body> tag. As a result, you see the content first and then the additional scripts, exteders, ACT scripts get downloaded and initialized.
<asp:ScriptManager ID="ScriptManager1" runat="server"
EnablePartialRendering="true" LoadScriptsBeforeUI="false"
ScriptMode="Release">
...
</asp:ScriptManager>
You can explicitly set ScriptMode=false in order to emit release mode highly optimized Ajax runtime scripts during local debugging.