Cumulative Layout Shift (CLS) : stabilité visuelle

Le Cumulative Layout Shift (CLS) est la métrique des Core Web Vitals qui mesure à quel point une page paraît stable ou instable pendant son chargement et son utilisation. Quand le contenu saute parce qu'une image sans espace réservé se charge en retard ou qu'un bandeau cookies s'insère, l'utilisateur clique sur le mauvais bouton. Le CLS quantifie précisément cette expérience. Cet article explique comment le score est calculé, quelles sont les causes des décalages de mise en page, comment stabiliser les images, les polices web, les bandeaux de consentement et les composants Next.js, et pourquoi le CLS reste avant tout un signal UX pour les utilisateurs humains, alors que les crawlers IA s'intéressent surtout au HTML rendu côté serveur.

Pourquoi la stabilité visuelle compte pour les entreprises

Depuis l'introduction des Core Web Vitals, le CLS est, aux côtés du Largest Contentful Paint (LCP) et de l'Interaction to Next Paint (INP), un signal officiel de Page Experience. L'INP en est le membre le plus récent : il est devenu une Core Web Vital le 12 mars 2024, en remplacement du FID (source internationale, Google). Le CLS en fait partie depuis le début et, des trois métriques, c'est la seule qui ne décrit ni la vitesse ni la réactivité, mais le calme visuel de la page.

Le levier économique est mesurable. Lors d'un test A/B documenté par Google pour la boutique japonaise Rakuten 24, la variante optimisée a amélioré le CLS de 92,72 pour cent tout en augmentant le chiffre d'affaires par visiteur de 53,37 pour cent et le taux de conversion de 33,13 pour cent (étude de cas internationale).

Yahoo! JAPAN News a réduit le CLS, en données de laboratoire, d'environ 0,2 à 0 et a ensuite enregistré 15,1 pour cent de pages vues par session en plus, une durée de session supérieure de 13,3 pour cent et un taux de rebond inférieur de 1,72 point de pourcentage (étude de cas internationale). Ces effets s'inscrivent dans un constat plus large : un temps de chargement mobile plus rapide de seulement 0,1 seconde augmente le taux de conversion dans le retail de 8,4 pour cent et les dépenses de 9,2 pour cent (étude internationale, Deloitte et 55 pour le compte de Google).

Pour le marché autrichien, c'est un point important, car l'usage y est presque entièrement mobile et connecté. Début 2025, le taux de pénétration d'Internet en Autriche atteignait 95,3 pour cent, avec 8,69 millions d'internautes et 13,4 millions d'abonnements mobiles, soit 147 pour cent de la population (Autriche). Les décalages de mise en page touchent particulièrement les smartphones, où des viewports plus petits et des connexions plus lentes rendent chaque saut plus visible.

Comment le score CLS est calculé

Le CLS mesure la fenêtre de session présentant la somme la plus élevée de décalages de mise en page inattendus. Un décalage de mise en page se produit lorsqu'un élément visible change de position de départ entre deux images rendues, sans qu'une interaction de l'utilisateur en soit à l'origine. Le score de chaque décalage repose sur deux facteurs.

• Impact Fraction : la part du viewport visible touchée par les éléments décalés. Si un bloc occupant la moitié supérieure de l'écran se déplace vers le bas, une grande partie du viewport est concernée.
• Distance Fraction : la distance parcourue par l'élément le plus instable, divisée par la plus grande dimension du viewport. Elle indique jusqu'où le contenu saute.

Le score de décalage de mise en page est le produit de l'Impact Fraction et de la Distance Fraction. Le CLS n'additionne pas naïvement toutes les valeurs individuelles sur toute la durée de vie de la page, il travaille avec des fenêtres de session : les décalages sont regroupés en fenêtres, chaque fenêtre dure au maximum 5 secondes avec au plus 1 seconde d'écart entre deux décalages. La valeur de la fenêtre la plus élevée est retenue comme CLS de la page. Cela évite que les longues sessions produisent artificiellement de mauvaises valeurs.

Les seuils sont clairement définis. Selon Google, les pages devraient viser un CLS de 0,1 ou moins ; au-delà de 0,25, la valeur est jugée mauvaise, mesurée au 75e centile des chargements de page, séparément sur mobile et sur ordinateur (source internationale, Google). Entre 0,1 et 0,25, une amélioration est nécessaire. Le 75e centile signifie que trois chargements de page sur quatre doivent atteindre l'objectif, pas seulement la moyenne.

Sur mobile, le CLS est celle des trois Core Web Vitals qui obtient les meilleurs résultats. Selon le HTTP Archive Web Almanac, en 2025, 72 pour cent des pages sur ordinateur et 81 pour cent des pages mobiles atteignent un bon CLS (étude internationale), alors que sur mobile seules 62 pour cent obtiennent un bon LCP et 77 pour cent un bon INP. Les progrès sont nets : la part des pages mobiles avec un bon CLS est passée de 60 pour cent en 2020 à 79 pour cent en 2024 (étude internationale).

Les causes les plus fréquentes des décalages de mise en page

Presque tous les problèmes de CLS se ramènent à quelques schémas. Si tu les connais, tu trouves vite les coupables.

• Images, vidéos et iframes sans dimensions : sans width et height ou un ratio défini, le navigateur ne connaît la hauteur qu'une fois le fichier chargé. Jusque-là, l'élément n'occupe aucune place ; ensuite, il repousse le reste du contenu vers le bas.
• Contenus insérés dynamiquement : publicités, embeds, bandeaux newsletter et surtout boîtes de dialogue de consentement apparaissent souvent après le premier rendu et poussent le contenu existant sur le côté.
• Remplacement des polices web (FOUT/FOIT) : le navigateur affiche d'abord une police de secours, puis la remplace par la police web chargée. Si les métriques des polices diffèrent, le flux du texte change et le contenu se décale.
• Composants chargés tardivement : widgets chargés côté client, skeleton loaders de mauvaise hauteur ou contenus qui n'apparaissent qu'après l'hydratation décalent le reste de la page.

Les images sont la cause la plus fréquente et la plus facile à éviter. Selon le Web Almanac 2025, 62 pour cent des pages mobiles et 65 pour cent des pages sur ordinateur omettent de définir les dimensions d'au moins une image (étude internationale). La majorité des pages laisse donc le navigateur deviner la taille d'au moins une image.

Stabiliser les images et les médias

La mesure la plus efficace consiste à communiquer à l'avance au navigateur les dimensions de chaque média. Il réserve ainsi l'espace avant le chargement du fichier.

• Définir width et height en attributs : les navigateurs modernes calculent le ratio à partir des attributs HTML width et height et gardent l'espace libre, même si l'image est redimensionnée de façon responsive en CSS. C'est le levier le plus rapide.
• Utiliser aspect-ratio en CSS : pour les conteneurs dont le ratio est fixe mais dont les dimensions exactes en pixels varient, aspect-ratio réserve l'espace indépendamment du fichier chargé.
• min-height pour les contenus inconnus : lorsque la hauteur finale n'est pas connue, par exemple pour des listes chargées après coup, une hauteur minimale pertinente empêche le conteneur de s'effondrer.
• Bien utiliser le lazy loading : le chargement différé économise de la bande passante, mais ne doit jamais se faire sans espace réservé. Une image en lazy loading sans dimensions est l'une des sources de CLS les plus fréquentes, car elle surgit précisément au moment où l'utilisateur fait défiler la page.

Intégrer les polices web sans décalage

Les polices web sont quasi universelles et représentent donc un risque systématique de CLS. Selon le Web Almanac 2025, 87 pour cent des pages mobiles utilisent au moins une police web, mais seules 15 à 16 pour cent des pages recourent au préchargement des polices (étude internationale). L'Almanac fait explicitement le lien avec le CLS : lorsque le navigateur remplace une police de secours par la police web chargée, la taille et la chasse du texte changent, et le contenu se décale.

• Choisir font-display en connaissance de cause : la valeur swap affiche immédiatement le texte dans la police de secours et effectue le remplacement plus tard, ce qui évite le FOIT mais peut provoquer des décalages de type FOUT. optional renonce complètement au remplacement passé un court délai et constitue souvent le choix le plus serein pour la stabilité.
• Aligner les métriques de secours : avec size-adjust, ascent-override et descent-override dans une règle @font-face, tu peux ajuster la police de secours pour qu'elle occupe la même place que la police web. Le remplacement devient alors pratiquement invisible.
• Précharger les polices critiques : un hint preload ciblé pour la police la plus importante la rend disponible tôt. Vu la faible adoption de cette pratique, c'est un avantage facile à prendre sur la concurrence.
• Privilégier l'auto-hébergement : avec des polices auto-hébergées, la connexion supplémentaire à des fournisseurs tiers disparaît. La police est disponible plus tôt et la fenêtre de temps pendant laquelle un décalage peut se produire se raccourcit. En Europe, l'auto-hébergement présente en outre un avantage au regard du RGPD, car aucune adresse IP n'est transmise à des services de polices externes.

