# CLS causé par les publicités et les embeds : réserver l’espace à l’avance

> Iframes publicitaires, bannières de cookies, embeds sociaux : identifier les décalages visuels qu'ils provoquent et les corriger avec aspect-ratio et placeholders.

- Auteur : Clément Hadrot
- Publié le : 2021-07-21
- Mis à jour le : 2021-07-21
- Catégorie : Performance
- URL : https://wpmoderne.dev.wordpress-developpement.fr/performance/cls-publicites-embeds-reserver-espace/

## L’essentiel

- Un iframe publicitaire sans dimensions réservées décale tout le contenu sous lui
- aspect-ratio résout le cas des embeds à ratio fixe
- Une bannière de cookies doit se superposer, jamais pousser le contenu

**Symptôme.** Un éditeur de contenu nous a signalé une chute de trafic après l'ajout de deux nouveaux emplacements publicitaires sur ses articles. En creusant le rapport Search Console, le score CLS de ces pages était passé de 0,04, très correct, à 0,34, largement au-dessus du seuil de 0,1 recommandé. Le contenu éditorial n'avait pourtant pas changé : la cause venait entièrement des nouveaux emplacements publicitaires et d'un embed social déjà présent.

## Diagnostic : identifier précisément l'élément responsable

Le rapport d'expérience utilisateur de Chrome (CrUX) via PageSpeed Insights indique le score global, mais pas l'élément fautif. Pour cela, l'onglet Performance des outils de développement Chrome, avec l'option « Layout Shift Regions » activée, surligne visuellement chaque décalage au moment où il se produit pendant l'enregistrement d'une session.

Sur ce dossier, deux causes distinctes sont apparues : l'iframe publicitaire n'avait aucune dimension définie avant le chargement de son contenu réel, et l'embed Twitter intégré en fin d'article se dimensionnait après coup, une fois son script externe chargé.

## Correctif : réserver l'espace des iframes publicitaires

La régie publicitaire ne connaît généralement le format exact du visuel qu'au moment de la requête d'enchère, mais un emplacement standard suit presque toujours un format connu à l'avance (300x250, 728x90, etc.). Réserver ce format en CSS avant même que la régie ne réponde élimine le décalage :

```
.wpm-emplacement-pub {
  min-height: 250px;
  width: 300px;
  display: block;
  background-color: #f5f5f5;
}

.wpm-emplacement-pub iframe {
  width: 100%;
  height: 100%;
}
```

> L'essentiel à retenir : Un iframe publicitaire sans dimensions réservées décale tout le contenu sous lui ; aspect-ratio résout le cas des embeds à ratio fixe ; Une bannière de cookies doit se superposer, jamais pousser le contenu

## Correctif : aspect-ratio pour les embeds à ratio fixe

Pour les embeds vidéo ou sociaux dont le ratio est connu à l'avance (16:9 pour une vidéo, souvent variable pour un tweet), la propriété CSS `aspect-ratio` réserve l'espace correct sans connaître la hauteur exacte en pixels :

```
.wpm-embed-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.wpm-embed-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
```

Pour un embed social dont la hauteur varie selon le contenu (un tweet avec ou sans image), `aspect-ratio` ne suffit pas à lui seul. Une valeur de `min-height` approximative, basée sur une moyenne observée, limite le décalage sans le supprimer totalement, en attendant que le script d'embed ajuste la taille finale.

## Correctif : la bannière de consentement ne doit jamais pousser le contenu

Une bannière de cookies qui s'insère en haut de page, avant le contenu, pousse tout ce qui suit vers le bas au moment de son apparition, ce qui compte pleinement comme un décalage de mise en page. La solution consiste à positionner la bannière en superposition (`position: fixed`) plutôt qu'en flux normal :

```
.wpm-bandeau-cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
```

Une bannière en superposition ne décale rien, même si elle apparaît après le rendu initial de la page.

## Prévention

- Réservez systématiquement l'espace de tout élément dont le contenu final arrive après coup (publicité, embed, widget tiers).
- Préférez toujours une superposition à un élément en flux normal pour les bannières et popins.
- Testez le CLS avec throttling réseau activé : un décalage discret sur fibre devient souvent flagrant sur une connexion mobile plus lente.
- Revérifiez le CLS après chaque ajout d'un nouvel emplacement publicitaire ou d'un nouvel embed, pas seulement au lancement du site.

> Réserver l'espace n'est pas une astuce technique secondaire : c'est simplement dire au navigateur, avant qu'il ne le découvre lui-même, ce qui va s'afficher.

## En résumé

Sur ce dossier, les deux correctifs CSS ont ramené le score CLS de 0,34 à 0,03, sans toucher au code de la régie publicitaire ni à celui du script d'embed. La leçon générale reste la même partout : tout élément dont la taille finale n'est pas connue immédiatement doit recevoir un espace réservé approximatif, faute de quoi il décalera le contenu à son arrivée.