---
updatedAt: 2026-07-27T10:45:19.000Z
agentTools:
  projectIndex: https://developers.dailymotion.com/v0/llms.txt
---

# 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

<Callout icon="🚀" theme="default">
  ### 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.
</Callout>

<br />

# 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.**

<br />

# 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:

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

<br />

## 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).

<br />

## 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.

<br />

|                                | ❌ **Without**`defer`                                 | ✅ **Using**`defer`**&#x20;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                                |

<br />

### 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:

```javascript
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.
```

<br />