Définition
Le CLS (Cumulative Layout Shift) mesure la stabilité visuelle d’une page en quantifiant les décalages de mise en page inattendus pendant le chargement. Un CLS élevé signifie que des éléments bougent de façon inattendue, frustrant l’utilisateur.
C’est l’un des trois Core Web Vitals de Google et un facteur de ranking.
Seuils de performance
- Bon : CLS ≤ 0,1
- À améliorer : 0,1 < CLS ≤ 0,25
- Mauvais : CLS > 0,25
L’objectif est d’atteindre un CLS ≤ 0,1 pour 75% des chargements de page.
Comment le CLS est calculé
Impact fraction
Quelle portion du viewport est affectée par le décalage ?
Distance fraction
De combien l’élément s’est-il déplacé (en proportion du viewport) ?
Score CLS
CLS = Impact fraction × Distance fraction
Le score final est la somme des décalages cumulés pendant la session.
Causes courantes de mauvais CLS
Images sans dimensions
<!-- Mauvais -->
<img src="photo.jpg">
<!-- Bon -->
<img src="photo.jpg" width="800" height="600">
Sans dimensions, le navigateur ne sait pas l’espace à réserver.
Publicités et embeds
Les pubs qui se chargent tardivement repoussent le contenu.
Polices web
Le texte peut “sauter” quand la police se charge et a des métriques différentes.
Contenu injecté dynamiquement
Bannières, notifications, contenu chargé via JavaScript au-dessus du contenu existant.
Animations non transformées
Animations qui utilisent top/left au lieu de transform.
Optimiser le CLS
Images et vidéos
Toujours spécifier width et height, ou utiliser aspect-ratio en CSS.
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
Réserver l’espace pour les pubs
Utilisez des placeholders de taille fixe pour les emplacements publicitaires.
Polices web
Utilisez font-display: swap et préchargez les polices critiques.
<link rel="preload" href="font.woff2" as="font" crossorigin>
Optionnellement, utilisez font-display: optional pour éviter tout décalage.
Éviter d’insérer du contenu au-dessus
Les nouvelles informations (notifications, bandeaux) devraient apparaître en bas ou dans des zones réservées.
Animations avec transform
Utilisez transform et opacity pour les animations, pas les propriétés de layout.
Mesurer le CLS
Outils de terrain (données réelles)
- Google Search Console : Rapport Core Web Vitals
- PageSpeed Insights : Section données de terrain
- Chrome UX Report (CrUX)
Outils de lab
- Lighthouse (Chrome DevTools)
- PageSpeed Insights : Section données de lab
- WebPageTest
JavaScript API
L’API LayoutShift permet de mesurer le CLS en conditions réelles.
CLS et éléments interactifs
Décalages intentionnels
Les décalages causés par une action utilisateur (clic, saisie) ne comptent pas dans le CLS.
Exemple
Un menu dropdown qui s’ouvre après un clic ne dégrade pas le CLS. Mais un bandeau qui apparaît automatiquement après 3 secondes le dégrade.
Cas particuliers
Single Page Applications (SPA)
Les navigations “soft” dans les SPA peuvent accumuler du CLS. Attention aux transitions.
Infinite scroll
Le chargement de contenu en bas ne cause généralement pas de CLS, mais le chargement de contenu au-dessus oui.
Lazy loading
Le lazy loading d’images peut causer du CLS si les dimensions ne sont pas réservées.
Debugging le CLS
Chrome DevTools
- Ouvrir DevTools > Performance
- Activer “Web Vitals”
- Les décalages de layout sont mis en évidence
Extension Web Vitals
L’extension Chrome Web Vitals affiche le CLS en temps réel.
Search Console
Identifie les groupes de pages avec problèmes de CLS.
Conclusion
Le CLS est crucial pour l’expérience utilisateur et le SEO. Les décalages de layout frustrent les utilisateurs et peuvent causer des clics accidentels. Les corrections sont souvent simples : dimensions explicites pour les médias, espace réservé pour les pubs, polices optimisées. Visez un CLS ≤ 0,1 pour offrir une expérience stable et satisfaire les critères Core Web Vitals de Google.