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.
❌ Withoutdefer | ✅ Usingdefer on other scripts | |
|---|---|---|
| HTML parsing | Stops every time a <script> is encountered | HTML parsing happens without interruption |
| Script download | Starts when script tag is reached, blocking parsing | Scripts are downloaded in parallel during parsing |
| Script execution | Happens immediately, blocking further HTML build | Happens after HTML is fully parsed |
| Player container | May be delayed in being built and displayed | Built quickly, Player container ready sooner |
| Player script load | Competes with other blocking scripts | As the player isn't defered, it's prioritized, less competition for network & CPU |
| Time to first frame (TTFF) | Slower — users wait longer to see video | Faster — video starts sooner, smoother UX |
| Perceived page speed | Potential more loadings in your page | Feels faster, interactive sooner |
| Risk of conflicts | Higher, due to unpredictable execution order | Lower, 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.Updated 25 days ago
