Reducing page load times with UpdatePanels and timers
I have demo'ed this technique before and talked about it various times, but I recently used this on another engagement which really helped alleviate some of the initial page load times and size.
In my scenario, we had a page utilising the AJAX Control toolkit and which utilised the excellent Tab control to contain a number of separate display elements.
The page itself had a number of other toolkit control on it, and quite a few GridView controls (notorious for excessive viewstate and page bloat). Page size and speed was paramount on this project so I wanted to be able to bring up the page as quick as possible -BUT- we had to retain all the functionality we had introduced.
The page weighed in at approximately 210kb. Utilising the delayed load technique I was able to reduce that to approx. 130Kb and retain every bit of functionality so far.
The theory is this:
- The initial tab has the controls defined as normal.
- Each subsequent tab content is encased in an Panel with the visibility set to false (to prevent its content from being rendered)
- The invisible panel is also encased in an UpdatePanel.
- Each UpdatePanel has an async trigger that points to an <Asp:Timer control.
- Initial the timer control is not enabled.
- When the page loads, it activates the first timer control.
- The timer control tick event, sets the invisible panel to visible, disables itself, then enables the next timer.
- Next timer sets its invisible panel to visible=true, disables itself, and enables the next timer.
- Process continues.
I have provided a demonstration of this via videocast here with full source code here.
In this trivial example, there is one page with all tabs being loaded as normal, and another using the delay load technique. The standard page has a size of around 50Kb. The page using delay load has an initial load size of approximately 25kb which is half the size.
Obviously, the bigger pages get, you can see how you might be able to have a rather weighty page that initially only loads a small subset of the page, then uses delay load to load the other sections.
I have found this technique valuable, and it can easily be changed to suit your needs. Hope you find it of value too.