Loading Pipe.js in a Non-blocking Way

Putting the <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.js first. The slower the connection, the longer page rendering will be delayed.
If there are any issues with accessing pipe.js one 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 </body> tag. 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 PipeSDK object.

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.onRecordersInserted() or PipeSDK.insert()) needs to be initialized after window.onload triggers, as in the following 2.0 HTML example.

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.addpipe.com/2.0/pipe.css" />
    <script
      defer
      type="text/javascript"
      src="https://cdn.addpipe.com/2.0/pipe.js"
    ></script>
  </head>
  <body>
    <piperecorder id="custom-id" pipe-width="640" pipe-height="390" pipe-qualityurl="avq/360p.xml" pipe-accounthash="ACCOUNT_HASH" pipe-eid="j2HCiP" pipe-mrt="600" pipe-avrec="1"></piperecorder>
    <input type="button" class="btn" value="Record" id="recordbtn" />
    <script>
      function initializePipe() {
        PipeSDK.onRecordersInserted = function () {
          myRecorder = PipeSDK.getRecorderById("custom-id");
          myRecorder.onReadyToRecord = function (id, type) {
            console.log("onReadyToRecord");
            document.getElementById("recordbtn").onclick = function () {
              myRecorder.record();
            };
          };
        };
      }
      window.onload = initializePipe;
    </script>
  </body>
</html>

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.

Last Modified on October 12, 2023

Loading Pipe.js in a Non-blocking Way

Placing the script Tag at the Bottom of the body #

Adding the defer Attribute #

Placing the script Tag at the Bottom of the body

Adding the defer Attribute