Définition
Le CLS (Cumulative Layout Shift) mesure la somme de tous les decalages de mise en page inattendus qui se produisent pendant la duree de vie d'une page. Un decalage se produit quand un element visible change de position sans action de l'utilisateur, par exemple lorsqu'une image se charge tardivement et pousse le texte vers le bas. Google recommande un CLS inferieur a 0,1 pour une bonne experience utilisateur. Les causes courantes incluent les images sans dimensions reservees, le chargement tardif de polices web, l'injection dynamique de publicites ou de bannieres, et les iframes sans dimensions specifiees. Pour corriger un CLS eleve, il faut definir des attributs width et height sur les images, utiliser font-display: swap pour les polices, et reserver l'espace pour les elements charges dynamiquement via des conteneurs CSS de taille fixe.
Points clés à retenir
- Seuil recommande par Google : moins de 0,1
- Cause principale : images, pubs ou polices chargees sans espace reserve
- Ameliorable en definissant les dimensions des medias et en reservant l'espace des elements dynamiques
Exemples concrets
Images sans dimensions
Un article avec des images sans attributs width/height genere un CLS de 0,45. L'ajout des dimensions ramene le CLS a 0,02.
Banniere publicitaire
Une banniere pub inseree en haut de page apres 2 secondes cause un CLS de 0,35. La reservation d'un espace fixe supprime ce decalage.
Questions fréquentes
Utilisez l'onglet Performance de Chrome DevTools, l'extension Web Vitals ou le rapport Experience de la Search Console.
Les animations utilisant transform et opacity ne provoquent pas de CLS. Animer top, left, width ou height peut en generer.
Termes liés
Aller plus loin avec LemmiLink
Découvrez comment LemmiLink peut vous aider à mettre en pratique ces concepts SEO.
Dernière mise à jour : 2026-02-07