CLS (Cumulative Layout Shift) : définition et seuils
Définition
En bref
Le CLS, ou Cumulative Layout Shift, mesure la stabilité visuelle d'une page pendant son chargement. Il additionne les décalages de mise en page inattendus, comme un bouton qui se déplace au moment du clic. En dessous de 0,1, le score est considéré comme bon par Google.
Le CLS fait partie des trois Core Web Vitals utilisés par Google comme signaux de classement depuis 2021. Contrairement au LCP, il ne s'exprime pas en secondes mais en score sans unité. C'est la métrique la plus frustrante pour l'utilisateur : rien n'énerve autant qu'un lien qui saute au moment où le doigt se pose sur l'écran. Un seuil dépassé se voit donc aussi bien dans vos statistiques que dans les retours de vos visiteurs.
Comment le CLS se calcule
Chaque décalage individuel se calcule en multipliant deux fractions : la fraction d'impact, c'est-à-dire la portion de la fenêtre affectée par le mouvement, et la fraction de distance, c'est-à-dire l'ampleur du déplacement rapporté à la taille de l'écran. Le CLS retient la pire fenêtre de décalages groupés observée pendant la vie de la page. Un seul gros décalage suffit donc à dégrader durablement le score.
Google classe les pages selon trois paliers, mesurés au 75e percentile des visites réelles sur 28 jours, mobile et ordinateur séparés : bon en dessous de 0,1, à améliorer entre 0,1 et 0,25, mauvais au-delà de 0,25. Le seuil de 0,25 est vite atteint dès qu'une bannière de consentement ou un encart publicitaire s'insère au-dessus du contenu déjà affiché. Sur mobile, l'effet est encore plus marqué, car la fenêtre visible est plus petite.
- Bon : CLS inférieur à 0,1.
- À améliorer : CLS entre 0,1 et 0,25.
- Mauvais : CLS supérieur à 0,25.
- Mesure de référence : 75e percentile des visites réelles, sur 28 jours glissants.
Les causes les plus fréquentes
Cinq causes couvrent la grande majorité des cas. Les images et vidéos sans attributs width et height, qui empêchent le navigateur de réserver l'espace. Les polices web chargées tardivement, qui provoquent un recalcul de la mise en page. Les contenus injectés dynamiquement, bandeaux de consentement et encarts publicitaires en tête. Les iframes de widgets tiers sans dimensions. Enfin les animations qui modifient des propriétés de disposition plutôt que des transformations.
Les correctifs sont peu coûteux. Déclarez systématiquement les dimensions ou un rapport d'aspect en CSS. Utilisez font-display: swap et préchargez les polices critiques. Réservez un conteneur à hauteur fixe pour tout élément chargé après coup. Préférez transform: translate() aux modifications de top et left. Enfin, insérez les bandeaux en superposition plutôt qu'en poussant le contenu vers le bas. Ces corrections tiennent généralement en une journée de développement, pour un gain immédiatement mesurable.
Erreurs de mesure et méthode DGL Agency
L'erreur classique consiste à valider le CLS sur un test de laboratoire unique. Un robot ne scrolle pas, ne refuse pas les cookies et ne déclenche donc pas les décalages que vivent vos visiteurs. Les données terrain, issues du rapport CrUX et de la Search Console, racontent une autre histoire. Autre piège : corriger le CLS de la page d'accueil et oublier les gabarits d'article ou de produit, qui reçoivent l'essentiel du trafic.
Nous traitons le CLS avec les autres métriques de vitesse, parce que les correctifs se recoupent. Le diagnostic part des données terrain, identifie les gabarits fautifs, puis liste les éléments responsables dans l'ordre de leur contribution au score. Vous pouvez lancer un premier relevé avec notre test PageSpeed gratuit avant toute discussion technique avec vos développeurs. Le relevé indique aussi quels gabarits traiter en premier, ce qui évite de corriger des pages sans trafic.
Un bandeau de cookies qui coûte 0,3 de CLS
Sur un site d'actualité locale, le bandeau de consentement s'insère en haut de page 900 millisecondes après le premier rendu et pousse tout le contenu vers le bas. La fraction d'impact atteint 0,9 et la fraction de distance 0,35, soit un décalage de 0,31 à lui seul. En passant le bandeau en superposition fixe, sans déplacement du contenu, le CLS mesuré au 75e percentile tombe de 0,34 à 0,04, et le gabarit repasse dans le vert en trois semaines.
Termes liés
- Core Web VitalsLes Core Web Vitals sont trois métriques définies par Google pour évaluer l'expérience réelle des visiteurs : le LCP pour la vitesse d'affichage, le CLS pour la stabilité visuelle et l'INP pour la réactivité aux interactions. Elles constituent un facteur de classement officiel depuis 2021.
- LCPLe LCP, ou Largest Contentful Paint, mesure le temps nécessaire pour afficher le plus grand élément visible d'une page : une image de bannière, un bloc de texte, une vidéo. En dessous de 2,5 secondes, Google considère le résultat comme bon. C'est l'indicateur principal de la vitesse perçue.
- Temps de chargementLe temps de chargement est la durée nécessaire pour qu'une page soit affichée et utilisable dans le navigateur du visiteur. En dessous de deux secondes, le résultat est considéré comme bon. Au-delà de trois secondes, plus de la moitié des visiteurs mobiles abandonnent avant d'avoir vu la page.
- Lazy loadingLe lazy loading, ou chargement différé, retarde le téléchargement des images, vidéos et iframes situées hors de l'écran jusqu'à ce que le visiteur s'en approche. Il s'active nativement avec l'attribut loading="lazy" et réduit nettement le poids du chargement initial d'une page.
Pour aller plus loin
L'outil gratuit associé
Mesurez gratuitement le CLS de vos pages, comparez le résultat mobile et ordinateur, et obtenez la liste des éléments qui provoquent les décalages les plus coûteux.