Fix slow page load time with multiple user controls - display them as they are available not all at once

Question

User1798940247 posted

I'm trying to determine the best way to go about speeding up the initial load time of pages that have multiple dynamic user controls on them.  These controls vary from html5 charts/graphs and 3rd party grid controls (each page can be different - like a dashboard).  Currently, the user controls are injected server side onto the page, but it can take several seconds to get everything loaded before the page displays (5-10 seconds).  What I'm hoping to achieve is a way to add these user controls to the page as they are available/generated and not have to wait on ALL the controls before the page is shown. 

Some of the User Controls are setup to pull their data via web methods, but the grids in particular are currently not in a place to be able to load their data this way due to the features required of them (I cant currently pass its creation properties via json).  I've seen in other applications where the place holders are showing loading gifs for instance and as the controls are generated they are placed in these spots, but at least you see the page, where the controls will be and that they are loading.

A. One way I could think of generating the grids within the confines of this setup would be to make multiple async postback calls to generate each one, thus giving the illusion of a 'faster' loading page, but in reality multiple async postbacks are occurring. 

B. Making the calls to get the data for the grids to use async thread calls (TPI/TPL), but not sure that would fix the display issue, but maybe it would...I dunno.

Any thoughts on how I could accomplish this?

Answer 1

User-1598917946 posted

Well it's a question of the data you are loading .. even when js functions are being executed the page will become unresponsive if you are trying to click etc.

If you are using Html 5 ( and only ..)

then there are a couple of things you could try..

1.Application Cache (You won't need html 5 but you can actually speed up subsequent loads considerably)

http://www.w3schools.com/html/html5_app_cache.asp

2.HTML5 Web Workers (Even during long executions of js the page still will remain responsive)

http://www.w3schools.com/html/html5_webworkers.asp

3.HTML5 Local Storage (unsensitive data for subsequent usage can be stored directly on browser).-- advantage over cookies if you use session storage it will be killed on tab closing

http://www.w3schools.com/html/html5_webstorage.asp

The data limit for storage on point 3 can be checked here

https://arty.name/localstorage.html

Answer 2

User1798940247 posted

Thanks for the response Vimal,

Application Cache would assume things to be loaded already and the issue is getting things to load up independentally (on separate threads or something like with Iframes).  WebWorkers kind of baffle me as to their use as they cant access webmethods or make calls and cant access the dom, but otherwise allowing clientside to be multithreaded is awesome.....now to allow them to access services or webmethods would be great.  Local Storage is awesome, but again things would have needed to be created already.

I'm almost thinking a splash page or something at this point