Load synchronous and asynchronous code changes in Optimizely Web Experimentation

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Personalization
  • Optimizely Performance Edge Available for Edge

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.

When to use asynchronous loading 

Asynchronous loading is best for variations 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 not visible to users until they take a specific action, like clicking a button.

Switch between synchronous and asynchronous

      1. Experiments and click Variations.
      2. Select the variation you want to load asynchronously.
      3. Go to Changes and select the change you want to edit or create a one.
      4. Go to the Timing section.

        timing.png

      5. Change the drop-down list to Asynchronous.

        timing-expanded.png

Timing changes made with the Visual Editor apply only to this specific element change. You must change the timing setting for every variation to load all asynchronously.

Custom code

By default, custom code is loaded synchronously. 

  1. Go to the variation.

  2. Open the JavaScript or CSS editor. 

  3. Change Synchronous timing to Asynchronous timing.  

  4. Click Save & Apply.

How it works

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:

  • The snippet has async added to the JavaScript tag.

  • The directory changes from cdn.optimizely.com/<your project ID>.js to cdn.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>

example_2_snippet.png

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