Load snippet synchronously and asynchronously

  • Updated
  • Optimizely Web Experimentation

A/B testing scripts can be loaded in two ways:

  • Synchronously – where scripts are loaded sequentially, one after another, starting with the <head> tag.
  • Asynchronously – where some scripts can be loaded simultaneously.

Loading a script asynchronously has the advantage of not slowing the page down, but it can cause a "flicker" on the page, where the original page loads, followed shortly by the variation page.

Optimizely Web Experimentation uses a synchronous snippet to prevent flickering and a balanced content delivery network (CDN) system to make sure the impact on the page is minimized.

A web page consists of a head and a body. Everything in the body is rendered by the browser while the head is used to load external resources (such as scripts and style sheets) and to add metadata to the page. When the page loads in a browser, the browser starts reading the HTML from top to bottom. The head section has a special characteristic: normally, the browser will not show anything (a white screen) until all the external resources are fully loaded. This is called synchronous loading.

However, you could override this functionality to make certain elements load without waiting for all external resources to load. This is known as asynchronous loading.

Here is what a page's <head> tag looks like when all resources are loaded in a synchronous manner:

<html>
   <head>
      <script src="1.js" />
      <script src="2.js" />
      <script src="3.js" />
      <script src="4.js" />
      <script src="5.js" />
   </head>
   <body>Hello World!</body>
</html>

When all resources in the head are synchronous, the elements will load in order, like this:

time-vs-script.png

Here is what a page's <head> tag would look like when all resources are loaded in an asynchronous manner:

<html>
   <head>
      <script src="1.js" />
      <script src="2.js" />
      <script src="3.js" />
      <script src="4.js" />
      <script src="5.js" />
   </head>
   <body>Hello World!</body>
</html>

When a script is asynchronous, it will load simultaneously with other scripts, like this:

time-vs-script-2.png

You can see in the diagram, that scripts 2 and 3 can load at the same time, which speeds up the overall loading of a page. However, the browser will not wait until the snippet is done loading before displaying the elements in the body to a visitor, which can lead to flickering.

On the plus side, loading asynchronously prevents any delay in page-load because the page attempts to load all elements simultaneously, including your A/B testing scripts. However, when an A/B testing script is loaded much later than the page, a flicker of the page can occur when the original page loads, followed by the variation. This is not desirable, especially when the loading of the A/B testing script is taking more time than is acceptable.

So in the asynchronous example above, a visitor might see "Hello world" in the browser before script 2 is done loading. If the A/B testing script is not loaded before the webpage is shown, it will result in a flicker. Flickering means that the variation loads on the page shortly after the original page displays. This makes the outcome of your experiment less reliable and could compromise your visitor experience.

In Optimizely Web Experimentation, you can load the snippet synchronously and load variations asynchronously.  See Use timing changes to load elements on the page asynchronously in Optimizely Web Experimentation.

For information about how to implement the Optimizely Web Experimentation Snippet, see Implement the one-line JavaScript snippet before reading this article. See also Custom snippets for information about how to load variation code asynchronously within in a synchronous snippet.