Comment il se calcule
Chaque déplacement est pondéré par la surface d'écran concernée et par la distance parcourue. Le CLS additionne ces décalages sur toute la durée de la visite. Google considère le score bon en dessous de 0,1, à améliorer jusqu'à 0,25, mauvais au-delà.
Les causes classiques
Images et iframes sans dimensions déclarées, polices web qui provoquent un ressaut à la substitution, bandeau de consentement inséré après coup, bannière promotionnelle chargée en JavaScript, publicité de hauteur variable. Sur une fiche produit, le bloc d'avis clients injecté après le rendu initial est un coupable fréquent.
Pourquoi c’est coûteux en e-commerce
Un saut de mise en page dans un tunnel de commande provoque des clics sur le mauvais élément — au mieux une frustration, au pire un abandon. C'est la métrique dont l'effet business est le plus direct, parce qu'elle se traduit immédiatement en erreurs de manipulation.
Questions fréquentes
Comment corriger un CLS élevé rapidement ?
Déclarer width et height sur toutes les images et iframes, réserver l'espace des bandeaux et widgets injectés dynamiquement, et utiliser font-display: optional ou swap avec une police de repli aux métriques proches.
Le bandeau cookies dégrade-t-il le CLS ?
Oui s'il s'insère dans le flux et repousse le contenu. Un bandeau en position fixe, superposé au contenu plutôt qu'inséré dedans, ne génère aucun décalage.