Le CLS dans Next.js et les frameworks JavaScript

Les frameworks modernes ont leurs propres pièges en matière de CLS, mais fournissent aussi les outils adaptés. L'essentiel est que les contenus rendus côté serveur conservent leur géométrie finale dès que l'hydratation commence.

• Utiliser next/image : le composant impose d'indiquer des dimensions ou fill avec un conteneur défini, et réserve ainsi automatiquement l'espace. La source de CLS la plus fréquente liée aux images disparaît donc dès le développement.
• Adopter next/font : next/font charge les polices au moment du build en auto-hébergement, élimine les requêtes externes et calcule automatiquement les métriques de secours, si bien que le changement de police ne provoque aucun décalage.
• Construire des skeleton loaders aux bonnes dimensions : les placeholders doivent avoir exactement la hauteur du contenu à venir. Un skeleton plus petit que le bloc final décale la page au moment du remplacement, exactement comme s'il n'y avait aucun placeholder.
• Tenir compte du SSR, du streaming et de l'hydratation : le rendu côté serveur et le streaming livrent tôt un HTML stable. Les problèmes surviennent lorsque des contenus chargés côté client apparaissent au-dessus ou entre des blocs déjà visibles. Ces contenus ont leur place en bas de page ou dans des zones réservées fixes.

Bandeaux de consentement et publicités tierces sans impact sur le CLS

Dans l'espace RGPD, la boîte de dialogue de consentement est pratiquement incontournable et compte parmi les causes de CLS les plus fréquentes, car elle apparaît tôt et de façon très visible. Les emplacements publicitaires se comportent de manière similaire, leur taille n'étant souvent connue qu'à l'exécution.

• Bandeau en overlay plutôt que dans le flux : une boîte de dialogue de consentement affichée en overlay fixe au-dessus du contenu ne décale rien. À l'inverse, un bandeau qui s'insère en haut du flux du document et repousse tout vers le bas provoque un décalage important.
• Dimensionner les emplacements publicitaires à l'avance : réserve pour chaque emplacement publicitaire la hauteur attendue, via le dimensionnement des slots ou un conteneur avec aspect-ratio. Si aucune annonce ne s'affiche, l'espace doit se replier de façon maîtrisée, sans que le contenu saute.
• transform plutôt que des propriétés qui modifient la mise en page : anime les apparitions et disparitions avec transform et opacity. Ces propriétés sont traitées par le compositeur et ne déclenchent pas de reflow, contrairement à top, left, width ou height.

Concevoir des animations et un rendu efficaces

Les animations non composites sont une source de CLS sous-estimée. Selon le Web Almanac 2024, 39 pour cent des pages mobiles et 42 pour cent des pages sur ordinateur utilisent des animations non composites (étude internationale), qui recalculent les styles, refont la mise en page du document et redessinent les pixels.

• N'animer que transform et opacity : ces propriétés s'exécutent sur le GPU et ne modifient pas la mise en page. Les animations de propriétés géométriques comme width, height ou margin obligent le navigateur à effectuer un reflow et peuvent décaler les éléments voisins.
• Utiliser content-visibility de façon ciblée : avec content-visibility: auto, le navigateur ignore le rendu des zones non visibles. Combiné à contain-intrinsic-size, l'espace réservé est conservé, si bien qu'aucun décalage ne se produit lorsque la zone entre dans le viewport au défilement.
• Utiliser le CSS containment : la propriété contain limite les effets de mise en page, de style et de peinture d'un élément. Les modifications à l'intérieur d'un conteneur n'affectent ainsi pas le reste de la page.

Mesurer le CLS : laboratoire contre terrain

Le CLS se mesure à deux niveaux, complémentaires et souvent divergents. Les données de laboratoire fournissent des valeurs reproductibles dans des conditions contrôlées, les données terrain reflètent l'expérience réelle de vrais utilisateurs.

• Données terrain (CrUX) : le Chrome UX Report collecte des données réelles anonymisées et sert de base à l'évaluation officielle au 75e centile. Le rapport Core Web Vitals de la Google Search Console et PageSpeed Insights s'appuient dessus.
• Données de laboratoire (Lighthouse) : Lighthouse et la partie laboratoire de PageSpeed Insights simulent un chargement de page. Ils sont idéaux pour le débogage, mais ne couvrent que le chargement initial, pas les décalages ultérieurs liés aux interactions.
• Real User Monitoring avec web-vitals.js : la bibliothèque JavaScript officielle mesure le CLS directement dans le navigateur de vrais utilisateurs, sur toute la durée de vie de la page, et peut envoyer les valeurs à un outil d'analytics. Elle comble ainsi l'écart entre le laboratoire et CrUX et rend visibles les décalages tardifs.

