Apprendre
Corriger le CLS : guide Cumulative Layout Shift et Page Experience
Un guide pratique pour détecter et corriger le Cumulative Layout Shift : pourquoi les éléments sautent, comment réserver l’espace et comment prouver que la mise en page est stable.
Lancez un audit DomainLens frais et utilisez le rapport comme liste de priorités.
Ce que mesure le CLS et pourquoi il agace
Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle — combien le contenu visible bouge pendant le chargement et l’usage de la page. Chaque fois qu’un élément déjà à l’écran saute à une nouvelle position sans action de l’utilisateur, cela compte comme un décalage, et le score additionne les plus grandes rafales de mouvement de la visite.
Un bon CLS est de 0,1 ou moins ; au-delà de 0,25, c’est mauvais. Et l’enjeu est concret : les décalages font cliquer au mauvais endroit, perdre sa place dans un article ou toucher une publicité par erreur. C’est la métrique qui traduit le mieux « cette page semble bâclée et cassée ».
Les sources habituelles de décalage
Presque chaque décalage vient d’un contenu qui arrive tard dans un espace qui ne lui était pas réservé. Les coupables courants :
- Images et vidéos sans attributs width et height, donc le navigateur ne peut pas réserver la boîte avant le chargement du fichier.
- Polices web qui se substituent et refont couler le texte (FOUT), poussant tout ce qui est en dessous.
- Publicités, embeds et iframes injectés après le rendu dans un conteneur sans hauteur fixe.
- Bannières, avis cookies et widgets « à voir aussi » insérés au-dessus du contenu existant.
- DOM injecté dynamiquement — une barre promo ou un test A/B qui apparaît juste après le premier rendu.
Comment repérer les décalages qu’on ne voit pas
Les décalages se produisent souvent plus vite que l’œil ne perçoit, ou seulement sur connexion lente ; il faut donc de l’outillage, pas un simple coup d’œil.
- Dans le panneau Performance, enregistrez un chargement avec throttling réseau et ouvrez la piste Layout Shifts — chaque entrée met en évidence l’élément déplacé et sa contribution.
- Utilisez l’extension Web Vitals pour voir le CLS s’accumuler en direct au défilement et à l’interaction.
- Vérifiez les données terrain dans Search Console/CrUX pour confirmer que de vrais utilisateurs le subissent, et sur quel template.
- Testez sur connexion bridée : beaucoup de décalages n’apparaissent que quand polices, images ou pubs arrivent tard.
Comment réserver l’espace pour que rien ne saute
- Définissez toujours width et height (ou un aspect-ratio CSS) sur images, vidéos et iframes pour que le navigateur réserve la boîte avant le chargement.
- Donnez aux emplacements pub, embeds et widgets dynamiques une min-height correspondant à leur taille habituelle, pour que le contenu tardif remplisse l’espace réservé.
- Chargez les polices avec font-display: optional ou swap, plus un fallback bien assorti et size-adjust pour minimiser le reflow.
- Réservez la place des bannières et avis dans la mise en page au lieu de les insérer au-dessus après le chargement — ou épinglez-les pour qu’ils recouvrent au lieu de pousser.
- Animez avec des transforms CSS, jamais des propriétés comme top ou height qui déclenchent un layout.
Les erreurs qui ramènent les décalages
- Retirer les dimensions en passant à une image « responsive » et se fier à la largeur CSS seule sans aspect-ratio.
- Lazy-loader les images au-dessus de la ligne de flottaison, ce qui les repousse dans un espace non réservé.
- Ne tester que sur un desktop rapide où polices et images arrivent instantanément et où aucun décalage n’est visible.
- Corriger la page d’accueil et supposer que le template produit ou article va bien — le CLS est par template.
Comment valider une mise en page stable
Réenregistrez le chargement dans le panneau Performance avec throttling et vérifiez que la piste Layout Shifts est vide pour le viewport, puis suivez la tendance du CLS terrain dans Search Console au fil des semaines.
Dans DomainLens, traitez le CLS avec le LCP et l’INP : une page rapide mais qui saute échoue quand même à la page experience. La meilleure correction est une mise en page stable dès le premier rendu, sur la connexion mobile lente qu’utilisent vraiment vos visiteurs.