CLS (Cumulative Layout Shift) : comment le corriger sur son site

Un lecteur commence à parcourir un article, et sans prévenir, le texte saute de plusieurs lignes vers le bas au moment même où une image finit de charger juste au-dessus. Ce type de désagrément, à la fois frustrant et responsable de clics involontaires sur le mauvais élément, porte un nom précis dans le vocabulaire technique de Google : le Cumulative Layout Shift, l'un des trois Core Web Vitals suivis pour évaluer l'expérience utilisateur d'une page.

Ce que mesure exactement le CLS

Le CLS (Cumulative Layout Shift) quantifie la somme de tous les décalages visuels inattendus survenant pendant le chargement et la vie d'une page, du premier affichage jusqu'à l'interaction de l'utilisateur avec le contenu. Le mot « inattendu » compte ici particulièrement : un décalage déclenché volontairement par une action de l'utilisateur (un clic sur un bouton « afficher plus », par exemple) n'entre pas dans ce calcul.

Les seuils et comment interpréter son score

Score CLS	Interprétation
Inférieur à 0,1	Bon : expérience visuelle stable
Entre 0,1 et 0,25	À améliorer : instabilité perceptible
Supérieur à 0,25	Médiocre : instabilité visuelle gênante

0,1 seuil en dessous duquel un score CLS est considéré comme bon par Google

Les causes les plus fréquentes de décalage visuel

Plusieurs éléments techniques reviennent systématiquement dans le diagnostic d'un score CLS dégradé :

• Des images sans dimensions déclarées dans le code, le navigateur ne réservant alors aucun espace avant que l'image ne soit effectivement chargée.
• Des publicités ou widgets tiers insérés dynamiquement, dont la taille finale n'est connue qu'après leur propre chargement.
• Des polices personnalisées qui remplacent une police par défaut après leur téléchargement, modifiant l'espace occupé par le texte déjà affiché.
• Du contenu injecté au-dessus d'éléments existants, comme une bannière de consentement ou une notification apparaissant après le premier affichage de la page.

Corriger les décalages liés aux images et aux publicités

La correction la plus efficace, et souvent la plus simple à mettre en œuvre, consiste à réserver systématiquement l'espace nécessaire à chaque élément avant son chargement effectif :

1. Déclarer explicitement la largeur et la hauteur de chaque image dans le code source, ou utiliser un ratio d'aspect fixé en CSS, pour que le navigateur réserve l'espace correspondant dès le premier rendu de la page.
2. Réserver un espace fixe pour les emplacements publicitaires, avant même que la publicité elle-même ne soit chargée, en définissant une hauteur minimale pour son conteneur.
3. Éviter d'insérer du contenu au-dessus d'éléments déjà visibles, sauf en réponse à une interaction directe de l'utilisateur.

Cette discipline sur les dimensions rejoint directement les enjeux détaillés dans notre guide sur le choix du format d'image pour le LCP sur une fiche produit, où le poids et le format de l'image affectent la vitesse de chargement, tandis que ses dimensions déclarées affectent directement la stabilité visuelle mesurée par le CLS. Les deux métriques se corrigent souvent par les mêmes bonnes pratiques d'implémentation des images.

Polices personnalisées et contenu injecté dynamiquement

Une police qui change en cours de lecture ne fait pas que changer d'apparence : elle déplace tout le texte qui la suit, ligne après ligne.

Le chargement d'une police personnalisée peut provoquer un phénomène appelé FOIT (Flash of Invisible Text) ou FOUT (Flash of Unstyled Text), selon la stratégie de chargement retenue, les deux pouvant générer un décalage visible lorsque la police définitive remplace la police de secours affichée en premier. Plusieurs techniques permettent d'atténuer ce phénomène, notamment le préchargement de la police personnalisée et le réglage fin de son comportement d'affichage pendant le chargement.

Le contenu injecté dynamiquement, qu'il s'agisse d'une bannière de consentement, d'une notification promotionnelle ou d'un widget de chat, doit dans la mesure du possible occuper un espace déjà réservé dans la structure de la page, plutôt que de s'insérer brutalement et de repousser le contenu existant vers le bas.

Les outils pour mesurer et suivre son CLS

Plusieurs outils permettent de mesurer et de suivre l'évolution du score CLS d'un site :

• Le rapport Core Web Vitals de Google Search Console, qui agrège les données réelles des visiteurs (données de terrain) et identifie les groupes de pages concernées par un score dégradé.
• PageSpeed Insights, qui combine données de terrain et données de laboratoire, ces dernières permettant de tester une page avant même sa mise en ligne définitive.
• Les outils de développement intégrés aux navigateurs, qui permettent de visualiser en temps réel les zones de la page responsables d'un décalage lors d'un test manuel.

En résumé, le CLS sanctionne l'instabilité visuelle d'une page bien plus que sa lenteur pure, et se corrige dans l'immense majorité des cas par une règle simple : réserver systématiquement l'espace de chaque élément avant qu'il ne soit effectivement chargé, qu'il s'agisse d'une image, d'une publicité, d'une police ou d'un contenu injecté dynamiquement.