Les meilleurs conseils pour corriger les problèmes de CLS dans Search Console

Table of contents

CLS : le contexte

Le Cumulative Layout Shift mesure les déplacements de mise en page inattendus. Chaque fois qu’un élément visible change de position pendant le chargement d’une page ou lors d’une interaction, un score de déplacement est calculé. Le score cumulatif constitue le CLS.

Causes fréquentes :

• Images ou iframes sans attributs width et height explicites
• Annonces qui s’étendent après que le contenu environnant a déjà été rendu
• Contenu injecté dynamiquement (bannières, avis de cookies, widgets de chat) inséré au-dessus du contenu existant
• Polices web provoquant un flash et un recalcul lors de leur chargement (FOUT/FOIT)
• JavaScript tiers qui ajoute des éléments d’interface après le rendu initial

À lire aussi : Comment corriger les problèmes de LCP dans Search Console

Mesurer le CLS

Google Search Console

Le rapport Core Web Vitals de Search Console est le point de départ. Il met en évidence les pages signalées comme « Médiocres » (CLS ≥ 0,25) ou « À améliorer » (0,1–0,25), regroupées par type de problème. Utilisez ce rapport pour obtenir la liste des URLs concernées.

PageSpeed Insights

PageSpeed Insights (PSI) affiche à la fois des données de laboratoire (simulation Lighthouse) et des données de terrain provenant d’utilisateurs réels via le Chrome UX Report (CrUX). Les données de terrain comptent davantage pour le classement — elles reflètent les expériences utilisateurs réelles, pas seulement un test synthétique.

PSI ne simule que le viewport initial au chargement, il peut donc ne pas détecter le CLS déclenché par le défilement ou les interactions utilisateur. Pour ces cas, utilisez Chrome DevTools.

Chrome DevTools et l’extension Web Vitals

L’extension Web Vitals pour Chrome (maintenue par Google) affiche les scores CLS en temps réel pendant que vous faites défiler la page et interagissez avec elle. C’est le moyen le plus rapide de reproduire manuellement les décalages de mise en page. Le panneau Performance de Chrome DevTools met également en évidence les enregistrements de décalage avec des annotations indiquant quels éléments ont bougé et de combien.

Corriger les problèmes de CLS

Ajouter width et height à toutes les images et iframes

C’est la correction la plus impactante pour la plupart des sites. Sans dimensions explicites, le navigateur ne sait pas combien d’espace réserver pendant le chargement d’une image, de sorte que le contenu en dessous est repoussé vers le bas lorsque l’image apparaît.

<!-- Mauvais : pas de dimensions -->
<img src="photo.jpg" alt="…">

<!-- Bon : les dimensions explicites permettent au navigateur de réserver l'espace -->
<img src="photo.jpg" alt="…" width="800" height="450">

Le CSS moderne (aspect-ratio) produit le même effet pour les images responsives, mais définir les attributs width et height directement dans le HTML reste l’approche la plus fiable et est géré automatiquement par la plupart des frameworks modernes et des pipelines d’images de CMS.

Réserver l’espace pour les annonces

Les annonces sont la cause la plus fréquente de CLS élevé sur les sites monétisés. Les régies publicitaires servent des formats dynamiques, et si aucun espace n’est réservé, la page se recompose lors du chargement de l’annonce.

1. Réservez un conteneur fixe (min-height correspondant à votre format d’annonce le plus courant) avant le chargement de la balise publicitaire.
2. Ne réduisez pas le conteneur si aucune annonce n’est diffusée — un espace réservé vide évite un second recalcul.
3. Soyez particulièrement vigilant avec les annonces placées près du haut du viewport. Les annonces non fixes insérées au-dessus du pli provoquent les pires scores CLS.
4. Utilisez les données d’impression historiques de votre réseau publicitaire pour déterminer quels formats sont les plus courants pour chaque emplacement, puis dimensionnez le conteneur en conséquence.

Éviter d’insérer du contenu au-dessus du contenu existant

Les bannières de consentement aux cookies, les invites de notification et les widgets de chat qui se chargent de manière asynchrone et apparaissent au-dessus du contenu existant sont une source fréquente de CLS. Options :

• Chargez-les dans un overlay en position fixe (ils n’affectent pas le flux du document).
• Pré-allouez l’espace dans la mise en page s’ils doivent apparaître en ligne.
• Pour les bannières de cookies en particulier, envisagez un placement en bas d’écran — cela évite complètement le CLS et est tout aussi conforme légalement.

Corriger le chargement des polices web (FOIT et FOUT)

Le FOIT (Flash of Invisible Text) se produit quand un navigateur masque le texte jusqu’au chargement d’une police personnalisée. Le FOUT (Flash of Unstyled Text) se produit quand une police de remplacement est affichée en premier, puis remplacée — la différence de métriques typographiques provoque un décalage de mise en page.

La solution est font-display: swap combiné avec <link rel="preload"> pour les polices critiques :

<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap;
}

