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

Use timing changes to load elements on the page asynchronously

This article is about Optimizely X. This feature is not available in Optimizely Classic.
 
relevant products:
  • Optimizely X Web Experimentation 
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

THIS ARTICLE WILL HELP YOU:
  • Customize how your variation code loads on the page
  • Specify that parts of your variation code will run asynchronously 

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.

Loading all variations synchronously in the above case delays variation code 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 enables you to use timing changes to load parts of your variation code asynchronously.

We strongly recommend loading 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.

We strongly recommend synchronous loading as a best practice. Asynchronous loading may be required in certain cases -- when the variation code includes a lot of heavy lifting and may affect other variations and experiments running on the same page. Its use should be limited to those instances.

You can set up asynchronous loading for parts of the page using the Visual Editor or custom code.

Visual Editor

For changes made using the Visual Editor, changes are loaded synchronously by default. In certain cases, when your variation code does heavy lifting below the fold, you can load certain changes asynchronously. We recommend that you use this technique sparingly.

To change to asynchronous loading:

  1. When making a change to an element, navigate to the left menu. Select Timing.

  2. In the drop-down under Timing, change the selection to Asynchronous.

    Screen Shot 2017-09-25 at 4.07.49 PM.png

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. To load changes made by custom code asynchronously. In certain cases, when your variation code does heavy lifting below the fold, you can load certain changes asynchronously. We recommend that you use this technique sparingly.

  1. Navigate to the variation.

  2. Open the JavaScript or CSS editor at the top of page. 

  3. Under Synchronous timing, change the selection to Asynchronous timing.  

  4. Click Save & Apply.

    Screen Shot 2017-09-25 at 3.59.41 PM.png

How does it work?

When variation code is implemented asynchronously anywhere in a project, a second snippet is generated by Optimizely 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 will load synchronously, and once complete, the second snippet will begin to load the asynchronous variation code. 

This ensures that the page loads quickly -- and changes that take longer to execute but aren't critical to the initial experience can load in the background.

There are two distinctive differences 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 asynchronous loading is used by any variation, the second snippet will be added to every URL where the snippet is implemented until the experiment using asynchronous loading is paused or archived.