This article explains the difference between loading JavaScript synchronously and asynchronously on a web page. Tealium's best practice is to use asynchronous loading for all JavaScript tags and vendor code from within the <body> tag. Based on our experience, this provides the best compatibility with the greatest number of vendors.  This placement provides the greatest opportunity for all vendor tags to complete their tracking before the visitor navigates to the next page. 

Synchronous Loading

Synchronous loading occurs when the browser must halt the rendering of the page in order to complete the execution of JavaScript code. When the browser encounters a synchronous JavaScript tag, it blocks the page from rendering until the code execution completes. This is analogous to a slow­-moving truck in a one-­lane road that will slow down all the traffic behind it.

Modern websites have moved away from this method because it presents a direct risk to delaying page load time. This is demonstrated in the figure below where each bar represents a tag being loaded synchronously. You can see that each item is processed serially and a delay in any request would impact the entire load time.

sync_tags_chart.png

The downside associated with this method is that the entire site is blocked from loading until the tag fully loads. And while tag vendors put in place service level agreements around their delivery time, several factors could impact their performance. These include slow response time associated with vendors, introduction of unnecessary application servers in the Client-­Server hybrid model, slow Internet traffic, etc. If you are loading tags synchronously, we recommend that you make sure the vendor has a response time of 100 milliseconds (ms) or faster.

There are some valid use cases for synchronous tags, usually loaded in the <head>. For these cases, a second file is available called utag.sync.js. Learn more about installing utag.sync.js.

Asynchronous Loading

The modern method being adopted by the industry is to load tags asynchronously. In this method JavaScript code is processed in parallel to the rest of the page content. This means that even if a vendor tag is slow to respond or to load, it will not slow down the rest of the page. This is demonstrated in the figure below.

async_tags_chart.png

Using this approach, not only can separate JavaScript tags load independently from each other, the asynchronous method minimizes the impact of loading external JavaScript files on the page rendering process.

Example of loading the utag.js library asynchronously: 

<!-- Loading script asynchronously -->
<script type="text/javascript">
    (function(a,b,c,d){
    a='https://tags.tiqcdn.com/utag/{ACCOUNT}/{PROFILE}/prod/utag.js';
    b=document;c='script';d=b.createElement(c);d.src=a;d.type='text/java'+c;d.async=true;
    a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a);
    })();
</script>