Reducing page load times with UpdatePanels and timers

Published Monday, April 07, 2008 11:18 PM

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.

by Glav
Filed under: , , , , ,

Comments

# gt1329a said on Monday, April 07, 2008 2:54 PM

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.

# Glav said on Monday, April 07, 2008 7:12 PM

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.

# ScottGu's Blog said on Tuesday, April 29, 2008 1:35 AM

Here is the latest in my link-listing series .&#160; Also check out my ASP.NET Tips, Tricks and Tutorials

# Community Blogs said on Tuesday, April 29, 2008 1:54 AM

Here is the latest in my link-listing series .&#160; Also check out my ASP.NET Tips, Tricks and Tutorials

# Andrei Rinea said on Tuesday, April 29, 2008 6:21 PM

I have thought of this but never implemented it. I always thought it will be hard and I am sure you can confirm this.

However I have one small question : Isn't this model, to be more precise timerX enabling timerX+1 suggesting a single point of failure?!

# Glav said on Tuesday, April 29, 2008 7:18 PM

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.

# chhaysambo said on Tuesday, April 29, 2008 11:11 PM

Great article.

# Nishanth Nair said on Wednesday, April 30, 2008 7:02 AM

Nice article

# Scott Guthrie's Blog in Dutch said on Wednesday, April 30, 2008 11:14 AM

Hier vind je mijn laatste link-lijst series . Bekijk ook mijn ASP.NET Tips, Tricks and Tutorials pagina

# April 28th Links: ASP.NET, ASP.NET AJAX, ASP.NET MVC, Silverlight « .NET Framework tips said on Wednesday, April 30, 2008 4:51 PM

Pingback from  April 28th Links: ASP.NET, ASP.NET AJAX, ASP.NET MVC, Silverlight &laquo; .NET Framework tips

# Enlaces de Abril: ASP.NET, ASP.NET AJAX, ASP.NET MVC, Silverlight « Thinking in .NET said on Friday, May 02, 2008 7:08 AM

Pingback from  Enlaces de Abril: ASP.NET, ASP.NET AJAX, ASP.NET MVC, Silverlight &laquo; Thinking in .NET

# ScottGu's Blog em Português said on Friday, May 02, 2008 5:52 PM

Aqui está a última versão da minha série de listas de links . Verifique também minha página de Dicas

# Fabrizio Bernabei' Blog said on Monday, May 05, 2008 9:45 AM

Microsoft ASP.NET Ajax e l&#39;Ajax Control Toolkit (di cui abbiamo parlato durante l&#39; ultimo evento

# Mark said on Thursday, May 08, 2008 6:38 PM

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

# Glav said on Friday, May 09, 2008 12:44 AM

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 :-)

# Jacky said on Friday, May 09, 2008 12:42 PM

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

# toolkit rendered said on Sunday, May 11, 2008 12:11 AM

Pingback from  toolkit rendered

# Glav said on Sunday, May 11, 2008 4:58 AM

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.

# Aziz said on Thursday, June 05, 2008 10:49 PM

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.

# Recent Links: ASP.NET, ASP.NET AJAX, ASP.NET MVC, Silverlight « Tad Wang’s Weblog said on Sunday, June 08, 2008 12:17 AM

Pingback from  Recent Links: ASP.NET, ASP.NET AJAX, ASP.NET MVC, Silverlight  &laquo; Tad Wang&#8217;s Weblog

# Mytreyi said on Wednesday, July 16, 2008 5:17 PM

Great example.

I implemented this in my application which has around 6 tabs. The problem is when the page loads and I immediately change the tab, even if the tab is loaded it won’t let me interact with it and it reverts back to the first tab. After a few seconds only ,I’m able to do what ever I want. So I’m not really gaining much time here. Can you suggest something where if I change the tab, it won’t revert back to the first tab?

# Glav said on Wednesday, July 16, 2008 8:51 PM

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.

# Mytreyi said on Thursday, July 17, 2008 1:57 PM

Thank you for your prompt reply

Yes i do have an update panel and if i remove it,it is working fine.

But i need that update panel.Its for the entire page.

Can you suggest anything which could work in this scenario

Thanks

# Glav said on Sunday, July 20, 2008 8:13 PM

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.

# bhadelia.imran said on Wednesday, September 17, 2008 7:18 AM

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?

# Ejat said on Saturday, October 11, 2008 12:17 PM

nice article

# Srinivas said on Monday, June 01, 2009 2:23 AM

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.

Leave a Comment

(required) 
(required) 
(optional)
(required) 
Go

This Blog

Syndication