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.

image

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.

14 Comments

  • Run that example code in FireFox and take a look at the FireBug console. That's probably happening due to your Page_Load re-enabling Timer2 on every partial postback.

  • gt1329a,

    Yeah thanks for that. Missed it when I was playing around with it. Fixed with a simple check and have re-uploaded the code. Should all be good.

  • Hi Andrei, to answer your questions. No its not hard, pretty easy actually.

    As to the single point of failure, sure if one of the timed async requests fails, then that section could fail to load, but then any web request has a danger of failing. You could implement further client side logic to enhance to robustness of this but that is beyond the scope of the article. For example, checking for the prescence of a specific element in each section could be generalised to suit your concerns and scenario -OR- just use the built in ASP.NET AJAX error handling to notify the user of an error in page load and try again. It really depends on your scenario.

  • Great article.

  • Interesting, but improvable.
    Viewstate is moved back and forth for each tab. You can improve it by using only 1 updatepanel for all the tabs and not using ajaxtoolkit bloated control. Just a few lines of custom javascript will do.

    In a previous project I had the same problem and I solved with a faster solution: I included an external file with javascript to create all tabs on windows.onload event. The content of this external file was taken from cache object that you can create overriding Render method of each tab UserControl. This is the fastest possible (only 1 page request and no POST methods), but there are some probs on postbacks afterwards.
    Thanks for sharing, I might improve ur solution when I'll find some time

  • Hi Mark,

    Thanks for the comments, and like anything, it can certainly be improved upon. I am sure you can appreciate that providing a more complex example kind of detracts away from the solution at hand, being delayed loading.

    Your approach sounds good, although probably quite specific to the application. The approach I have provided is a 5 minute task and pretty simple and easy to digest. Improving upon it is an excercise for whomever wishes to do it :-)

    BTW, The tab control has some drawbacks, but its a really useful and timesaving control. Anything generic like this, tends to have some bloat unfortunately.

    Again, I certainly apprciate your comments and look forward to your improved version. Send me the link :-)

  • Why not have each tab click load the content via ajax instead of using timers?

  • Hi Jacky,

    Reason is because its re-active, rather than pro-active. Using timers makes use of 'dead' time, whereas using the click of a respective tab, means the user will have to wait till the content is loaded. Using timers means that potentially, trhere could be no wait (as you will NOT delay load the first tab, but delay load others). So the UI experience will be faster.

  • This really an excellent example and very nicely done. I know of this concept before but afraid to implement becuase I thought might cause delays on page load. But after seeing your example, I got more confidence in it and I am going to implement one for my website and see how it effects the overall page performance.

    Thank you very much.

  • Hi Mytreyi, thanks for the comments.

    I haven't found that issue and I suspect perhaps you have the TAb control itself wrapped in another update panel which is also re-rendering on a partial postback (check your UpdateMode="Conditional"). So that when a partial postback occurs, the main TAB display also gets re-rendered and so you flip back to tab 1.

  • As I mentioned previously, you will probably need to be more selective around what is sent back for the UpdatePanel response. Does the main update panel ALWAYS need to render when one of the inner panels renders. I would suggest changing your UpdateModel on the outer panel to try and fine tune it.

  • Very nice, I used that in my site, but i am getting error "Specified argument was out of the range of valid values.".

    After looking carefully, I come with conclusion that, one of my panel is using iframe, and loading that panel giving this error.

    After this I remove this panel from hidden list as ifram is second request. But any solution to this problem?

  • Can you tell me the right path to get the source code. I am not able to get it as i think its removed now.

    Thanks,
    Srinivas.

  • Awesome dude. This helped me a lot. Keep going.

Comments have been disabled for this content.