CLS : définition, calcul et correction
Mis à jour le 22 février 2026
Définition rapide
Le CLS (Cumulative Layout Shift) est une métrique Core Web Vitals mesurant l'instabilité visuelle d'une page web pendant son chargement — soit la somme des décalages de mise en page inattendus. Un CLS est bon s'il est inférieur à 0,1, à améliorer entre 0,1 et 0,25, et mauvais au-delà. Il quantifie l'expérience frustrante où les éléments d'une page « sautent » pendant le chargement.
Comment ça fonctionne
Formule
Score CLS = Σ (fraction de surface impactée × fraction de distance parcourue) pour chaque layout shift dans des fenêtres de session de 5 s
Exemple : un élément occupant 50 % de l'écran qui se déplace de 25 % de la hauteur = layout shift de 0,125
Chaque décalage de mise en page est calculé en multipliant la fraction de surface impactée (proportion de la zone visible affectée) par la fraction de distance parcourue (distance relative du déplacement). Le score CLS est la somme de tous ces décalages survenus dans des fenêtres de session de 5 secondes.
Les seuils officiels Google :
- Bon (vert) : inférieur à 0,1
- À améliorer (orange) : entre 0,1 et 0,25
- Mauvais (rouge) : au-delà de 0,25
Les causes courantes de mauvais CLS incluent :
- Images et vidéos sans dimensions explicites (`width`/`height`)
- Publicités, embeds ou iframes chargés dynamiquement
- Polices de caractères provoquant un FOUT (Flash of Unstyled Text)
- Éléments injectés par JavaScript au-dessus du contenu existant
Pourquoi c'est important
Un score CLS élevé génère une expérience utilisateur frustrante : clics accidentels, perte de position de lecture, sentiment d'instabilité. Cette frustration se traduit directement par des taux de rebond plus élevés et des taux de conversion plus faibles.
Google a inclus le CLS dans les Core Web Vitals car c'est l'un des facteurs d'abandon les plus fréquemment cités par les utilisateurs. Un bon CLS contribue également à la perception de qualité et de professionnalisme du site.
Comment l'améliorer ou l'utiliser
- 1Définissez toujours des attributs `width` et `height` explicites sur vos images et vidéos pour que le navigateur réserve l'espace avant le chargement.
- 2Utilisez `min-height` pour les zones de publicité et d'embed.
- 3Préchargez vos polices et utilisez `font-display: swap` pour éviter les décalages typographiques.
- 4Évitez d'insérer du contenu au-dessus du contenu visible existant via JavaScript.
- 5Auditez vos layout shifts avec l'onglet Performance des DevTools Chrome ou PageSpeed Insights.
Avec Sublim
Sublim vous permet de corréler vos scores CLS par page avec vos données de taux de conversion et de taux de rebond en temps réel. Vous priorisez ainsi la correction des pages à fort trafic où un CLS élevé coûte réellement des clients — toutes ces données collectées sans cookie, en conformité RGPD totale.
Questions fréquentes
Comment identifier les éléments responsables d'un mauvais CLS ?
L'outil le plus précis est l'onglet Performance des DevTools Chrome : activez l'enregistrement au chargement de la page et cherchez les événements 'Layout Shift'. PageSpeed Insights et Web Vitals Debugger Chrome Extension permettent aussi d'identifier visuellement les éléments qui bougent. La propriété CSS `content-visibility` peut aussi aider à isoler les problèmes.
Les animations CSS affectent-elles le CLS ?
Pas forcément. Google exclut du calcul CLS les décalages causés par des interactions utilisateur (clics, frappes) qui surviennent dans les 500 ms suivant l'interaction. Les animations CSS qui utilisent `transform` plutôt que des propriétés modifiant le layout (top, left, margin) n'affectent pas non plus le CLS car elles ne provoquent pas de recalcul de mise en page.
Un bon CLS est-il suffisant pour bien se classer dans Google ?
Le CLS est l'une des trois métriques Core Web Vitals (avec LCP et INP) qui constituent un signal d'expérience page. Un bon CLS seul ne suffit pas : les trois métriques doivent être dans le vert pour que le signal soit positif. De plus, le contenu et l'autorité du domaine restent prépondérants dans le classement global.
Termes associés
Les Core Web Vitals sont un ensemble de trois métriques définies par G…
Le LCP (Largest Contentful Paint) est une métrique [Core Web Vitals](c…
L'INP (Interaction to Next Paint) est la métrique [Core Web Vitals](co…
Le taux de rebond est le pourcentage de [sessions](session) au cours d…