Comprendre et mesurer le CLS (Cumulative Layout Shift)

Le CLS (Cumulative Layout Shift) est une métrique Core Web Vitals stable qui mesure la stabilité visuelle d’une page. Il quantifie la fréquence et l’ampleur des décalages de mise en page inattendus, ces moments où un élément déjà visible se déplace brusquement pendant que l’utilisateur consulte la page. Un CLS faible garantit une page agréable et prévisible.

Pour le SEO comme pour l’expérience utilisateur, le CLS est crucial : un contenu qui saute fait perdre le fil de lecture, provoque des clics involontaires et nuit à la confiance. Ces décalages passent souvent inaperçus en développement et n’apparaissent qu’en conditions réelles, d’où l’importance de les mesurer auprès de vrais utilisateurs avant de les corriger.

Le CLS retient la plus grande rafale de décalages survenue pendant la vie de la page. Une rafale, ou fenêtre de session, regroupe des décalages rapprochés (moins d’une seconde d’écart, cinq secondes au maximum) ; le CLS correspond à la fenêtre dont le score cumulé est le plus élevé. À la différence des autres Core Web Vitals, le CLS est une valeur sans unité.

Pour offrir une bonne expérience, visez un CLS de 0,1 ou moins, mesuré au 75e centile des chargements, mobile et ordinateur séparés.

Un décalage de mise en page se produit lorsqu’un élément visible change de position de départ d’un frame à l’autre. Le score de chaque décalage est le produit de deux fractions : la fraction d’impact, c’est-à-dire la part de la fenêtre d’affichage concernée par les éléments instables, et la fraction de distance, c’est-à-dire l’ampleur du déplacement rapporté à la dimension de la fenêtre.

Ajouter un nouvel élément au DOM ou redimensionner un élément ne compte pas comme un décalage, tant que cela ne déplace pas la position de départ d’autres éléments visibles.

Les décalages inattendus surviennent surtout lorsque des ressources se chargent de façon asynchrone ou que des éléments sont ajoutés dynamiquement au-dessus du contenu existant. Les coupables habituels sont les images et vidéos sans dimensions déclarées, les polices qui s’affichent dans une taille différente de la taille par défaut, et les publicités ou widgets tiers qui se redimensionnent en cours de chargement.

Tous les décalages ne sont pas pénalisés. Ceux qui suivent une interaction de l’utilisateur dans un délai de 500 millisecondes sont considérés comme attendus et exclus du calcul. Les animations réalisées avec la propriété CSS transform, elles, ne déclenchent pas de décalage.

Le CLS se mesure sur le terrain, auprès d’utilisateurs réels, et en laboratoire. Attention toutefois : les outils de laboratoire ne capturent en général que les décalages survenant au chargement, si bien que la valeur mesurée peut être inférieure à celle vécue sur le terrain. En JavaScript, le CLS s’appuie sur l’API Layout Instability ; la bibliothèque web-vitals regroupe les décalages en sessions et gère les cas particuliers comme la restauration depuis le cache, au fil de l’évolution de la mesure du CLS.