Sync or Async JavaScript Tags – A User Experience Penalty

When it comes to deploying a JavaScript tag to your website, there are generally two main options available: you can load the code snippet Synchronously or Asynchronously.

Each vendor tries to argue one way or the other, depending on what they offer, but what’s in it for you? What are the pros and cons of each approach, and are there other options?

Let’s break it down.

The Performance Tax

Each JavaScript tag added to your website adds to your pages’ overall weight and load time, directly impacting the end user’s experience. No matter how tags are loaded, they add a performance tax that users have to pay.

Taken simply, a web page is a collection of resources and HTML content that needs to be loaded and rendered by the browser from top to bottom. The more resources, scripts, styling, imagery, HTML content and so forth that are on a page, the longer it takes before users can interact with the page.

How these resources are loaded directly impacts how your end users interact with your site. It’s a good idea to think about Google’s Core Web Vitals, and optimize for Time to Interactive (TTI) or Largest Contentful Paint (LCP) along the way.

Synchronous Tags = Hold and Wait

By loading your A/B testing tag synchronously, the web page has to wait for the tag to be loaded before it proceeds with rendering the rest of the page.

For end users, this means seeing a blank page, or empty content until the tag is finally loaded. Many A/B testing vendors suggest using this approach to avoid flicker, at the cost of slowing down the loading of the page:

Note that where the tag is loaded on the page – near the top or near the bottom of the page – has a direct impact on how the page gets loaded.

Asynchronous Tags = Flicker

By loading your A/B testing tag asynchronously, you allow the page to load and render without waiting for the tag to be fully loaded.

The downside to this approach is flicker: end users will see the original content loaded first, followed by flicker to show the new content once the tag is loaded.

What if I use a Tag Manager?

Using a tag manager, such as Google Tag Manager (GTM), is an easy way to deploy a new tag to your website. However, it introduces a new bottleneck: your A/B testing tag now needs to wait for the tag manager to load first, before it can load itself.

Almost as importantly, tag managers are often loaded near the bottom of the page, which is likely to accentuate flicker issues.

What alternatives exist?

Using an A/B testing platform that sits in the flow of traffic avoids the shortcomings of loading tags entirely. By transforming the web page before the page gets to your end users, there is no need to compromise on speed or flicker.

This unique approach enables client-side testing, page transformation, and server-side testing all under a single product, and avoids creating further silos in your organization.

Learn more about how SiteSpect can help you grow your business.

Relevant Article:

Why TTFB Is Not the Best Indicator of Site Speed