CLS - Cumulative Layout Shift
Comprendre et optimiser le CLS pour le SEO
Le CLS mesure la stabilité visuelle de votre page. Un contenu qui "saute" pendant le chargement frustre les utilisateurs et impacte votre positionnement. Découvrez comment diagnostiquer et corriger ce problème.
Qu'est-ce que le CLS ?
Définition technique
- CLS = Cumulative Layout Shift (Décalage de mise en page cumulatif)
- Mesure la somme de tous les décalages de layout inattendus
- Un des 3 Core Web Vitals de Google
- Score sans unité (bas = bon, élevé = mauvais)
Seuils de performance
- Bon : CLS < 0.1
- À améliorer : 0.1 < CLS < 0.25
- Mauvais : CLS > 0.25
- Google utilise le 75e percentile des données terrain
Pourquoi le CLS est important
- Expérience utilisateur frustrante (clics accidentels)
- Facteur de ranking Google depuis 2021
- Impact négatif sur les conversions
- Problème d'accessibilité pour certains utilisateurs
Causes courantes du mauvais CLS
Images sans dimensions
- Images sans attributs width/height
- Le navigateur ne peut pas réserver l'espace
- Le contenu "saute" quand l'image se charge
- Solution : toujours spécifier les dimensions
Publicités et embeds dynamiques
- Bannières pub qui apparaissent après le chargement
- Embeds (vidéos, tweets, iframes) sans espace réservé
- Widgets tiers à hauteur variable
- Solution : réserver l'espace avec un placeholder
Polices web (FOIT/FOUT)
- FOIT : Flash of Invisible Text (texte invisible puis visible)
- FOUT : Flash of Unstyled Text (police par défaut puis custom)
- Changement de taille du texte au chargement de la police
- Solution : font-display: swap + préchargement
Contenu injecté dynamiquement
- Bannières de cookies qui poussent le contenu
- Messages d'alerte ou notifications
- Contenu chargé via JavaScript après le rendu initial
- Solution : overlay au lieu de push, ou espace réservé
Comment mesurer le CLS
Outils de mesure
- PageSpeed Insights : Données terrain et labo
- Search Console : Rapport Core Web Vitals
- Chrome DevTools : Onglet Performance
- Lighthouse : Audit détaillé avec recommandations
- Web Vitals Extension : Mesure en temps réel
Identifier les éléments problématiques
- Layout Shift Regions dans DevTools
- Performance Observer API pour le debugging
- Identifier l'élément source du shift
- Analyser la chronologie du chargement
Solutions pour améliorer le CLS
Bonnes pratiques images
- Toujours ajouter width et height aux images
- Utiliser aspect-ratio en CSS moderne
- Lazy loading avec espace réservé
- Utiliser srcset pour les images responsives
Gestion des publicités
- Réserver l'espace publicitaire avec min-height
- Éviter les pubs au-dessus du contenu principal
- Utiliser des emplacements de taille fixe
- Préférer les formats sticky ou overlay
Optimisation des polices
- Précharger les polices critiques (<link rel="preload">)
- Utiliser font-display: optional ou swap
- Héberger les polices localement si possible
- Limiter le nombre de variantes de police
Consultez notre guide complet Core Web Vitals et notre service d'audit SEO technique.
Questions fréquentes
Pourquoi mon CLS est bon en labo mais mauvais en terrain ?
Les données terrain (Field data) reflètent l'expérience réelle des utilisateurs avec connexions variables, pubs qui se chargent, etc. Le labo simule des conditions idéales. Priorisez les données terrain pour le diagnostic.
Les animations CSS causent-elles du CLS ?
Les animations qui utilisent transform et opacity ne causent pas de CLS car elles ne modifient pas le layout. En revanche, animer width, height, margin, padding ou position cause du CLS. Utilisez toujours transform pour les animations.
Comment gérer les bannières de cookies ?
Privilégiez les bannières en overlay (position: fixed) plutôt que celles qui poussent le contenu. Si la bannière doit être en haut de page, réservez l'espace dès le départ ou affichez-la dès le rendu initial.
Le CLS est-il calculé après les interactions utilisateur ?
Les layout shifts causés par une interaction utilisateur (clic, tap) ne sont pas comptés dans le CLS s'ils surviennent dans les 500ms suivant l'interaction. Seuls les shifts "inattendus" comptent.
Améliorez votre CLS
Un audit technique pour identifier et corriger vos problèmes de stabilité visuelle.