Why is asynchronous ad loading so important?
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.
File loaded synchronously. Blue line indicates DOM ready after 122 ms. The wrong way.
Asynchronous Ad LoadingNow, 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.
File loaded asynchronously. Blue line indicates DOM ready after 36 ms. The good way.
Do It Yourself: Creating async codesBriefly, 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>
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 AdGlareIf 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.
Permalink for Bloggers
This article stays online on the following URL: