CLS (Cumulative Layout Shift) : Définition, Seuils et Optimisation

Qu'est-ce que le CLS exactement ?

Le Cumulative Layout Shift mesure la somme de tous les décalages de mise en page individuels qui se produisent pendant toute la durée de vie d'une page. Chaque décalage est calculé en multipliant la fraction d'impact (la portion de la fenêtre affectée) par la fraction de distance (la distance du déplacement). Contrairement au LCP ou au temps de chargement, le CLS n'est pas exprimé en secondes mais en score sans unité.

Quelles sont les causes principales du CLS ?

Plusieurs facteurs provoquent des décalages de mise en page non souhaités. Identifier ces causes est la première étape pour améliorer votre score CLS :

• Images et vidéos sans dimensions définies — Le navigateur ne peut pas réserver l'espace tant que le média n'est pas chargé.
• Polices web (FOUT/FOIT) — Le chargement tardif d'une police provoque un recalcul de la mise en page.
• Contenu injecté dynamiquement — Bannières publicitaires, pop-ups de consentement ou embeds qui apparaissent après le rendu initial.
• Iframes sans dimensions — Les widgets tiers (vidéos YouTube, cartes Google) sans hauteur/largeur réservées.
• Animations non composites — Les animations CSS qui modifient les propriétés de layout (top, left, width, height).

Seuils CLS : bon, à améliorer ou mauvais ?

Google définit trois seuils de performance pour le CLS, mesurés sur le 75e percentile des chargements de pages, sur mobile et desktop :

Comment mesurer le CLS de votre site ?

Vous pouvez analyser le CLS avec des outils de données de laboratoire (Lighthouse, Chrome DevTools) ou de données terrain (Chrome UX Report, Search Console). Les données terrain reflètent l'expérience réelle des utilisateurs et sont celles utilisées par Google pour le classement.

• Google PageSpeed Insights — Combine données lab et terrain, avec diagnostic détaillé.
• Chrome DevTools (onglet Performance) — Visualise chaque décalage de layout en temps réel.
• Web Vitals Extension — Affiche le CLS en temps réel pendant la navigation.
• Search Console (rapport Core Web Vitals) — Suivi à grande échelle sur toutes vos URLs.

7 conseils pour améliorer votre CLS

1. Définissez width et height sur toutes les images et vidéos — Permet au navigateur de réserver l'espace avant le chargement. Utilisez l'attribut aspect-ratio en CSS pour une approche moderne.
2. Utilisez font-display: swap ou optional — Évitez les décalages causés par le chargement des polices web. Préchargez les polices critiques avec <link rel="preload">.
3. Réservez l'espace pour les publicités et embeds — Définissez des conteneurs avec des dimensions fixes (min-height) pour les éléments chargés dynamiquement.
4. Évitez d'injecter du contenu au-dessus du contenu existant — Les bannières et notifications doivent apparaître sans décaler le contenu principal.
5. Utilisez la propriété CSS contain: layout — Isolez les sous-arbres du DOM pour limiter la propagation des recalculs de layout.
6. Privilégiez transform pour les animations — Remplacez les modifications de top/left/width/height par des transform: translate() et scale().
7. Auditez régulièrement avec Lighthouse — Intégrez le suivi du CLS dans votre pipeline CI/CD pour détecter les régressions.