Cumulative Layout Shiftscore CLSstabilité visuelleCore Web Vitals

Antoine BlotConsultant SEO & GEO

9 mars 20268 min.md

Cumulative Layout Shift (CLS) : le guide pour atteindre un score inférieur à 0.1

L'essentiel à retenir

• Le Cumulative Layout Shift (CLS) est un Core Web Vital qui mesure la stabilité visuelle d'une page, avec un seuil optimal inférieur à 0.1
• Pour diagnostiquer le CLS, utilisez Google Search Console pour les données terrain et Chrome DevTools pour l'Analyse en temps réel
• Les principales causes sont les images sans dimensions, le contenu dynamique non réservé et les polices web mal optimisées
• Depuis mars 2024, le CLS fonctionne en synergie avec LCP et le nouveau métrique INP pour évaluer l'expérience utilisateur globale

Le décalage de mise en page frustre vos utilisateurs et nuit à vos conversions. Imaginez un visiteur prêt à acheter qui clique accidentellement sur une publicité parce qu'un bouton s'est déplacé au moment du chargement. Les pages avec des scores CLS élevés peuvent conduire à une mauvaise expérience utilisateur, car les éléments qui se déplacent peuvent amener les utilisateurs à cliquer accidentellement sur les mauvaises parties d'une page . La solution ? Maîtriser le Cumulative Layout Shift pour créer des sites web stables et performants.

Qu'est-ce que le Cumulative Layout Shift (CLS) et pourquoi est-il essentiel ?

Le Cumulative Layout Shift (CLS) est une métrique Core Web Vitals qui mesure la stabilité visuelle sur une page web. Il quantifie combien de contenu, comme les images ou le texte, bouge de manière inattendue pendant le chargement de la page . Cette métrique capture l'essence même d'une expérience utilisateur fluide : la préVisibilité visuelle.

Le calcul du CLS repose sur deux composants fondamentaux. Le score de décalage de mise en page est le produit de deux mesures de ce mouvement : la fraction d'impact et la fraction de distance. La fraction d'impact mesure comment les éléments instables affectent la zone de viewport entre deux frames . Concrètement, si un élément occupe 50% de l'écran puis se déplace de 25% vers le bas, la fraction d'impact est 0.75 et la fraction de distance est 0.25, donc le score de décalage de mise en page est 0.75 * 0.25 = 0.1875 .

Google définit trois seuils critiques pour le CLS : un bon score CLS est 0.1 ou inférieur. Google catégorise cette plage de score comme 'Bon', ce qui signifie qu'il atteint le seuil idéal pour la stabilité visuelle dans l'évaluation des Core Web Vitals . Les scores entre 0.1 et 0.25 nécessitent une amélioration, tandis que ceux supérieurs à 0.25 sont considérés comme problématiques (Source : Infidigit, 2025).

Comment mesurer et diagnostiquer précisément votre score CLS ?

La mesure du CLS nécessite une approche différenciée entre les Données de terrain et de laboratoire. Le CLS de laboratoire est mesuré dans des environnements de test contrôlés (Lighthouse), tandis que le CLS de terrain provient d'utilisateurs réels (CrUX). Le laboratoire ne mesure que le chargement initial, mais le terrain capture toute la session de page, y compris le défilement et l'Interaction. Les données de terrain sont ce que Google utilise pour les signaux de classement .

Pour identifier vos pages problématiques, commencez par Google Search Console. Utilisez des outils comme Google PageSpeed Insights, Search Console, et Lighthouse dans Chrome DevTools pour voir votre score CLS. Ces outils fournissent des insights sur vos décalages de mise en page, aidant ainsi à identifier et traiter les zones nécessitant des améliorations .

Chrome DevTools offre une Analyse en temps réel particulièrement précieuse. Chrome DevTools : Partie du navigateur Chrome, DevTools vous permet de mesurer le CLS en temps réel pendant que vous interagissez avec la page, permettant une identification immédiate des décalages de mise en page . Cette approche vous permet de visualiser exactement quand et où se produisent les décalages (Source : Infidigit, 2025).

Quelles sont les causes communes d'un CLS élevé et comment les corriger ?

Images et médias sans dimensions

Quand les attributs width et height sont manquants, les navigateurs ne peuvent pas allouer l'espace approprié pendant le chargement. Cela provoque des décalages de contenu une fois que le média est entièrement chargé et dimensionné . La solution consiste à toujours spécifier les dimensions dans le HTML ou utiliser la propriété CSS aspect-ratio pour les Designs responsifs.

Contenu dynamique non réservé

Le Contenu dynamique comme les publicités ou les frames intégrées qui se chargent de manière asynchrone peut pousser le contenu existant si leur espace n'est pas pré-alloué . Réservez un espace statique avec des dimensions fixes pour tous les éléments qui se chargeront après le Contenu principal.

Polices web problématiques

Les polices qui se chargent après le rendu initial de la page peuvent causer des décalages de texte . Utilisez font-display: swap et préchargez vos polices critiques avec <link rel="preload"> pour minimiser l'impact visuel du changement de police (Source : BrowserStack, 2025).

CLS, LCP, INP : la synergie des Core Web Vitals pour l'UX

Depuis mars 2024, l'Interaction to Next Paint (INP) est maintenant l'une des métriques Core Web Vitals de Google, remplaçant First Input Delay (FID) le 12 mars 2024 . Cette évolution renforce l'importance d'une approche holistique des performances web.

Google a finalisé Core Web Vitals 2.0, remplaçant First Input Delay (FID) par Interaction to Next Paint (INP) et continuant de s'appuyer sur LCP (Largest Contentful Paint) et CLS (Cumulative Layout Shift) comme les trois métriques d'expérience utilisateur mesurées sur le terrain. Les sites qui atteignent les seuils pour LCP, INP et CLS (75e percentile) offrent aux utilisateurs des expériences plus rapides, plus stables et plus réactives (Source : Medium, 2025).

L'interaction entre ces métriques est cruciale : une image qui se charge lentement (mauvais LCP) sans dimensions définies provoque aussi un CLS élevé. Au-delà des effets directs sur le classement, le CLS influence les métriques de comportement utilisateur comme le Taux de rebond et le temps de session, qui affectent indirectement le SEO (Source : Status218, 2025).