Embedding Player V4: Optimizing for Page Load

Was this article helpful?

There will be cases where a customer might be more concerned with overall load time of their website than with how fast the player is presented to the end-user. In such cases it might make sense to optimize for page load and treat player assets as secondary resources.

When to use
  • You care most about how the page scores on PageSpeed insights, Lighthouse or similar page performance tools
  • The video content is not part of the critical rendering path (i.e. below the fold of the page)
  • The video content is secondary to the overall purpose of the page
  • The video content is loaded dynamically after user interaction
When to avoid
  • The video content is shown above the fold
  • The video content is critical to the experience of the page
  • The video content is configured to autoplay

Optimization: Load player resources asynchronously

Modern browsers support loading scripts asynchronously through the “async” attribute. Scripts loaded asynchronously will begin downloading immediately after being encountered, but they will not block the parsing or rendering of the html document while the download is in progress. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event.

Note: Script that are loaded asynchronously are not guaranteed to be executed in the order that they were declared. It is of particular importance to be aware of this when working with the Ooyala player, since the order of the video plugins determines the priority that the player core will give them when choosing a plugin that can handle the current stream. For this reason, the use of the “async” attribute is only recommended when using the standard embed.
Pros
  • Parsing of the html document will not get blocked while the script is being downloaded
  • Might help give priority to other critical elements in the page while also allowing player resources to be loaded as early as possible
Cons
  • Script execution order is not guaranteed
  • Not recommended when loading several player plugins scripts individually
  • The network request will still happen as soon as the script is encountered, so this will compete with other network resources
Example:
<!DOCTYPE html>
<html>
<head>
  <title>Ooyala Video Test</title>
  <meta charset="UTF-8">
  <script>
    var playerParams = {
      pcode: '9odGgyOhmvtSyMbOojUa85Ug4if_',
      playerBrandingId: 'e4c115a4f4e74866817e1c7fa60dfc39',
    };
    // Note: This function will be called after the player script is loaded,
    // so it needs to be declared before it
    window.initOoyalaPlayer = function() {
      OO.ready(function() {
        window.player = OO.Player.create('oo-player', 
'5kbmU5MzE6ivgWkobhscmQwGuD7fyNIa', playerParams);
                    
       });
     };
  </script>
  <script
    async
                    
src="//player.ooyala.com/core/e4c115a4f4e74866817e1c7fa60dfc39?plugins=bm,main,ima,pl"
   onload="initOoyalaPlayer()">
  </script>
</head>
<body>
  <div class="above-the-fold-content">
    <!-- Content at the top of the page would be here -->
  </div>
  <div class="below-the-fold-content">
    <div style="width:640px" id="oo-player"></div>
   </div>
</body>
</html>

Optimization: Defer player scripts

Similar to the “async” attribute described above, the “defer” attribute will cause a script to be downloaded immediately without blocking the parsing of the html document, with the difference that the script execution will begin until after the page is loaded. Once again this approach is only useful if the video content is secondary to the user experience of the page. Script loaded with the “defer” are guaranteed to be executed in order except on IE9 and below.

Pros
  • Parsing of the html document will not get blocked while the script is being downloaded
  • Might help give priority to other critical elements in the page while also allowing player resources to be loaded as early as possible
Cons
  • The network request will still happen as soon as the script is encountered, so this will compete with other network resources
  • Player initialization will occur after page load
Example:
<!DOCTYPE html>
<html>
<head>
                    
  <title>Ooyala Video Test</title>
  <meta charset="UTF-8">
  <script>
   var playerParams = {
     pcode: '9odGgyOhmvtSyMbOojUa85Ug4if_',
     playerBrandingId: 'e4c115a4f4e74866817e1c7fa60dfc39',
   };
   // Note: This function will be called after the player script is loaded,
   // so it needs to be declared before it
   window.initOoyalaPlayer = function() {
     OO.ready(function() {
      window.player = OO.Player.create('oo-player', 
'5kbmU5MzE6ivgWkobhscmQwGuD7fyNIa', playerParams);
      });
    };
  </script>
  <script
    defer
                    
src="//player.ooyala.com/core/e4c115a4f4e74866817e1c7fa60dfc39?plugins=bm,main,ima,pl"
    onload="initOoyalaPlayer()">
   </script>
</head>
<body>
  <div class="above-the-fold-content">
    <!-- Content at the top of the page would be here -->
  </div>
  <div class="below-the-fold-content">
    <div style="width:640px" id="oo-player"></div>
  </div>
</body>
</html>

For more information about the “async” and “defer” attributes please see: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

Optimization: Load player resources at the end of the body tag

This is a simple tried and true optimization that will allow the rest of the page to be loaded and parsed before the player resources. This approach makes sense when the video content is not the main focus of the page, is revealed only after user interaction, or is significantly below the fold of the page.

Example:
<!DOCTYPE html>
<html>
<head>
  <title>Ooyala Video Test</title>
  <meta charset="UTF-8">
</head>
<body>
  <div class="above-the-fold-content">
     <!-- Content at the top of the page would be here -->
  </div>
  <div class="below-the-fold-content">
     <div style="width:640px" id="oo-player"> </div>
  </div>
  <!-- Player resources are right at the end of the body tag -->
  <script src="//player.ooyala.com/core/e4c115a4f4e74866817e1c7fa60dfc39?plugins=bm,main,ima,pl"> </script>
  <script>
    var playerParams = {
      pcode: '9odGgyOhmvtSyMbOojUa85Ug4if_',
      playerBrandingId: 'e4c115a4f4e74866817e1c7fa60dfc39',
    };
    OO.ready(function() {
      window.player = OO.Player.create('oo-player', 
'5kbmU5MzE6ivgWkobhscmQwGuD7fyNIa', playerParams);
    });
  </script>
</body>
</html> 
https://help-ooyala.brightcove.com/sites/all/libraries/dita/en/video-platform/reference/pbv4_embed_optimizing_pageload.html