How to reduce Wait time (TTFB) for MVC application

Question

I have a html page with 7 divs, I am loading each div using ajax calls in order to load these cards parallelly. When I check from controller side, each div StoredProcedure is taking just 100-200 mSec, where as rendering each div is taking close to 2sec. When I check from Chrome Development tools, each request is taking so much of Waiting time (TTFB) and it looks to be each div is loading synchronously even though I am using the below code:

$.when($.ajax({
    url: div1Url,
    success: function (data) {
        $("#div1").html(data);
    }
}),
       $.ajax({
    url: div2Url,
    success: function (data) {
        $("#div2").html(data);
    }
})
       //Like this I am loading all divs...
       
).then(function () {
console.log('loaded');
});

<div id="div1"> Div1</div>
<div id="div2"> Div2</div>
<div id="div3"> Div3</div>
<div id="div4"> Div4</div>
<div id="div5"> Div5</div>
<div id="div6"> Div6</div>
<div id="div7"> Div7</div>

Please find the below my HTML rendered page and the timeline for the each component. Can someone suggest me how to reduce this waiting time to achieve performance.

PS: I have implemented gzip, Dynamic compression, Expires Headers, etc., and my site Grade is "A" when I tested with YSlow tool

Solution 1

Even if you are sending the AJAX requests concurrently, the ASP.NET MVC processes them as a queue, if you are using session data.

Try adding [SessionState(SessionStateBehavior.Disabled)] attribute to your controller.

Refer here: ASP.NET MVC 5 concurrent requests are queued even with disabled Session

Solution 2

They are so many reason for why an Ajax request can be slow.

I will try to put you on the right track.

• First, you should specify that your request is of GET type, GET request are much faster !

• You should also specify the type of data you are trying to recive, this will improve the speed.

• Finely, you should call your function on complete and not on success

Given the three previous points :

 $.ajax({
      url : div2Url,
      type : 'GET', 
      dataType : 'html',
      success : function(code_html, statut){

      },
      error : function(resultat, statut, erreur){

      },
      complete : function(resultat, statut){
          //Here you can treat your data
      }
 })

• Also consider doing all you Ajax call for the same page in only one request. Gathering every data you need for you page in only one request will improve greatly your server performance. Then in page you can split your result for every div.

If this do not speed up your request, here are other points to consider :

• Is it really your ajax request that is slow or the request in server side ? (For example, request to database)

• What type of data are you trying to receive ? Is it HTML ? Is it XML ? JSON ? (In most case, try to send the less data you can, for example if you have HTML to send, try to put the HTML on the page where you want to display the information and send only the data to be displayed)

• Check the moment when you trigger the Ajax call. Maybe your doing the request at a bad moment.