- 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.
To load components asynchronously, Optimizely 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
From the Experiments tab, click Variations.
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.
Click the button to change the loading method from synchronous to asynchronous, or vice versa.
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.