CLS (Cumulative Layout Shift)
Le CLS (Cumulative Layout Shift) est la métrique Core Web Vitals qui mesure la stabilité visuelle d’une page en cumulant les déplacements imprévus d’éléments pendant le chargement.
Qu'est-ce que cls (cumulative layout shift) ?
Un layout shift se produit quand un élément déjà rendu bouge — par exemple parce qu’une image se charge sans dimensions réservées, ou qu’une bannière pub s’insère au milieu du texte. Cumulés, ces sauts dégradent l’expérience : un utilisateur clique sur "Accepter" et touche par erreur "S’abonner" parce que le bouton a sauté.
Le CLS se calcule en multipliant la fraction de viewport déplacée par la distance du déplacement. Le seuil "Good" est sous 0,1, "Needs improvement" entre 0,1 et 0,25, "Poor" au-delà. Sur mobile, où l’écran est plus petit, le score est plus sensible.
Les fixes : toujours spécifier width et height sur les images et vidéos (le navigateur réserve l’espace), réserver l’espace pour les pubs et embeds via min-height, charger les polices web avec font-display: optional ou swap + sizing matching, éviter d’insérer du contenu au-dessus du contenu existant (sauf en réponse à une interaction utilisateur explicite).
Une landing avec un hero image sans dimensions HTML provoque un saut de 0,18 au chargement — "Needs improvement". En ajoutant width="1280" height="720" sur l’<img>, le navigateur réserve l’espace, le saut disparaît, CLS descend à 0,02.
On parle de CLS en performance web, en SEO technique, en accessibilité et dans tout audit Core Web Vitals.
Mettre ce concept en pratique avec Eufya
Eufya applique ces principes automatiquement dans son pipeline 5-agents. Brief, scoring, génération, audit qualité. 3 crédits gratuits à l'inscription.