Delaying Server-Side Widget Loading ASP.NET

When a page executes on the server side,it executes all the widgets on the page.This makes the first-time visit,future visits,and tab switching slower because the serverside execution takes quite some time. Because widgets fetch data from the database or external sources right on Page_Load event,it takes quite some time to fire Page_Load for all the widget web controls on the page. To improve the perceived speed of page load,first you need to deliver the page on the browser with a widget skeleton and some loading progress messages and then incrementally populate the widget with their content.

Sites like Pageflakes exhibit this behavior; the widget skeletons download first, and each widget shows a loading progress message.Then each widget makes a web service call to fetch its data and show its content.Although the page’s total load time is quite high with this approach(there is at least one web service call per widget),the perceived speed is lot better because the user sees the page downloading. As previously mentioned,loading widgets from top to bottom will also give the page a fast-loading feel.

Delayed loading means widgets will not load their content at the Page_Load event,but will instead load after receiving an asynchronous postback from a timer.The widget will first deliver a loading progress message and then use the Timer object to fire an asynchronous postback.During that asynchronous postback, the widget will fetch external data and render the output.This ensures Page_Load is not stuck waiting for external data and the page’s load time is not affected by the delay in fetching external content.

One easy way to do this is to use a MultiView control where one view contains a progress message and the next view contains the main UI.A Timer control could fire a postback after,say,100 ms, which will then change the view to the main UI and disable itself.

Delaying RSS/Atom Widget Loading

First,we will convert the RSS widget to delay loading and make a page full of RSS widgets load in two phases.The page will load instantly and show a “Loading…” script in the RSS widgets.Then each widget will load one after another in a progressive manner.

The UI of the RSS widget is split into two views using a MultiView control: a progress message and the FeedList DataList control,as shown in Example

RSS widget in two views for delay loading

RSS widget in two views for delay loading (continued)

The timer calls the Load RSS View function on the server by doing an asyn- chronous post back.This function changes the current view to RSS Feed View and shows the feed,as seen in Example.This function is defined in the code behind the RSS web control’s file.

TheLoadRSSView function in the RSS widget code is fired by the timer

So now Page_Load does nothing on first load.It loads only the feed during the asynchronous postback.As the Page_Load event completes instantly,the load time of the widget no longer depends on fetching external content,as shown in Example

The widget’s Page_Load event does nothing on first load

Page_Load fires only the Load RSSView function during post back. On sub sequent post back,Load RSSView will execute instantly because the content will be already cached in the ASP.NET cache.

Delay Flickr Photo Widget Loading

It is exactly the same process to delay loading the Flickr photo widget. MultiView is used to show a progress message,and then on the second view,the page loads the photos. During Page_Load,the widget does absolutely nothing on first load so there isn’t any delay on first-time page load.Once the progress message is delivered on the UI,a timer fires an asynchronous postback and only then is the photo stream loaded from Flickr and the UI rendered.

Problems with Delaying Widget Loading

Although the page-loading speed seems faster,
the total load time is significantly higher because it requires one asynchronous post back per widget. Moreover, it’s a significant load on Default.aspx because each widget makes an asynchronous post back during the first load. So, instead of Default.aspx being hit once, it is actually hit n times with n widgets delaying the loading feature.Asynchronous post backs are HTTP POST, so there’s no way to cache the content on the browser that widgets fetch from external sources. So,if one RSS feed doesn’t change for a week,the asynchronous post back for the RSS widget returns the same output for seven days. The output does not get cached on the browser so it doesn’t improve the widget’s second-time loading.

Figure shows four asynchronous postbacks to Default.aspx because there are four RSS widgets on the page delaying loading, which are all HTTP POST.

Asynchronous postback’s response content while delaying a widget’s loading

Asynchronous postback’s response content while delaying a widget’s loading

On subsequent visits,these four asynchronous postbacks repeatedly return the exact same data from the server because the feed source isn’t changing as frequently.

However, there’s no way to cache the response and avoid repeated postbacks because asynchronous post back, being HTTP POST, is not cacheable, as we noted previously.

To improve widget load time on subsequent visits, you need to fetch data from the browser via a HTTP GET call and produce response headers that indicate the response to the browser’s cache.You need to use JavaScript to fetch data from the original source, parse it, and render the HTML. And because you cannot use server-side rendering logic, you need to make client-side widgets to benefit from fast subsequent visits.

However,the browser does not allow cross-domain calls. So, you cannot use XML HTTP to get data from external domains directly. For example, you cannot fetch an XML feed from You need to make a call to one of your own web services, which will act as a proxy (bridge) to fetch data from original source.In the next section, we will build such a proxy that can serve data from external URLs and perform intelligent caching.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

ASP.NET Topics