Performance and non-blocking deployment of the JavaScript libraries required by our products is increasingly important to Adobe Experience Cloud users. Tools like Google PageSpeed recommend that users change they way they deploy The Adobe libraries on their site. This article explains how to use the Adobe JavaScript libraries in an asynchronous fashion.
Often, libraries are loaded synchronously in the <head> tag of a page. For example:
<script src="example.js"></script>
By default, the browser parses the document and reaches this line, then starts to fetch the JavaScript file from the server. The browser waits until the file is returned, then it parses and executes the JavaScript file. Finally, it continues parsing the rest of the HTML document.
If the parser comes across the <script> tag before rendering visible content, content display is delayed. If the JavaScript file being loaded is not absolutely necessary to show content to your users, you are unnecessarily requiring your visitors to wait for content. For this reason, website performance benchmark tools like Google PageSpeed or Lighthouse often flag synchronously loaded scripts.
To load the JavaScript file asynchronously, add an async attribute to the <script> tag:
<script src="example.js" async></script>
This indicates to the browser that when this script tag is parsed, the browser should begin loading the JavaScript file, but instead of waiting for the library to be loaded and executed, it should continue to parse and render the rest of the document.
Although the goal is to display content to visitors faster, and asynchronously loading the JavaScript achieves that goal, asynchronous deployment requires careful consideration under certain circumstances.
As described above, in synchronous deployments, page rendering pauses while the Launch library is loaded and executed. This means that events that happen after the library is loaded (Page Bottom, DOM Ready, Window Loaded, etc) always reliably happen after the _satellite object is available.
In asynchronous deployments, the page rendering does not pause for the library to be loaded. This means that the sequence of events is less reliable and can even vary from one browser to another and even one page load to another depending on a number of factors (cached libraries, bandwidth, etc).
If you see things occuring out of order - or occuring in different order inconsistently - it is likely that you have some timing issues to work through.
Deployments that require precise timing may need to make more use of eventHandlers and direct call rules in order to make their implementations more robust and consistent.
Another consideration is that Launch has always provided a Page Bottom event type that allows users to fire a rule at the precise moment the bottom of the body tag is reached by the browser parser. Because the Launch runtime will likely finish loading after the page bottom has been reached, the Page Bottom event type may not fire associated rules at the time you may expect. For this reason, when loading Launch asynchronously, you should not use the Page Bottom event type. Instead, consider the Library Loaded, DOM Ready, Window Loaded, or other event types.
Launch provides a toggle to turn on asynchronous loading when creating an embed code when you configure an environment. You can also configure asynchronous loading yourself:
-
Add an async attribute to the
<script>tag to load the script asynchronously.For the Launch embed code, that means changing this:
<script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>to this:
<script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script> -
Remove any code you may have previously added at the bottom of your tag:
<script type="text/javascript">_satellite.pageBottom();</script>This code tells Launch that the browser parser has reached the bottom of the page. Since Launch likely will not have loaded and executed before this time, calling
_satellite.pageBottom()results in an error and the Page Bottom event type may not behave as expected.