Why UpdateControls are dangerous (or: why Fiddler is a great tool)!

Michael Schwarz on Sunday, May 14, 2006

The next days I will have a deeper look into web sites that are using AJAX frameworks that will replace the typical postback used in ASP.NET.

Today I found a new job portal (http://www.dot-net-jobs.de/ [1]) using the Atlas framework [2] to allow paging throug a list of job offers. I started Fiddler [3] to see how the page is using the framework and what data will be transferred during the AJAX calls.

I deleted my local cache of Internet Explorer and entered the URL. After everything was loaded I checked Fiddler to see each request. The default.aspx showing the inital page is about 17 KB, then the Atlas framework is loaded using the WebResource.axd, the size is about 243 KB. Because I'd like to compare this web site using AJAX or not I don't want to have a look at the size of the css file and images (these are cached after the first call).

Now, I'd like to go to the next page using the weiter link (German translation for next). In Fiddler I see the request using the Atlas framework. The request is returning 14 KB html source code, only 3 KB less then the complete initial page showing the same info. Saving 3 KB per page means: we need about 81 clicks on weiter to save traffic!!

243 KB JavaScript / 3 KB saved = 81 clicks

The next thing I noticed is that maybe the web.config configuration for Debug is set to True. The Atlas framework JavaScript file (WebResource.axd) is not cached locally, so each visit it will be again 243 KB for this file. For more details on this read the Scott's article Don't run production ASP.NET Applications with debug="true" enabled [4].

One thing you have to look at when using AJAX-styled web applications is that you may lose several features (is not an Atlas only problem, most AJAX framworks do not have an build-in support for these problems):

<li><font size="2">If you use backspace or the back arrow (history buttons) it will not work because everytime only parts of the web page will be replaced. There are several ways to add this support by changing the document.location of the document using anchors.</font> <li><font size="2">The feature to open a link in a new window (either by pressing shift while clicking on the link or using right click -&gt; open in new window) will fail because every link in the web page is using JavaScript code. This will end in an error because the JavaScript is not working in a new window where the function is missing.</font> <li><font size="2">The next problem is that search engines (crawlers) will only find the start page, sub pages will not be found.</font></li>

I hope we will find more and more things where we have to be careful using AJAX frameworks.