CLS : comment mesure-t-on les décalages de mise en page ?
Vous allez toucher « Appeler », un bandeau apparaît, et vous touchez « Fermer » à la place. Le CLS mesure ce genre de mauvaise surprise.
Le CLS (Cumulative Layout Shift) est le score qui mesure la stabilité visuelle d'une page : il additionne les déplacements inattendus du contenu pendant la plus forte rafale de décalages observée. Selon web.dev, un CLS de 0,1 ou moins est bon, et un CLS supérieur à 0,25 est mauvais.
En bref
- Le CLS n'a pas d'unité : c'est un score, pas un temps.
- Bon : 0,1 ou moins. Mauvais : plus de 0,25.
- Score d'un décalage = fraction d'impact × fraction de distance.
- Les décalages dans les 500 ms suivant un clic ou un toucher sont exclus.
Que mesure le CLS ?
Web.dev décrit le CLS comme la mesure de la plus forte rafale de scores de décalage pour chaque décalage de mise en page inattendu survenu pendant la vie de la page [1]. Un décalage, c'est un élément visible qui change de position d'une image à l'autre sans que le visiteur l'ait demandé.
Contrairement au LCP et à l'INP, le CLS ne se compte pas en secondes ni en millisecondes. C'est un score sans unité, ce qui surprend souvent la première fois qu'on lit un rapport des Core Web Vitals [2].
Comment calcule-t-on le score d'un décalage ?
Chaque décalage reçoit un score égal à la fraction d'impact multipliée par la fraction de distance. La fraction d'impact est la part de la fenêtre touchée par les éléments instables sur deux images successives. La fraction de distance est la distance parcourue par ces éléments, rapportée à la plus grande dimension de la fenêtre [1].
Qu'est-ce qu'une fenêtre de session ?
Les décalages sont regroupés en fenêtres de session : une fenêtre réunit des décalages qui se suivent avec moins d'une seconde d'intervalle, et une fenêtre dure au plus cinq secondes. Le CLS d'une page est le total de la fenêtre qui obtient le score le plus élevé [1].
Ce mode de calcul évite qu'une longue visite accumule un score énorme simplement parce que la personne est restée longtemps sur la page.
Tous les déplacements sont-ils comptés ?
| Situation | Compté ? | Pourquoi |
|---|---|---|
| Une publicité pousse le texte vers le bas pendant la lecture | Oui | Décalage inattendu |
| Le contenu bouge dans les 500 ms après un toucher sur « Voir plus » | Non | Décalage attendu après une interaction |
| Le contenu bouge pendant un défilement | Oui | Le défilement n'est pas une interaction qui exclut le décalage |
| Une police téléchargée change la taille du titre | Oui | L'élément change de place sans action du visiteur |
Seules les entrées ponctuelles (toucher, clic, touche de clavier) excluent les décalages des 500 ms suivantes ; le défilement, le glisser et le pincement ne les excluent pas [1].
Quelles erreurs causent un mauvais CLS ?
- Insérer des images sans largeur ni hauteur : le texte saute quand elles arrivent.
- Afficher un bandeau de témoins ou de promotion qui pousse la page au lieu de la recouvrir.
- Charger un module d'avis clients ou une carte qui grandit après coup.
- Placer le bouton d'appel juste sous une zone qui change de taille.
- Ne tester que sur ordinateur, alors que l'écran étroit d'un téléphone amplifie chaque déplacement.
Pilotiko vérifie-t-il le CLS ?
Pilotiko n'annonce pas de mesure du CLS. Ses fonctions de visibilité disponibles portent sur le référencement naturel du site qu'il héberge : données structurées, plan du site, robots.txt et llms.txt, plus l'audit de votre site actuel.
Questions fréquentes
Qu'est-ce qu'un bon score CLS ?
Web.dev considère qu'un CLS de 0,1 ou moins est bon. Au-dessus de 0,25, il est mauvais ; entre les deux, il est à améliorer.
Pourquoi le CLS n'a-t-il pas d'unité ?
Parce qu'il multiplie deux fractions : la part de l'écran touchée et la distance parcourue rapportée à la taille de l'écran. Le résultat est un score, pas une durée.
Le bandeau de consentement aux témoins nuit-il au CLS ?
Seulement s'il déplace le contenu existant. Un bandeau qui se superpose à la page sans la pousser ne crée pas de décalage de mise en page.
Un menu qui s'ouvre après un toucher augmente-t-il le CLS ?
Non, si le déplacement survient dans les 500 millisecondes suivant le toucher. Web.dev exclut ces décalages, considérés comme attendus.
Le CLS est-il mesuré pendant toute la visite ?
Oui, mais il retient seulement la fenêtre de session au score le plus élevé, avec des fenêtres d'au plus cinq secondes. Une longue visite n'est donc pas pénalisée du seul fait de sa durée.
Comment corriger un CLS élevé rapidement ?
Commencez par donner des dimensions à toutes les images et réserver l'espace des bandeaux et des modules externes. Ces deux corrections sont simples et s'essaient avant toute refonte.
Sources
- web.dev (Google), Cumulative Layout Shift (CLS) (version française) (consulté le 15 octobre 2026).
- web.dev (Google), Web Vitals (version française) (consulté le 15 octobre 2026).
- Google Search Central, Comprendre les Core Web Vitals et les résultats de recherche Google (consulté le 15 octobre 2026).
À lire ensuite
Core Web Vitals : que mesurent les signaux Web essentiels ?
Core Web Vitals : les trois mesures de Google (LCP, INP, CLS), leurs seuils officiels, un exemple chiffré pour une PME de services et les erreurs courantes.
LCP : que mesure le Largest Contentful Paint ?
LCP : le temps d'affichage du plus grand élément visible d'une page. Seuil de 2,5 s, éléments pris en compte, exemple chiffré et erreurs fréquentes.
INP : comment mesure-t-on la réactivité d'une page ?
INP : la mesure de réactivité de Google qui a remplacé le FID. Interactions comptées, seuil de 200 ms, exemple d'un formulaire de réservation et erreurs.