Ajax calls increase the website load time

Question

Hi i am working on a web app.in that app there is a code like below

$(document).ready(function()}{
   getNewLetterContent();
   getVideoComplition();
   getRssFeed();
   intializeEvents();
});

each of these functions are makes ajax calls to thrid party api.most of these calls are taking so much time to get a response.this ultimately makes the app to load slow.whatever the response we are getting back that is not much important for the initial view of the app(Above the fold content) .so i have searched the internet for a solution ,i replaced document.ready to window.load that doesn't make a much difference.can you guys please help me how i can improve the performance along with this calls

does the rendering of your content rely on those calls? your page structure should have fully loaded before the ajax calls are made. have you checked for any bottlenecks using chrome dev tools network tab whilst loading the page? (or alternatively a page load analysis tool like http://tools.pingdom.com ) — flauntster, Nov 07 '16 at 05:13
if those four functions make synchronous API calls, then making them asynchronous API calls would help - if your page relies on the result of those API calls, and the actual response to those API calls take a long time, then there's not much you can do about it - without seeing the code in any of those functions, I'm purely speculating of course, and can't offer any help with improving the performance of functions you don't even share in the question — Jaromanda X, Nov 07 '16 at 05:27
Thanks flauntster and jaromanda for the quick response.the initial page doesn't relies on the responses from the API.i want to make these calls once all the contents of the page has been loaded so that doesn't affect the page performance.replacing document.ready with window.load doesn't do much.the responses from each API taking so much time around 16 to 17 seconds.is there any way I can first load the page and then make these call.since the code is sensitive I can't post the actual code. — yasarui, Nov 07 '16 at 05:57

score 0 · Answer 1 · edited May 23 '17 at 10:27

You should check code in all these functions. By default JavaScript engines have event loop system, which is event-driven system, which notifies about events and invokes needed callbacks. It means that ajax calls per se shouldn't slow your webpage, because it is just small piece of javascript (just few functions to invoke and to send XHR/fetch requests).

There is a chance that these functions have some heavy code, which is blocking, and therefore page is really slow (it might be the case if all these functions are old 3rd-party-libraries).

Also, there are few possibilities with fully asynchronous code. First of all, there are number of maximum concurrent requests, and if you exceed them heavily, page will be slow (had this problem and add waiting explicitly through promises).

Also, another possibility is that some function actually loaded data, and started some heavy manipulation on the page (changing DOM, forcing recalculation of styles, adding animations, etc). Each case should be investigated, but I recommend to start looking at the network tab in the chrome console.

score 0 · Answer 2 · answered Nov 07 '16 at 09:29

the simplest solution is to add a timeout function in ready method, this will complete your page load without depending on these functions.

$(document).ready(function()}{
 setTimeout(function(){
   getNewLetterContent();
   getVideoComplition();
   getRssFeed();
   intializeEvents();
 },8000);
});

Ajax calls increase the website load time

2 Answers2