L’essentiel
- Un bon CLS est inférieur ou égal à 0,1
- Le score n’a pas d’unité : il combine la surface déplacée et la distance du déplacement
- Les décalages provoqués par un clic de l’utilisateur ne comptent pas
- Images sans dimensions, publicités et bandeaux injectés sont les causes principales
- La correction passe presque toujours par de l’espace réservé à l’avance
Les seuils du CLS#
| Score | Valeur |
|---|---|
| Bon | 0,1 ou moins |
| À améliorer | Entre 0,1 et 0,25 |
| Mauvais | Plus de 0,25 |
Le CLS se calcule sur toute la durée de la visite, par fenêtres de décalages rapprochés. Google retient la fenêtre la plus défavorable. Un décalage qui survient dans les 500 millisecondes suivant une action de l’internaute (ouvrir un menu, déplier un accordéon) est considéré comme attendu et n’est pas compté.
Les causes les plus fréquentes#
- Images et vidéos sans largeur ni hauteur : le navigateur ne sait pas quelle place leur réserver et pousse le texte quand elles arrivent.
- Publicités, iframes et widgets : blocs d’avis clients, bannières cookies, chats qui s’insèrent en haut de page après le chargement.
- Bandeaux promotionnels ajoutés en JavaScript au-dessus du contenu.
- Polices web : le texte s’affiche avec une police de secours, puis change de taille quand la police définitive arrive.
- Contenu injecté au-dessus de la zone visible, comme des produits recommandés chargés à la volée.
Comment corriger un mauvais CLS#
La logique est toujours la même : réserver la place avant que l’élément arrive.
- Déclarer les attributs width et height sur les images, ou une propriété aspect-ratio en CSS.
- Donner une hauteur minimale aux emplacements publicitaires et aux widgets.
- Afficher les bandeaux (cookies, promotion) en superposition plutôt que dans le flux de la page.
- Ajuster les polices de secours pour qu’elles occupent la même place que la police finale.
- Pour les animations, utiliser transform plutôt que top, left ou height.
Pour trouver l’élément fautif, PageSpeed Insights liste les décalages de mise en page et le panneau Performance de Chrome les surligne. Sur un site marchand, un bandeau de livraison gratuite injecté par une application suffit parfois à faire passer tout le site dans l’orange. C’est un contrôle de base de mon audit SEO technique.
Questions fréquentes#
Que veut dire CLS ?
Cumulative Layout Shift, soit « décalage cumulatif de la mise en page ».
Pourquoi mon CLS est-il bon en test et mauvais dans la Search Console ?
Les tests de laboratoire ne mesurent que le chargement initial. Les données terrain couvrent toute la visite, y compris le défilement et les contenus chargés plus tard.
Le CLS a-t-il un impact sur le SEO ?
Il fait partie des signaux d’expérience de page, avec un poids limité dans le classement. Son effet le plus visible est sur les clics ratés et la frustration des visiteurs.
Un carrousel animé dégrade-t-il le CLS ?
Pas s’il déplace ses éléments avec des transformations CSS. Il le dégrade s’il modifie la hauteur ou la position des blocs qui l’entourent.