font-display: swap provoque un FOUT (texte visible mais sans style) plutôt qu’un FOIT (texte invisible), ce qui est préférable pour le CLS car le texte est immédiatement visible. Pour réduire davantage l’impact de ce remplacement sur la métrique, utilisez la propriété CSS size-adjust pour faire correspondre les métriques de la police de remplacement à celles de la police personnalisée — cela minimise le recalcul lorsque la police personnalisée entre en jeu.

JavaScript tiers

Les scripts tiers (boutons de partage, widgets de commentaires, chat en direct, popups d’analyse) se chargent de manière asynchrone et injectent souvent des éléments d’interface après que la page a déjà été rendue. Pour minimiser leur impact sur le CLS :

• Déplacez les éléments visuels tiers sous le viewport initial quand c’est possible — le contenu plus bas sur la page a plus de temps pour se charger avant que l’utilisateur l’atteigne.
• Prédéfinissez les dimensions du conteneur avant l’exécution du script, pour que le navigateur sache déjà combien d’espace réserver.
• Utilisez l’onglet Network de Chrome DevTools filtré par origines tierces pour identifier quels scripts contribuent aux décalages de mise en page.

Chargement différé et espaces réservés

Le chargement différé reporte le chargement des images jusqu’à ce qu’elles soient proches du viewport, ce qui économise de la bande passante. Mais si aucun espace réservé n’est défini, le conteneur de l’image s’effondre à une hauteur nulle, puis s’ouvre brusquement lorsque l’image se charge.

Assurez-vous toujours que les éléments chargés en différé ont des dimensions explicites ou un aspect-ratio défini via CSS, afin que le navigateur réserve le bon espace avant même le chargement de l’image. Cela s’applique aussi bien à l’attribut natif loading="lazy" qu’aux chargeurs différés basés sur JavaScript.

CLS — FAQ 2026

FID est-il encore un signal de classement en 2026 ?

Non. Google a officiellement retiré FID (First Input Delay) des Core Web Vitals en mars 2024 et l’a remplacé par INP (Interaction to Next Paint). Le trio CWV actuel est LCP, INP et CLS. Mettez à jour toute documentation interne ou tout outil qui fait encore référence à FID.

Quel score CLS viser ?

Les seuils de Google : en dessous de 0,1 est « bon », de 0,1 à 0,25 est « à améliorer », au-dessus de 0,25 est « médiocre ». Visez en dessous de 0,1. Le score est mesuré au 75e percentile des chargements de page dans les données de terrain CrUX.

Le CLS influence-t-il le classement ?

Oui, mais c’est un signal parmi d’autres. Les Core Web Vitals sont un facteur de classement lié à l’expérience de page depuis mi-2021. Un CLS médiocre ne fera pas sombrer une page solide, mais peut faire la différence à égalité et nuira directement aux métriques d’engagement utilisateur (taux de rebond, profondeur de session) par ses propres mérites.

Mon score PSI montre un bon CLS mais Search Console signale la page comme médiocre — lequel a raison ?

Faites confiance à Search Console (données de terrain) plutôt qu’aux données de laboratoire de PSI en cas de conflit. Les tests de laboratoire PSI ne simulent que le chargement initial du viewport ; ils manquent le CLS déclenché par le défilement de l’utilisateur, les substitutions de polices sur des connexions lentes, ou les annonces chargées après interaction. Les données de terrain CrUX dans Search Console reflètent de vrais utilisateurs dans de vraies conditions.

Lectures associées :

• Comment corriger les problèmes de LCP dans Search Console
• Comment optimiser la vitesse de votre site web
• Audit SEO technique

La version courte

Si vous lisez ceci parce que le flux de travail décrit ici vous prend toute la semaine, c’est exactement le type de boucle pour laquelle je construis des agents IA. Deux créneaux de développement ouverts à la fois.

Mis à jour pour mai 2026

La tendance Google en 2026, c’est les AI Overviews partout : l’expérience SGE de 2023 est devenue une fonctionnalité par défaut en mai 2024 et apparaît désormais sur environ 60 % des requêtes informationnelles aux États-Unis. Pour les opérateurs SEO et publicitaires :

• Le CTR organique sur les requêtes avec AI Overviews a chuté de 15 à 30 % en moyenne selon les études publiées d’Ahrefs, Authoritas et similaires (données 2024–25).
• Google Ads a rebaptisé plusieurs fonctionnalités PMax en AI-powered Search ; l’interface de gestion des campagnes propose désormais par défaut des suggestions d’enchères par IA.
• Search Console a ajouté un filtre « impressions AI Overview » fin 2025 — si un article ici fait référence aux rapports GSC, le guide nécessite une mise à jour.
• Les revenus publicitaires de Google ont dépassé ~265 milliards de dollars en 2024 ; Search représente toujours environ 57 % du chiffre d’affaires total d’Alphabet.

La réponse à « comment Google gagne de l’argent » en 2026 : toujours les annonces Search (dominantes), mais YouTube Ads, Cloud et les abonnements (YouTube Premium + Google One) sont désormais des lignes significatives.