Guides

Le CLS, pour Cumulative Layout Shift, est l'un des Core Web Vitals de Google, les métriques que Google utilise pour évaluer la qualité d'usage d'une page. Le CLS mesure la stabilité visuelle : pendant le chargement d'une page, les éléments restent-ils à leur place ou sautent-ils partout ? Un CLS bas signifie que la mise en page est stable et prévisible ; un CLS élevé signifie que le contenu se décale sous vos yeux au moment où vous essayez de lire une ligne ou de toucher un bouton, l'une des choses les plus frustrantes qu'une page web puisse faire.

Comment le CLS est mesuré et calculé

Le nom décrit ce qu'il capture. Il est cumulatif parce qu'il additionne les décalages de mise en page survenus pendant la vie de la page, et un décalage de mise en page se produit chaque fois qu'un élément visible change de position d'une image rendue à la suivante sans que vous l'ayez demandé. Un mouvement que vous avez déclenché n'est pas compté : cliquer sur un lien, ouvrir un accordéon ou un menu est attendu et exclu. Une image qui se charge en retard et pousse vers le bas le paragraphe que vous lisiez n'est pas attendue, et c'est exactement ce que le CLS est conçu pour détecter.

Le CLS est l'un des trois Core Web Vitals, aux côtés du Largest Contentful Paint, qui mesure le chargement, et de l'Interaction to Next Paint, qui mesure la réactivité. Le CLS est celui qui couvre la stabilité visuelle. Une page peut se charger vite et répondre instantanément tout en obtenant un mauvais CLS si les éléments bougent après leur première apparition, si bien que les trois métriques mesurent vraiment des qualités différentes et qu'une page doit toutes les réussir.

Contrairement à une métrique temporelle comme le LCP ou l'INP, le CLS est un score sans unité plutôt qu'un nombre de millisecondes. Chaque décalage individuel est noté en multipliant deux fractions : la fraction d'impact, la part de la fenêtre d'affichage touchée par les éléments qui bougent, et la fraction de distance, la distance parcourue par rapport à la fenêtre d'affichage. Ces scores de décalage sont combinés pour donner la valeur que Google rapporte, de sorte que la quantité de mouvement et la distance parcourue comptent toutes deux.

Les seuils de Google

Les seuils de Google, mesurés au 75e centile des chargements réels, sont simples à retenir. Un CLS de 0,1 ou moins est Good. Entre 0,1 et 0,25, c'est Needs improvement. Au-delà de 0,25, c'est Poor. Comme le score est cumulatif, plusieurs petits décalages peuvent additionnés donner une note d'échec même si aucun saut à lui seul ne paraît dramatique, ce qui explique pourquoi la stabilité doit être une habitude sur toute la page plutôt qu'un correctif pour un seul élément visible.

• Ce que c'est : le Cumulative Layout Shift, l'un des trois Core Web Vitals, aux côtés du Largest Contentful Paint et de l'Interaction to Next Paint.
• Ce qu'il mesure : la stabilité visuelle, à quel point le contenu visible bouge de façon inattendue pendant le chargement d'une page.
• Comment il est calculé : une valeur sans unité obtenue en additionnant des scores de décalage, chacun étant la fraction d'impact multipliée par la fraction de distance.
• Seuils au 75e centile : Good à 0,1 ou moins, Needs improvement de 0,1 à 0,25, Poor au-delà de 0,25.
• Comment l'améliorer : définir des dimensions ou aspect-ratio sur les médias, réserver l'espace du contenu tardif comme les pubs et les bannières, régler les polices web, et animer avec transform.

Ce qui provoque les décalages de mise en page

La plupart des décalages de mise en page viennent de quelques causes bien connues. Les images, vidéos et iframes insérées sans attributs width et height n'ont pas d'espace réservé, si bien que le navigateur doit recalculer la mise en page à leur arrivée, une fois leur taille réelle connue. Les polices web peuvent provoquer un décalage lorsqu'une police de secours est remplacée par la police web et que le texte se remet en forme dans une taille différente. Enfin, le contenu injecté au-dessus de ce que vous lisez déjà, comme des publicités, des intégrations ou une bannière de cookies ou de consentement tardive, pousse tout ce qui est en dessous vers le bas.

Comment corriger et éviter les décalages

Les corrections découlent directement des causes. Définissez toujours les attributs width et height sur les images et les vidéos, ou réservez l'espace avec la propriété CSS aspect-ratio, pour que le navigateur connaisse la taille avant le chargement du média. Réservez de l'espace pour tout ce qui arrive en retard, y compris les emplacements publicitaires et les bannières, plutôt que de le laisser apparaître par-dessus le contenu existant. Pour les polices web, utilisez la propriété font-display et faites correspondre au plus près les métriques de la police de secours, pour que le remplacement déplace le texte le moins possible.

L'animation compte aussi. Si vous devez déplacer un élément, animez-le avec la propriété CSS transform plutôt qu'en modifiant des propriétés comme top, left, width ou height. Les transforms sont gérées par le compositeur du navigateur et ne déclenchent pas de recalcul de mise en page, si bien qu'elles déplacent visuellement un élément sans compter comme un décalage de mise en page, ce qui vous permet de garder du mouvement dans votre design sans nuire au score.

Comment mesurer le CLS

Le CLS se juge au mieux sur des données de terrain, de vrais utilisateurs sur de vrais appareils et connexions, que vous pouvez voir dans le Chrome User Experience Report et dans le rapport Core Web Vitals de Google Search Console. Pour le débogage en labo, le panneau Performance des Chrome DevTools met en évidence les décalages de mise en page et les éléments responsables, Lighthouse rapporte une valeur de CLS, et la bibliothèque JavaScript web-vitals le mesure directement dans le navigateur. Sur ce site, notre vérificateur de web vitals vous laisse saisir vos valeurs mesurées et voir instantanément si elles passent les seuils de Google.

En résumé

En résumé : le CLS récompense les pages dont la mise en page reste en place. L'essentiel du travail est défensif, réserver de l'espace pour les images, les médias, les polices et tout ce qui est injecté tard pour que rien n'ait à pousser le contenu existant. Faites-le bien et une page paraît calme et stable au lieu d'être instable, ce qui est exactement ce que la métrique cherche à encourager.