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

Le Cumulative Layout Shift quantifie la stabilité visuelle, c'est-à-dire la fréquence à laquelle des éléments sautent après que la page a commencé son rendu. Dans un contexte de commerce, le CLS est la métrique qui capture la frustration de cliquer à côté d'une bannière promo parce qu'une vignette produit s'est décalée au dernier moment. Il est sans unité, noté au 75e percentile des sessions d'utilisateurs réels et fait partie des Core Web Vitals.

Définition

Le CLS additionne la fraction d'impact multipliée par la fraction de distance de chaque décalage de mise en page inattendu entre le chargement de la page et son déchargement complet, agrégé sur des fenêtres de session. Un bon score est inférieur à 0,1, un mauvais est supérieur à 0,25. Les déclencheurs typiques incluent les images sans attributs de largeur et de hauteur, les polices web à chargement tardif qui provoquent un reflow du texte, les bannières tierces chargées après le premier paint, les scripts d'A/B-test injectant de nouveaux nœuds DOM et les badges qui arrivent de façon asynchrone depuis un service de personnalisation. Le CLS est une métrique d'exécution, le HTML rendu côté serveur seul ne peut donc pas le résoudre ; le comportement du client compte tout autant.

Pourquoi c'est important

Les décalages de mise en page érodent la confiance et augmentent directement les clics manqués sur les CTA d'ajout au panier et de checkout. Le CLS est particulièrement dommageable sur les PDP, où le prix, les messages de stock et les badges de confiance arrivent souvent de services distincts. En tant que composante du signal page-experience, il influence le search-engine-optimization-seo. Pour les boutiques composables à fort ab-testing et personnalisation, le CLS révèle à quel point le front-end est discipliné dans la réservation d'espace pour le contenu asynchrone. C'est aussi le Vital le plus facile à dégrader quand les équipes avancent vite sur des expériences de conversion-rate-optimization-cro.

Cas d'usage

Les équipes utilisant Next.js, Nuxt ou Astro corrigent le CLS en fixant des largeur et hauteur explicites sur les images, en déclarant un CSS aspect-ratio, en préchargeant les polices critiques et en utilisant font-display:optional pour éviter le reflow tardif du texte. Les emplacements de bannière d'un content-management-system-cms sont rendus avec des boîtes placeholder pour que le contenu personnalisé tombe dans un espace réservé. L'Edge Rendering et l'ISR réduisent la variance en servant un HTML initial stable, tandis que les frameworks d'expérimentation côté client sont configurés pour ne muter qu'à l'intérieur de conteneurs aux dimensions fixes. Des tableaux de bord RUM segmentent le CLS par template pour repérer les régressions liées aux nouveaux modules de merchandising ou aux déploiements d'hyperpersonnalisation.

Voir aussi

Découvrez Performance and Core Web Vitals · Composable Headless Frontend.