How to reduce Wait time (TTFB) for MVC application
<p>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:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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');
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div1"&gt; Div1&lt;/div&gt;
&lt;div id="div2"&gt; Div2&lt;/div&gt;
&lt;div id="div3"&gt; Div3&lt;/div&gt;
&lt;div id="div4"&gt; Div4&lt;/div&gt;
&lt;div id="div5"&gt; Div5&lt;/div&gt;
&lt;div id="div6"&gt; Div6&lt;/div&gt;
&lt;div id="div7"&gt; Div7&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>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.</p>

<p><a href="https://i.stack.imgur.com/0s0F1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0s0F1.png" alt="Html Page"></a></p>

<p><a href="https://i.stack.imgur.com/g7b45.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g7b45.png" alt="enter image description here"></a></p>

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