La différence principale : les données de laboratoire ne mesurent généralement que le chargement, alors que le CLS se forme sur toute la durée de vie de la page. Une page peut afficher un CLS parfait dans Lighthouse et obtenir malgré tout de mauvais résultats sur le terrain, par exemple parce qu'un bandeau ne s'insère qu'après plusieurs secondes ou lors d'une interaction.

Erreurs fréquentes dans l'optimisation du CLS

Certains schémas récurrents coûtent de la stabilité, mais peuvent être évités de façon ciblée.

• Ne regarder que les données de laboratoire : si tu ne vérifies que Lighthouse, tu passes à côté des décalages tardifs dus aux bandeaux de consentement, aux publicités ou aux interactions, qui n'apparaissent que sur le terrain.
• Livrer des images sans dimensions : malgré une solution simple, cela concerne toujours la majorité des pages selon HTTP Archive (62 pour cent sur mobile, 65 pour cent sur ordinateur).
• Insérer le bandeau de consentement dans le flux du document : un bandeau qui repousse le contenu provoque souvent le plus gros décalage de toute la page.
• Animer des propriétés géométriques : les animations de width, height, top ou left déclenchent des reflows et décalent les éléments voisins.
• Skeleton loaders de mauvaise hauteur : un placeholder qui ne correspond pas à la hauteur finale décale la page au moment du remplacement, exactement comme s'il n'y avait aucun placeholder.

CLS, Page Experience et contexte GEO

Le CLS fait partie de la Page Experience et agit comme un signal complémentaire, pas comme un levier de classement à lui seul. À pertinence comparable, une meilleure expérience utilisateur peut faire la différence, c'est pourquoi le CLS est souvent décrit comme un critère de départage. Avec le LCP et l'INP, on obtient une image complète de la qualité perçue : le LCP mesure la vitesse d'affichage du contenu principal, l'INP la réactivité de la page et le CLS sa stabilité. Le cache amélioré (bfcache) influe lui aussi sur le CLS : lors de la navigation arrière et avant, le navigateur restaure les pages éligibles au bfcache entièrement chargées et sans nouveaux décalages de mise en page (source internationale, Google). Cela améliore encore le CLS sur le terrain.

Dans le contexte des crawlers IA et de la Generative Engine Optimization (GEO), il faut bien situer les choses. Le CLS est un signal visuel destiné aux utilisateurs humains, qui naît dans le navigateur pendant le calcul de la mise en page et des pixels. Les crawlers IA, eux, traitent avant tout le HTML rendu côté serveur et sa structure sémantique. Un CLS élevé ne dégrade pas directement la visibilité dans les réponses IA, car un crawler ne perçoit pas les sauts visuels. Le lien est indirect : les mesures contre le CLS, comme un server-side rendering propre, un HTML stable dès le départ et le renoncement aux contenus chargés exclusivement côté client, améliorent en même temps la lisibilité par les machines pour les crawlers IA. Le CLS reste donc avant tout un signal UX pour les humains, tandis que la même discipline technique profite aussi à la visibilité GEO.

Pour aller plus loin et conclusion

Le CLS mesure la stabilité visuelle d'une page et doit se situer à 0,1 ou moins au 75e centile. Le levier le plus puissant est aussi le plus simple : livrer les images, vidéos et iframes avec leurs dimensions, car c'est la cause la plus fréquente et la plus facile à éviter. Les polices web doivent être auto-hébergées, intégrées avec des métriques de secours alignées et une stratégie font-display ; les bandeaux de consentement et les publicités ont besoin d'un espace réservé ou d'un overlay, et les animations ne devraient utiliser que transform et opacity. Dans Next.js, next/image et next/font font automatiquement une grande partie de ce travail.

Prochaines étapes utiles : vérifier les problèmes de CLS dans le rapport Core Web Vitals de la Search Console, mettre en place un Real User Monitoring avec web-vitals.js pour capter les décalages tardifs sur le terrain, et contrôler systématiquement que tous les médias ainsi que les emplacements de consentement et publicitaires disposent d'un espace réservé. Comme les effets business des études de cas documentées sont considérables, l'optimisation du CLS se traduit directement en conversions et en chiffre d'affaires, indépendamment du classement.