Sometimes, 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 is “below the fold” and includes streaming video. Another is a modal that's not visible to users until they take a specific action, like clicking a button.
If you load all variations synchronously like above, variation code is delayed from loading until the high-bandwidth, resource-intensive video is ready. This can slow down the loading time of your site and induce flashing.
To address this issue, Optimizely Web Experimentation allows you to use timing changes to load parts of your variation code asynchronously. You can load the visible components on the page synchronously, then allow any resource-intensive components further down to load without forcing users to wait to interact with your page.
You can set up asynchronous loading for parts of the page using the Visual Editor or custom code.
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
Visual Editor
For changes made using the Visual Editor, changes are loaded synchronously by default. When your variation code does heavy lifting below the fold, you can load certain changes asynchronously.
-
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.
-
Scroll down to the Timing section.
-
In the drop-down under Timing, change the selection to Asynchronous.
-
Click Save.
Timing changes made with the Visual Editor apply only to this specific element change. To load all changes made with the Visual Editor asynchronously, the timing setting must be changed for every selector change.
Custom code
By default, custom code is loaded synchronously.
-
Go to the variation.
-
Open the JavaScript or CSS editor at the top of page.
-
Under Synchronous timing, change the selection to Asynchronous timing.
-
Click Save & Apply.
How does it work?
When variation code is implemented asynchronously anywhere in a project, a second snippet is generated by Optimizely Web Experimentation to handle the asynchronous loading.
This snippet has an ID that matches your account number, which may be different than the number associated with the project snippet being used. The project snippet loads synchronously, and once complete, the second snippet begins to load the asynchronous variation code.
This ensures that the page loads quickly -- and changes that take longer to execute but are not critical to the initial experience can load in the background.
The following differences exist between the project snippet and the asynchronous snippet:
-
The snippet has
asyncadded to the JavaScript tag. -
The directory changes from
cdn.optimizely.com/<your project ID>.jstocdn.optimizely.com/public/<your account ID>/data/...
Asynchronous snippet:
<script type="text/javascript" async="" src="https://cdn.optimizely.com/public/1234567890/data/actions/53c5a77e0f660065a3ed2441f9d03d2d155de98d202b9a28dbc6f6f8c4ba4f6f.js"></script>
Project snippet:
<script src="https://cdn.optimizely.com/js/0987654321.js"></script>
If asynchronous loading is used by any variation, the second snippet is added to every URL where the snippet is implemented until the experiment using asynchronous loading is paused or archived.
<%= heading %>