Synchronous versus Asynchronous loading of Ascend.js

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:

Screen_Shot_2017-11-06_at_5.17.30_PM.png

  • Asynchronously, where some scripts can be loaded simultaneously. Below is an example of a network request diagram using asynchronous loading:

Screen_Shot_2017-11-09_at_2.17.45_PM.png

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:

<script src="//media.ascend.ai/c/XXXXXXXXX-X/ascend.js"></script>

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

Our CDN, CloudFront, for static assets has a global network to deliver the Ascend JavaScript file (of over 100 edge locations to). We deliver dynamic candidates from servers located in Europe, North America, South America and Asia. Ascend uses one of the fastest DNS Networks, Amazon Route 53.
The Ascend JavaScript file is downloaded in parallel with CSS and JavaScript files on your website. This process should take up to ~100ms for HTTP sites and ~150ms for HTTPS sites to complete and execution of the snippet is sub 50ms.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk