Problem Introduction

You come up with a great HTML layout for data-driven ASP.NET web page which makes perfect sense from business perspective and reveals key indicators while making possible to drilldown into details if needed. This page utilizes DHTML and AJAX calls to improve User eXperience (UX) and overall page looks great until… your database is not filled up and page load time is increasing due to generated HTML size, DHTML is slow due to big DOM tree and users starting to complain about it.

Possible Solutions

At that point there are several approaches that can be employed to help:

  1. Rework page layout so only part of data is loaded;
  2. Download data to the client in XML or JSON format and generate necessary HTML code on client
  3. Load only those portions that need to be immediately displayed and load others on demand (e.g. like paging)

Let’s explore these options:

Rework layout

Here is no technical challenge here – just business one: you have to sell new layout to existing users/customers and once they liked the initial one this can be really difficult. If you can do that – go ahead. There is nothing wrong with that approach.

Client-side bindings

Instead of downloading 10 MB HTML code to client’s browser you can generate pure JSON and having a template of HTML just to fill data in the HTML template with simple (or not-so-simple) loop. Good news here is that such feature is coming to ASP.NET AJAX in v4.0. It is called client templates and implements the idea. Here are some resources:

Partially Loading Page

This is also not new concept – load only  those parts that should be visible immediately to the user. Traditional paging explores that option although it is not that fancy. If you’re using Google Reader you probably noticed that it loads only visible part of the feed and as you scroll down it keeps loading from the RSS feed.

So here is the idea: having small piece of HTML loaded would ease the browser in rendering HTML DOM tree and you gain performance. As user keeps using the page you keep adding HTML to existing DOM tree by loading it dynamically using AJAX.

Tricky part could be rendering ASP.NET User Control within Web Service so pure HTML can be returned by AJAX. Here are some useful tips:

Summary

Utilizing these techniques could improve download time for your web apps and also speed them up because the browser doesn’t need to process whole DOM before give the control to the user. All these can be used together or in any combination as long as it makes sense from business perspective.

Hope this helps!