Load synchronous and asynchronous code changes in Optimizely Web Experimentation

You can use timing changes to load parts of your variation code asynchronously. You can load the visible components on the page synchronously and allow any resource-intensive components to load without forcing users to wait to interact with your page.

This is helpful when you need to run multiple experiments on the same page, with one of those experiments including components that load slowly. For example, a media company may want its home page to contain multiple variations. One is “below the fold” and includes streaming video. Another is a modal not visible to users until they take a specific action, like clicking a button.

If you load all variations synchronously, like above, the variation code is delayed from loading until the high-bandwidth, resource-intensive video is ready. This can slow down your site's loading time and induce flashing.

You can set up asynchronous loading for parts of the page using the Visual Editor or custom code.

Asynchronous loading is best for variations not immediately visible when the page first loads. Examples include:

By default, custom code is loaded synchronously. 

Optimizely generates a second snippet for the asynchronous loading. This snippet's ID matches your account number, which may differ from the number associated with the project snippet. The project snippet loads synchronously, and when complete, the second snippet begins to load the asynchronous variation code. 

This ensures that the page loads quickly. Changes that take longer to execute but are not critical to the experience can load in the background.

The following differences exist between the project snippet and the asynchronous snippet:

Asynchronous snippet:

Project snippet:

If any variation uses asynchronous loading, the second snippet is added to every URL until the experiment using asynchronous loading is paused or archived.