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 (300×250, 728×90, 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%;
}
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.
