Cumulative Layout Shift (CLS) : définition, causes et solutions

Qu'est-ce que le Cumulative Layout Shift (CLS) ?

Le Cumulative Layout Shift (CLS) est un Core Web Vital qui note à quel point le contenu visible bouge de façon inattendue pendant l'utilisation d'une page. C'est un nombre sans unité : la plus forte série de décalages de mise en page durant la visite. Google juge qu'une valeur de 0,1 ou moins est bonne et au-delà de 0,25 mauvaise, évaluée au 75e centile des chargements de page, séparément sur mobile et sur ordinateur.

Il capture le moment où vous tendez la main vers un bouton, la page saute et vous touchez une publicité à la place. Le CLS est l'un des trois Core Web Vitals, avec le LCP (chargement) et l'INP (réactivité). La vitesse de chargement est traitée dans l'entrée sur le LCP.

Seuils du CLS

Les seuils sont maintenus sur web.dev.

Comment le CLS est calculé

Chaque décalage inattendu reçoit un score : score de décalage = fraction d'impact x fraction de distance.

• Fraction d'impact : la surface visible cumulée des éléments instables, avant et après le décalage, en fraction de la fenêtre.
• Fraction de distance : la plus grande distance parcourue par un élément instable, en fraction de la plus grande dimension de la fenêtre.

Les décalages sont regroupés en fenêtres de session : des séries séparées de moins de 1 seconde, pour 5 secondes au maximum au total. Le CLS est le score de la pire fenêtre, et non la somme de toute la visite. Les décalages survenant dans les 500 millisecondes suivant un toucher, un clic ou une frappe sont exclus, car c'est le visiteur qui les a provoqués. Le défilement, le glissement et le zoom par pincement ne comptent pas comme une telle action.

Exemple : une bannière qui repousse l'article vers le bas

Supposons qu'une image occupe la moitié de la fenêtre et qu'une bannière chargée tardivement la repousse d'un quart de la hauteur. La surface concernée avant et après couvre trois quarts de la fenêtre (fraction d'impact 0,75) et la fraction de distance vaut 0,25. Le décalage obtient 0,75 x 0,25 = 0,1875, ce qui, à lui seul, tombe déjà dans la plage « à améliorer ». Les chiffres sont illustratifs ; les vraies pages ont de nombreux petits décalages.

Ce qui provoque les décalages de mise en page

Comment corriger le CLS

Donnez à chaque image et vidéo ses dimensions, pour que la place existe avant l'arrivée du fichier (le reste de la liste de contrôle des images se trouve dans taille des images) :

<!-- shifts the page when it loads -->
<img src="/img/banner.jpg" alt="Sale banner">

<!-- reserves the space up front -->
<img src="/img/banner.jpg" alt="Sale banner" width="1200" height="400">

• Réservez de la place pour le contenu qui charge plus tard, comme les publicités, les contenus intégrés et les bandeaux de cookies, avec une hauteur fixe ou minimale.
• N'insérez pas de nouveau contenu au-dessus de ce que le visiteur est en train de lire, sauf s'il l'a demandé.
• Utilisez transform: translate() et transform: scale() pour les animations de déplacement et de taille plutôt que de modifier top, height ou width, comme le recommande web.dev.
• Pour un contenu qui apparaît après un clic, affichez un indicateur de chargement de taille fixe.

Erreurs courantes avec le CLS

• Ajouter des dimensions à l'image principale mais oublier le logo, les avatars et les images de l'article.
• Faire disparaître un emplacement publicitaire quand aucune publicité ne le remplit, si bien que le contenu en dessous saute.
• Ne tester que le premier écran, alors que les décalages se produisent plus bas ou plus tard dans la visite.
• Se fier uniquement à un score de laboratoire, qui s'arrête en général peu après le chargement, alors que les vrais visiteurs vivent toute la visite.

Comment mesurer le CLS

Lighthouse et Chrome DevTools montrent les décalages d'un seul chargement contrôlé, ce qui aide à repérer l'élément. Les données de terrain de vrais visiteurs, comme la surveillance des utilisateurs réels que vous collectez vous-même ou le Chrome UX Report, couvrent toute la visite et décident du résultat des Core Web Vitals. Pour consigner le CLS avec la bibliothèque web-vitals de Google :

import { onCLS } from 'web-vitals';

onCLS((metric) => {
  console.log('CLS:', metric.value);
});

Le CLS dans les tests et la surveillance

La surveillance de la vitesse de page de LoadFocus lance des audits Lighthouse planifiés depuis 25 régions cloud et enregistre les Core Web Vitals, CLS compris, si bien qu'une modification de modèle qui se met à décaler le contenu apparaît comme une tendance. Le vérificateur gratuit de Core Web Vitals affiche le CLS de vrais utilisateurs de Chrome pour une URL au 75e centile. Les corrections pas à pas des trois métriques figurent dans notre guide d'optimisation des Core Web Vitals. Pour aller plus loin : surveiller les Core Web Vitals avec des alertes et des rapports et 10 étapes pour un site plus rapide.

Questions fréquentes : Cumulative Layout Shift

Qu'est-ce qu'un bon CLS ?

0,1 ou moins au 75e centile des chargements de page. Entre 0,1 et 0,25, il y a des progrès à faire, et au-delà de 0,25 c'est mauvais.

Un décalage après un clic sur un bouton compte-t-il ?

Non, s'il se produit dans les 500 millisecondes suivant le toucher, le clic ou la frappe, car c'est le visiteur qui l'a provoqué. Le défilement, le glissement et le zoom par pincement ne comptent pas comme ce type d'action.

Faut-il width et height sur chaque image ?

Sur chaque image et vidéo dont la taille n'est pas déjà fixée par votre mise en page. Cela permet au navigateur de réserver la place avant le chargement du fichier. Un aspect-ratio CSS joue le même rôle.

Pourquoi mon CLS de terrain est-il pire que celui de laboratoire ?

Un test de laboratoire ne couvre généralement que le chargement, alors que les données de terrain couvrent toute la visite, y compris les publicités, bannières et contenus qui apparaissent après un défilement. Les appareils et connexions réels diffèrent aussi de la configuration du test.

Comment trouver l'élément qui se décale ?

Lancez Lighthouse et lisez ses diagnostics de décalages de mise en page, ou enregistrez une trace dans le panneau Performances de Chrome DevTools, qui signale les décalages et les éléments concernés.