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 asynchronouslyNow 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.