Cumulative Layout Shift (CLS)
Un Core Web Vital qui mesure à quel point le contenu de la page saute et bouge de façon inattendue pendant le chargement — cette expérience agaçante où le bouton se dérobe juste au moment où l'on va cliquer. Il mesure la stabilité visuelle. Objectif : moins de 0,1.
Ce qu'il mesure : le CLS additionne tous les décalages de mise en page inattendus (des éléments qui bougent alors qu'ils étaient déjà affichés), pondérés par la part de l'écran concernée et la distance parcourue. Causes classiques : images et vidéos sans dimensions déclarées (le contenu saute au chargement — on corrige avec width/height ou aspect-ratio), publicités et contenus embarqués qui surgissent et repoussent le texte vers le bas, polices web qui s'échangent (FOUT avec une taille différente) et contenu injecté au-dessus de ce qui est déjà affiché. Optimisation : toujours réserver la place des médias et du contenu dynamique (aspect-ratio, dimensions fixes, squelettes de chargement), utiliser font-display avec des métriques de police de repli équivalentes, et ne rien insérer au-dessus de ce que l'utilisateur est en train de regarder. L'un des trois Core Web Vitals. C'est directement la raison d'être d'aspect-ratio et des attributs de dimension. À rapprocher du Largest Contentful Paint.