Qu'est-ce qu'un bon score CLS ?

0,1 ou moins est « bon ». Entre 0,1 et 0,25 nécessite une amélioration, et au-delà de 0,25 c'est « médiocre ». Le score est sans unité - c'est une somme de la distance parcourue par les éléments visibles, pondérée par la part du viewport qu'ils occupent.

Un décalage de mise en page compte-t-il toujours s'il se produit rapidement ?

Oui. Le CLS ne se préoccupe pas de la vitesse, seulement de la distance et de la surface - un décalage ultra-rapide qui déplace un grand élément ajoute le même score qu'un décalage lent. Les seuls décalages exclus sont ceux qui se produisent dans les 500 ms suivant une interaction utilisateur comme un clic ou un toucher.

Pourquoi mon CLS semble-t-il correct en local mais mauvais dans le rapport de Scanverra ?

Les tests locaux sur une connexion rapide chargent souvent les publicités, les polices et les embeds avant que vous ne remarquiez un décalage. Scanverra mesure la véritable séquence de rendu sur votre URL en direct, ce qui fait apparaître des décalages qui ne se manifestent que dans des conditions réseau réalistes.

Les en-têtes collants ou les bannières de cookies comptent-ils contre le CLS ?

Seulement s'ils repoussent du contenu existant après qu'il a déjà été rendu. Une bannière de cookies qui se superpose au contenu, ou une bannière pour laquelle de l'espace est réservé dès le premier rendu, ne compte pas - une bannière qui glisse et repousse le contenu de la page vers le bas, si.

Comment corriger le Cumulative Layout Shift (CLS)

Pourquoi votre page se décale

Presque tous les problèmes de CLS proviennent de l'une de ces trois sources :

Des images et iframes sans dimensions réservées. Si le navigateur ne connaît pas la taille d'une image avant son chargement, il affiche la boîte avec une hauteur nulle, puis fait basculer tout ce qui se trouve en dessous à l'instant où l'image arrive.
Du contenu injecté au-dessus du contenu existant. Les publicités, les bandeaux promotionnels et les bannières de cookies insérés dans le DOM après le rendu initial repoussent tout ce qui se trouve en dessous.
Des polices web qui reformatent le texte lors du swap. Une police de secours s'affiche d'abord, puis la vraie police se charge et remplace celle-ci avec une largeur/hauteur différente, reformatant chaque ligne qu'elle touche.

Comment identifier ce qui se décale

Les contrôles de performance de Scanverra notent le CLS directement à partir d'une véritable exécution Lighthouse sur votre URL en direct, en utilisant la même métrique cumulative-layout-shift sur laquelle reposent les données de terrain de Google. Lorsqu'il est élevé, Scanverra le signale comme un problème distinct - pas seulement un chiffre, mais un problème nommé - car une mise en page instable casse aussi autre chose : un agent IA ou un outil automatisé essayant de cliquer sur un bouton qui vient de se déplacer visera le mauvais élément.

Pour trouver l'élément précis responsable, le panneau Performance de Chrome DevTools enregistre des entrées « Layout Shift » avec le nœud exact qui a bougé et de combien - ouvrez-le, enregistrez un chargement de page, et repérez les marqueurs rouges de décalage de mise en page dans la piste Experience.

Comment le corriger

1. Réservez de l'espace avec des dimensions explicites

Chaque image, vidéo et iframe devrait déclarer sa largeur et sa hauteur (ou utiliser la propriété CSS moderne aspect-ratio) afin que le navigateur puisse allouer la bonne boîte avant l'arrivée de la ressource :

Des largeur/hauteur explicites réservent la boîte à l'avancetypescript

1<img
2  src="/product.webp"
3  alt="Wireless keyboard, top view"
4  width={640}
5  height={480}
6  loading="lazy"
7/>

Lorsque la taille exacte en pixels varie (un embed responsive, par exemple), utilisez plutôt le CSS :

aspect-ratio réserve l'espace sans dimensions fixes en pixelscss

1.video-embed {
2  width: 100%;
3  aspect-ratio: 16 / 9;
4}

2. Donnez au contenu injecté dynamiquement un emplacement de hauteur fixe

Si une bannière de cookies, un emplacement publicitaire ou un bandeau promotionnel doit être inséré après le rendu initial, donnez à son conteneur un min-height réservé dès le départ plutôt que de le laisser repousser le contenu à son arrivée - même une boîte de remplacement vide évite le décalage.

3. Faites correspondre les métriques de votre police de secours à la police réelle

Utilisez font-display: swap associé à une police de secours dont la hauteur x et la largeur moyenne des caractères sont proches de votre police réelle (des outils comme Fontaine ou un size-adjust manuel dans un bloc @font-face peuvent les faire correspondre), afin que le remplacement ne reformate pas visiblement la ligne.

4. N'insérez jamais de contenu au-dessus de la position de défilement actuelle de l'utilisateur

Si du nouveau contenu doit apparaître - une bannière « nouveaux articles disponibles », par exemple - insérez-le sous la ligne de flottaison ou exigez une action de l'utilisateur pour le révéler, plutôt que de l'injecter au-dessus de ce qui est déjà visible.

Comment Scanverra détecte les problèmes de CLS

Scanverra exécute une véritable passe Lighthouse sur votre URL en direct et lit la valeur réelle cumulative-layout-shift qui en résulte - la même exécution utilisée pour le LCP et le TTFB - et signale un problème dédié lorsqu'elle est élevée, avec une description liée à l'importance spécifique de l'instabilité de la mise en page pour tout ce qui (humain ou automatisé) tente d'interagir avec votre page.