Synchronous and asynchronous code change loading in Optimizely Web Experimentation

  • Updated
This topic describes how to change the timing of variation loading to asynchronous, and 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 Web Experimentation offers the option to load variation code asynchronously. 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.

To load components asynchronously, Optimizely Web Experimentation will include two snippets instead of the standard single snippet. The project snippet will load synchronously, and when 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

Use asynchronous loading for 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.

  3. Scroll down until you see Timing.

    timing.png

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

    timing-expanded.png

Asynchronous loading 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. Learn more about synchronous and asynchronous snippet loading, including the strengths and drawbacks of both load types.