Loading Pipe.js in a Non-blocking Way
<script> tag at the top of the page will block HTML parsing until
pipe.js is loaded. This is true for all external JS scripts loaded in this manner. This is undesirable in some cases:
- Over slow connections the page will take longer to start rendering because it has to download and execute
pipe.jsfirst. The slower the connection, the longer page rendering will be delayed.
- If there are any issues with accessing
pipe.jsone might have to wait for the request to complete before page rendering will start.
There are two ways to load
pipe.js in a non-blocking way. We will explore both variants below and why these variants are not part of the default embed code.
Placing the script Tag at the Bottom of the body
To prevent the browser from blocking the HTML page from parsing until
pipe.js is loaded and executed, you can place the
<script> tag at the bottom of the page just before the ending
pipe.js will be loaded and executed at the end without delaying any page element above them. The main page content is shown before
pipe.js starts loading.
Make sure to place any JS Events API or JS Control API code after the
<script> code for inserting
pipe.js in your page, including code that depends on
PipeSDK.onRecordersInserted(). This way, you ensure that the necessary dependencies, such as the
PipeSDK object, are loaded before executing any code that relies on it. Failure to do so will result in an
Uncaught ReferenceError: PipeSDK is not defined error in the browser console.
This variant does work with the 2.0 JS embed code, but the
pipe.js script needs to be loaded before any instruction is sent via the
Adding the defer Attribute
Another option is to include the
defer attribute in the
script tag that references
pipe.js. By adding this attribute, the loading is triggered right away but happens asynchronously (without blocking HTML parsing), and the execution of the script is deferred until after the page has completed parsing.
This approach allows the main content to be presented to visitors swiftly, just as placing the script at the bottom of the
body tag. This variant is slightly faster because
pipe.js loads in parallel. However, any kind of JS Events or JS Control API code (including any mention of
PipeSDK.insert()) needs to be initialized after
window.onload triggers, as in the following 2.0 HTML example.
For a more detailed explanation of how placing the
<script> tag at the end and using the
defer attribute affect script loading and HTML parsing check out this article.