Ad Server
Simplified.
Ready in 30 seconds

Why is asynchronous ad loading so important?

Written by: Stephen Published: Last Modified:
The time has arrived that page speed 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. If you have ads on your page, asynchronous loading plays a great role here. In-depth studies discussing this topic can be found 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 you're loading this file from a third-party server. Here I'll discuss with you why this is so important. But first...

Synchronous vs Asynchronous: What's the difference?

Let's take a look at the differences. Synchronous loading means in this context: one after another. Synchronously loaded JavaScript forces the browser to sit and wait for the file to be completely downloaded and executed. Can you imagine the amount of time we're wasting here? The browser literally does nothing but downloading that file, while it could have done things like painting a table or loading CSS stylesheets. While we may speak of a delay in the order of 100-500 ms, it's important to realize that Google does notice the difference and may lower your SERP rankings if you load a multiple files synchronously. Your visitors may also experience a delay in page loading if multiple resources are loaded this way. Google developed a tool to let you test the speed of your pages - a link can be found at the bottom of this article. Asynchronous loading, on the other hand, does not block page content and allows the browser to continue to process the page and download multiple other assets at the same time. This approach significantly speeds things up.

So, what's the catch...?

The idea is that other JavaScript codes downstream are not dependent on the execution of the asynchronally loaded JavaScript file. jQuery is a good example of a file that should be loaded first, as codes down the page may likely use it. In the ad tech industry however, ads usually have no dependencies so they can (and should) be loaded asynchronously. It's also important to mention that asynchronously loaded files cannot use the JS function document.write(); in their codes. Usage of these functions was already discouraged over time, and Chrome started blocking them on slow networks. This shouldn't be an issue anymore here in 2018.

Evaluating Performance: May the best method win.

To proof that async tags allows page content to load faster, I'm going to show you two screenshots of an experiment we've set up to support this claim. Performance is measured by the amount of time (in milliseconds) after which the browser reports that the page is ready. Chrome's DevTools provides the essential information here, and what we're interested in is the DOMContentLoaded() event fired by the browser. This event is depicted as a blue line in the screenshots here below.

Synchronous Ad Loading

In this test, we're loading a JavaScript file synchronously followed by 3 images. The browser downloads, waits and executes the JavaScript first, and then moves on to download the images. As you can see by the blue line, the page is ready after 122 milliseconds. That may not look like a bad score, however, things may slow down significantly depending on the quality of the user's internet connection and the number of synchronously loaded files.
synchronous ad loading performance
File loaded synchronously. Blue line indicates DOM ready after 122 ms. The wrong way.

Asynchronous Ad Loading

Now, look at the difference in loading time when the file is set to be loaded asynchronously. The browser states that the page is ready before the JS file has been downloaded, after only 36 milliseconds. In theory, this means that the user can already interact with the page after a few milliseconds, while the JS file is being downloaded and executed in the background.
asynchronous ad loading performance
File loaded asynchronously. Blue line indicates DOM ready after 36 ms. The good way.

What's the bottom line?

Whenever possible, JavaScript files should always be loaded asynchronously if codes further down the page do not dependent on them. Especially in ad serving, it's imperative that you're loading ads this way to reduce page loading times. As a publisher, it not only improves user experience, it also helps to avoid being penalized by Google.

Do It Yourself: Creating async codes

Briefly, there are two methods to load a file asynchronously. The first one uses the HTML5 attribute async on a SCRIPT element. The advantage of this approach is that it's easy to implement with only one line of code:
<script async src='file.js'></script>

The second method is to add the JS file not via an element, but via JavaScript itself:
<script> (function () { var script = document.createElement(s); script.type = 'text/javascript'; script.async = true; script.src = 'file.js'; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(script, s); })(); </script>
Google Adsense ads are using the method above.


You may think: What are the advantages for ad serving?

Ad server companies (and others like Google Adsense) have stressed publishers to use async ad tags for a while now, due to their overall benefits. The main advantage is that it never blocks other parts of a web page, resulting in improved speed and performance. Especially mobile users will enjoy an improved user experience in case the ads fail to load.

But there's more... Asynchronally loaded ad tags opens up new technical possibilities, like:
  • Responsive Ads, by determining the width and height of the placeholder.
  • Lazy Loading Ads: showing a banner only when the user scrolls it in view.
  • Viewability Measurement. These metrics can be logged to determine if a user has actually seen the ad.


How to get Async Ad Serving Tags from AdGlare

If you use AdGlare as an ad server, you can get your async ad tags via the Tag Generator.
1 Click Zones and open the zone you want to generate the tag for.
2 Click the blue Tags button at the top right.
3 Use the asynchronous tag, usually listed first.
Asynchronous ad tags.

A Question for You...
Did you like this article? Tell your followers! Because they will likely appreciate that you share it...
Inspire Your
followers!


Permalink


We're Listening...
Found what you were looking for after reading this article? Are things missing?
Your feedback is highly appreciated! Thanks in advance ;)

External Resources