Why is asynchronous ad loading so important?

Author:
Keywords: Asynchronous, Async JavaScript, ad script, ad server, AdGlare
The time has arrived that a site's loading time became a ranking factor in Google's search algorithm. The faster your website loads compared to your competitors, the higher it will end up in Google's result list. In-depth studies discussing this topic can be found here, here and here. Every time you link to a JavaScript file in your website's code, it's important to consider how you do that. Especially when this JavaScript file is loaded from a third-party server. AdGlare loads ad code on your website asynchronous, keeping your page load time at maximum levels. Here I'll discuss with you why asynchronous JavaScript loading is so important.

Synchronous versus Asynchronous

Simply put, you can state that with synchronous loading, page elements are loaded in a 'serialized' way. By default, synchronously loaded JavaScript files block page render and waits for the file to be completely downloaded and executed. While we may speak of a delay in terms of 100-300 ms, it's important to consider that Google does see a difference, as well as your audience who may experience a slight delay in page loading. Asynchronous loading on the other hand does not block page render and allows the browser to continue load elements while the JS file is being downloaded. This significantly speeds things up, especially when the JS file is loaded from a remote server.

Live Experiment #1: loading ad code synchronously

"You can't manage what you don't measure", is an old management adage that is accurate up until today. Well, there we go. Let's see what happens with your page load time if we were to load ad code synchronously. In this example, the server is set to spit out the JS code with a slight artificial delay to allow better comparison of results. As you can see in the screenshot below, page render does not start until the complete JS file has been downloaded and parsed. More importantly, let's look at the time it takes before the DOMContentLoaded() event fires (the blue line). With synchronous ad loading, the DOMContentLoaded event fires after 122 ms. Only from that moment on the page is displayed to your visitor.
Ads loaded synchronously. Blue and red lines almost together. DOM ready after 122 ms. The wrong way.


Live Experiment #2: loading ad code asynchronously

Now look at the difference in DOM load time when the JS file is set to be loaded asynchronously. The DOMContentLoaded() event is fired before the JS file is being downloaded, already after 36 ms. This means that page render starts at 36 ms, allowing for DOM interaction with your visitor virtually instantly, as well as a sensation of fast loading pages. AdGlare loads you ads asynchronously in this way described here, which does not delay page loading.
Ads loaded asynchronously like AdGlare does. Blue line way ahead of the red one. DOM ready after 36 ms. The good way.


A few notes

  • As you may have read in the text, JS loading is artificially delayed by adding a usleep(60000); to its code that allows for better comparison.

Share this article




Permalink