Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

Synchronous and asynchronous code change loading

This article is about Optimizely X. If you're using Optimizely Classic, check this article out instead.
 
relevant products:
  • Optimizely X Web Experimentation

THIS ARTICLE WILL HELP YOU:
  • Change the timing of variation loading to asynchronous
  • Understand when to use asynchronous code loading, and when not to 

In some cases, you may need to run multiple experiments on the same page, where one of those experiments includes components that are slow to load. For example, a media company may want its home page to contain multiple variations, one of which is “below the fold” and includes streaming video.

In this instance, loading all variations synchronously would delay all variation code from loading until the high-bandwidth, resource-intensive video is ready. This could slow down the site's loading time and induce flashing.

To overcome this, Optimizely offers the option to load variation code asynchronously instead. This allows the more visible components on the page to load synchronously first, and then loads any resource-intensive components further down the page without forcing users to wait to interact with your page.

In order to load components asynchronously, Optimizely will include two snippets instead of the standard single snippet. The project snippet will load synchronously, and once that is complete, the second snippet will begin to load the asynchronous variation code. This way, you can keep the page loading quickly, and the things that are going to take longer to execute but are not critical to the initial experience can load in the background. This gives you more power to control when components load.

When to use asynchronous loading

Asynchronous loading is best suited to variations that are not immediately visible when the page first loads. Examples include:

  • Placing the variation "below the fold," as in the example described above

  • Including the variation in a modal that is not visible to users until they take a specific action, like clicking a button

Switch loading settings between synchronous and asynchronous

  1. From the Experiments tab, click Variations.

  2. Select the variation you want to load asynchronously. Under Changes, select the change you want to edit, or create a new one.
    Next, scroll down until you see the Timing button.

  3. Click the button to change the loading method from synchronous to asynchronous, or vice versa.

Asynchronous loading is not encouraged. It may be required when the variation code includes a lot of heavy lifting and might affect other variations and experiments running on the same page, and its use should be limited to those instances.