Optimize Player loading (Web)

The Dailymotion Player is a powerful solution that supports adaptive streaming, ad monetization, tracking, and more. To ensure the best performance and user experience, here are a few recommandations to optimize loading and performance

🚀

TL;DR

✔ Avoid 3rd party wrappers to keep full control.

✔ Preload the Player script to fetch it early.

✔ Minimize other scripts before the Player to avoid blocking.

✔ Use defer on non-critical scripts to speed up parsing.

✔ (Optional) Dynamically load non-critical scripts after the Player.


Avoid 3rd party wrappers

Do not use third-party solutions (like Google Ad Manager) to inject the Player. These can introduce extra dependencies, unpredictable loading times, or conflicts.

Always add the Player libraries and embed script directly inside the <body> section of your HTML document.


Prioritize Player loading

Use preload to fetch Player script early

Browsers load resources in a certain order: if your <script> tag is low in the HTML, or if it’s dynamically inserted, the browser only starts downloading it late, which delays loading.

By using preload, you tell the browser to start downoading this script as soon as possible, even if it's not yet needed in parsing order.

Place the following directive at the top of your <head> section to instruct the browser to fetch the Player script early:

<link rel="preload" href="https://geo.dailymotion.com/libs/player/{Player ID}.js" as="script">

Prepare the HTML page structure

Minimize other scripts before Player load

When a browser loads your page, it reads and executes each script it encounters. If there are many scripts loaded before your Player, they can delay the Player’s initialization.

If you have other scripts (analytics, widgets, extra libraries), they can slow down the Player if they run before it loads.

We invite you to move less critical scripts to the end of your HTML file, or load them after the Player is fully initialized (by using the apiready event triggered by the Player for example).


Optimize Script execution

Remove dependencies using defer attribute

When a browser loads a web page, it parses the HTML from top to bottom. By default, when it encounters a <script> tag without defer, the browser will stop parsing the HTML, download the script, execute it, and resume the HTML parsing.

If other scripts block the HTML parsing or the Player’s script execution, it might delay the Player loading and initialization which might increase the time to first frame.

When adding the defer attribute to your other scripts, the browser will parse the HTML completely without stopping, download scripts with defer in parallel in the background, and execute deferred scripts only after the HTML is fully parsed.

The HTML is parsed faster, so:

  • The Player container is ready sooner
  • The Player can initialize and signal apiready faster, improving time to first frame (TTFF).
  • You avoid race conditions and conflicts with other scripts that might modify the DOM or interfere.

WithoutdeferUsingdefer on other scripts
HTML parsingStops every time a <script> is encounteredHTML parsing happens without interruption
Script downloadStarts when script tag is reached, blocking parsingScripts are downloaded in parallel during parsing
Script executionHappens immediately, blocking further HTML buildHappens after HTML is fully parsed
Player containerMay be delayed in being built and displayedBuilt quickly, Player container ready sooner
Player script loadCompetes with other blocking scriptsAs the player isn't defered, it's prioritized, less competition for network & CPU
Time to first frame (TTFF)Slower — users wait longer to see videoFaster — video starts sooner, smoother UX
Perceived page speedPotential more loadings in your pageFeels faster, interactive sooner
Risk of conflictsHigher, due to unpredictable execution orderLower, as scripts execute after structure is ready

Load non-critical scripts dynamically

Some scripts don’t need to load on page load at all. They can be loaded after the page and the Player are fully ready, further reducing initial load time.

You can dynamically create and inject scripts using JavaScript once the page is loaded:

window.addEventListener("load", function() {
  var script = document.createElement("script");
  script.src = "some-noncritical-script.js";
  document.body.appendChild(script);
});

// window\.addEventListener("load", ...) waits until everything on the page is fully loaded (including images and the Player).
// Only then, it creates a new <script> element and appends it to the document, loading it without blocking anything else.