It's been 2 years now that Google made page speed a ranking factor to determine its position in the SERP. The faster a page loads compared to its competitors, the higher it will end up in Google's search result list. If you have ads on your page, asynchronous loading will play a significant role to achieve that goal.
Can you imagine the amount of time we're wasting here? While we may speak of a delay in the order of milliseconds, it's important to realize that Google does notice the difference. Even a 100 milliseconds delay may have a significant impact on your SERP rankings if it takes too long for your page to load. Your users may also be frustrated to see a white page, and may leave without coming back.
Asynchronous loading, on the other hand, does not block page render and allows the browser to continue processing the page and download other files at the same time. This approach makes much better use of the CPU, and will speed things up significantly.
Are you a publisher with ads on your page? If you're still using an old ad server that uses synchronous ad tags, you'll find out quickly. Google developed a tool to let you test the speed of your pages yourself.
If that script was an ad tag, this will mean that the user will not be served an ad. If you're a self-respected publisher, you don't want to miss out on opportunities.
To proof that async ad 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. What we're interested in is the DOMContentLoaded() event fired by the browser. This event is shown as a blue line in the screenshots here below.
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 to interact with before the ad has been downloaded, after only 36 milliseconds. This means that the user can already use the page after a few milliseconds, while the script is being downloaded and executed in the background.
Because it's a lazy method to make sure script A is loaded before script B is executed. That's it. Really. It's embarrassing to see there are still ad tech vendors who are using old technologies from the 90s. Any modern ad server, like AdGlare, will use an asynchronous approach to load ads as fast as possible without slowing down the page. It's a win for publishers, a win for users and a win for your CTR.
In general 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:
The second method is to append the script to a DOM element:
Whenever you add an ad tag to your page, make sure to verify it's loaded asynchronously.