Cumulative Layout Shift (CLS)
Le Cumulative Layout Shift (CLS) est un indicateur des Core Web Vitals qui quantifie à quel point le contenu visible se déplace de manière inattendue pendant la durée de vie d'une page. Il capture le problème du « contenu qui saute », lorsque les utilisateurs essaient d'appuyer sur un bouton qui se déplace à la dernière seconde.
Le Cumulative Layout Shift (CLS) est un indicateur des Core Web Vitals qui quantifie à quel point le contenu visible se déplace de manière inattendue pendant la durée de vie d'une page. Il capture le problème du « contenu qui saute », lorsque les utilisateurs essaient d'appuyer sur un bouton qui se déplace à la dernière seconde.
Pourquoi c'est important
Le CLS est un signal de classement Google confirmé et l'un des trois Core Web Vitals. Les seuils de Google : bon ≤ 0,1, à améliorer 0,1 à 0,25, médiocre > 0,25. Un CLS élevé nuit à la confiance des utilisateurs : les recherches de Google montrent que les pages avec un CLS > 0,15 présentent un taux de rebond supérieur de 24 %. C'est aussi le Core Web Vital le moins coûteux à corriger, car presque toutes ses causes ont une solution simple.
Comment le CLS est calculé
Score CLS = fraction d'impact × fraction de distance, additionné pour tous les décalages de mise en page inattendus survenus pendant la durée de vie de la page.
- Fraction d'impact : la portion de la fenêtre d'affichage affectée par l'élément qui se déplace (union avant + après).
- Fraction de distance : la plus grande distance parcourue par un élément, exprimée en fraction de la fenêtre d'affichage.
Depuis 2021, Chrome utilise le « CLS fenêtré » : seule la pire fenêtre de 5 secondes est comptabilisée, de sorte qu'une SPA de longue durée n'est pas pénalisée indéfiniment pour un seul mauvais moment.
Causes courantes
Images sans dimensions : un <img> sans attributs width/height oblige le navigateur à recalculer la mise en page lorsque l'image se charge.
Publicités et intégrations sans espace réservé : les emplacements publicitaires tiers insérés après le rendu initial repoussent le contenu vers le bas.
Polices web provoquant un FOIT/FOUT : lorsqu'une police personnalisée se charge, le texte se réorganise car la police de repli a des métriques différentes.
Contenu injecté dynamiquement : les widgets « Vous aimerez peut-être aussi », les bannières de cookies et les notifications apparaissant au-dessus du contenu existant.
Animations qui ne reposent pas sur transform : animer top ou left déclenche un recalcul de la mise en page ; animer transform ne le fait pas.
Comment corriger le CLS
Définissez des dimensions explicites sur les images et les vidéos : <img width="800" height="600"> ; le navigateur réserve l'espace avant le chargement du fichier.
Réservez l'espace des emplacements publicitaires : attribuez aux conteneurs publicitaires une min-height fixe afin que les publicités insérées ne repoussent pas le contenu.
Utilisez font-display: optional ou préchargez les polices web pour réduire le FOUT.
Insérez le nouveau contenu sous la ligne de flottaison ou lors d'une interaction de l'utilisateur, et non au-dessus du contenu existant.
Animez uniquement avec transform et opacity : ces propriétés ne déclenchent pas de recalcul de la mise en page.
Utilisez la propriété CSS aspect-ratio pour les médias responsives sans dimensions explicites.
Mesurer le CLS
Données de terrain : CrUX, rapport Core Web Vitals de Search Console, section données de terrain de PageSpeed Insights.
Données de laboratoire : Lighthouse, panneau Performance des Chrome DevTools. Notez que le CLS de laboratoire peut différer de celui du terrain, car les utilisateurs réels déclenchent des positions de défilement et des interactions différentes.
Le CLS est évalué sur le 75e centile des données d'utilisateurs réels ; ce sont donc les données de terrain qui comptent pour le SEO.
Sources: