Embedding Player V4: Optimizing for Page Load

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

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

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.