Fast way to make multiple AJAX calls

Question

So i have a web application which is making around 14-15 AJAX calls to some APIs. The problem is the amount of time all the AJAX calls takes is nearly 3x than the time in which each individual API shows me response when I type its URL in the browser.

I am making all the AJAX calls instantly inside the DOM Ready event.

The thing is how can i speed up this process of making 15 AJAX calls together, getting the response as fast as possible and Manipulating the DOM accordingly.

Few Points which i have in my mind:

1. All the AJAX calls should be ASYNC in nature. (Already doing it).
2. Don't make all the AJAX calls at the same time. Induce some sort of timeout as making all the AJAX calls at the same time may block the bandwidth and slows down the turn around time of the process.
3. Reducing the number of API calls by any means. (Already doing it).
4. Manipulate the DOM as minimal as possible. (Already doing it).
5. Setting cache:true in AJAX setup. I don't think that will really help, still i am doing it wherever i am sure content will update really slow.

Any suggestions will be valuable! Thanks.

The way i am making AJAX calls

$(document).ready(function(){

    loadSentimentModule();
    loadCountModule();
    loadEntitiesModule();  
    // Some more function calls.

});

function loadSentimentModule(){

   $.ajax({
          url:someurl,
          cache:true,
          dataType:"json",
          success: function(data){

              // Based on data manipulating DOM.
          }

}

// Same kind of function defintions for all the functions.

Answer 1

You may not issue the ajax call directly, but queue them and let a manager control the queue, see here: Queue ajax requests using jQuery.queue()

Answer 2

I recomend you to use the async.js module on client. May be it this what are you looking for.