A/B and experimentation testing scripts can be loaded in two ways:
- Synchronously, where scripts are loaded sequentially, one after another, starting with the <head> tag. Below is an example of a network request diagram (the time it takes to load content on a website) using Ascend synchronous loading:
- Asynchronously, where some scripts can be loaded simultaneously. Below is an example of a network request diagram using asynchronous loading:
Loading a script asynchronously can cause a "flicker" on the page, where the original page loads, followed shortly by the variation page. This is often referred to in the industry of conversion optimization as 'flashing of the original content.'
Ascend by default uses a synchronous snippet to prevent flickering and has invested heavily in an optimized content delivery system to make sure the impact on the page is minimized.
Loading Ascend asynchronously
Loading asynchronously will prevent any delay in pageload, because the page will attempt to load all elements simultaneously, including the Ascend script.
However, there is a major drawback: when an A/B testing script is loaded much later than the page, a flicker of the page can occur. This is where the original page loads, followed by the variation. This is not desirable, especially when the loading of the A/B testing script is taking more time than is acceptable.
When loading asynchronously, you may prefer simply not to load the experiment at all, rather than risking flicker. For instance, imagine that a visitor is reading an article, but the article changes after 5 seconds because the asynchronous snippet is finally done executing and an experiment is executed. To prevent a 5 second delay in execution, an asynchronous snippet is provided with a timeout of 1 second (default setting). If you would like to augment this default setting, please reach out to your support contact.
Setting the Ascend snippet to load asynchronously is fairly straightforward. The following example shows how you would add the async attribute:
Simply add the 'async' attribute before the "src" in the script above, like so:
<script async src="//media.ascend.ai/c/XXXXXXXXX-X/ascend.js"></script>
You should set this attribute for your custom Ascend snippet. Please reach out to your dedicated Solutions Engineer if you have any further questions.
Snippet Loading and Page Load Impact