How to load page faster having delay causing UserControls in it?

Question

In my website after logging in I have a main page. I this page their are different widgets, which I have implemented in Usercontrols. I have placed those usercontrols at their position in design.

At Codebehind I am calling a method from each one of the usercontrols to load the data into the respective usercontrols.

Usercontrols Client side code

<div class="box1">
     <Custom:UC1 ID="UC11" runat="server">
     </Custom:UC1>
 </div>
<div class="box2">
    <Custom:UC2 ID="UC22" runat="server">
    </Custom:UC2>
</div>
<div class="box3">
    <Custom:UC3 ID="UC33" runat="server">
    </Custom:UC3>
</div>
          |
          |
          |
<div class="box10">
    <Custom:UC10 ID="UC1010" runat="server">
    </Custom:UC10>
</div>

Codebehind

UC11.Load();
UC22.BindData();
UC33.LoadData()
|
|
|
UC1010.CopyData();

The problem is the Usercontrols are taking time to load. That is why page is getting loaded due to some delay, after a minute or 2. Sometimes 3 - 4 minutes.

I want a solution like a page will be loaded and let the usercontrols get loaded at their delay. I ll indicate a loader image at each Usercontrol. Can anyone suggest me the solution? Or give any link?

Answer 1

Load data for your controls at client side(browser) via async ajax / jquery ajax. This way page will be rendered & individual widgets will be loading at the client.