Embedding Player V4: Optimizing for Player Load
Was this article helpful?
When the video content is central to the experience of a website, customers might benefit from giving priority to player resources during page load so that playback can start as soon as possible. Taking this approach might have an impact on the load time of the page, but this might be preferred in some cases.
- 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
- You care about how your 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
Optimization: Declare player resources at the top of the page
This approach will make sure that player resources are loaded as early as possible, with the downside of delaying the load of the rest of the page until this process is complete. The increased page load time will affect new users more severely, since returning visitors will benefit from the browser’s cache. It’s important to remember that cached scripts are still expensive to parse and execute, so even cached scripts will block rendering to an extent.
<head> <title>Ooyala Video Test</title> <meta charset="UTF-8"> <!-- Declare stylesheet before scripts --> <link rel="stylesheet" href="//player.ooyala.com/static/v4/candidate/latest/skin-plugin/html5-skin.min.css"/> <script src="//player.ooyala.com/static/v4/production/core.min.js"></script> <script src="//player.ooyala.com/static/v4/production/video-plugin/bit_wrapper.min.js"></script> <script src="//player.ooyala.com/static/v4/production/video-plugin/main_html5.min.js"></script> <script src="//player.ooyala.com/static/v4/production/skin-plugin/html5-skin.min.js"></script> <script src="//player.ooyala.com/static/v4/production/ad-plugin/google_imas.min.js"></script> </head>
Note that the example above is using multiple scripts, but the same recommendation would apply when using the standard embed, as shown below.
<head> <title>Ooyala Video Test</title> <script src="https://player.ooyala.com/core/<playerid>?plugins=main,bm,ima,disc"></script> </head>