Qu'est-ce que le Cumulative Layout Shift (CLS) et comment le corriger

Qu'est-ce que le Cumulative Layout Shift (CLS) ?

Le Cumulative Layout Shift (CLS) représente la partie "stabilité visuelle" des Core Web Vitals. Le Cumulative Layout Shift (CLS) mesure les mouvements de la page lorsque le contenu est rendu ou que du nouveau contenu est affiché sur la page. Il calcule un score basé sur la proportion de la page qui se déplace de manière inattendue et sur la distance de ce déplacement. Ces décalages de contenu sont très gênants, vous faisant perdre votre place dans un article que vous avez commencé à lire ou, pire encore, vous faisant cliquer sur le mauvais bouton !

Qu'est-ce qu'un bon score Cumulative Layout Shift (CLS) ?

Un bon score CLS se situe entre 0 et 0.1. Si votre score CLS est compris entre 0.1 et 0.25, il doit être amélioré. Tout score CLS supérieur à 0.25 est considéré comme médiocre. Pour valider les Core Web Vitals pour le Cumulative Layout Shift, au moins 75% de vos visiteurs doivent avoir un "bon" score CLS.

L'importance du CLS dans les performances web et l'UX

Le Cumulative Layout Shift (CLS) est lié à la fois aux performances web et à l'UX car il impacte directement la façon dont une page web semble stable et prévisible lors de son chargement. Voici pourquoi c'est important :

• UX, engagement et perception de la marque : Les décalages de mise en page inattendus perturbent le flux utilisateur, rendant plus difficile la recherche d'informations, le clic sur des boutons et l'interaction avec la page comme prévu. Cette frustration peut conduire à de mauvaises expériences où les utilisateurs abandonnent complètement le site web. L'UX d'un site web se reflète sur la marque qui se trouve derrière. Des décalages de mise en page fréquents peuvent donner l'impression d'un site web mal conçu ou mal entretenu, perturber l'engagement des utilisateurs et entraîner une diminution des interactions et potentiellement des taux de rebond plus élevés.
• Accessibilité : Les décalages de mise en page peuvent être particulièrement perturbants pour les utilisateurs handicapés qui s'appuient sur des technologies d'assistance ou des lecteurs d'écran. Une mise en page stable permet à chacun de naviguer et d'interagir efficacement avec le site web.
• SEO et classement dans les recherches : Les Core Web Vitals sont un facteur de classement modeste mais significatif dans Google. Google, ainsi que d'autres moteurs de recherche, privilégie les sites web qui offrent une bonne UX. Le CLS est l'une des métriques des Core Web Vitals que Google prend en compte lors du classement des sites web. L'optimisation du CLS peut donner à votre site web un avantage concurrentiel dans les résultats de recherche.

Comment le CLS est-il mesuré ?

Le CLS d'une page peut être mesuré avec l'API Layout Instability. Voici un exemple d'utilisation simple de cette API :

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Calcul du CLS

Le CLS est calculé à l'aide d'une formule simple, mais élégante :

CLS = sum(impact-fraction * distance-fraction)

La fraction d'impact (impact-fraction) mesure quelle proportion du contenu visible de la page s'est déplacée. La fraction de distance (distance-fraction) mesure à quelle distance le contenu s'est déplacé. Si, par exemple, 50% de la page s'est déplacée sur 25% de la hauteur de la fenêtre d'affichage (viewport), le score CLS = 0.50 * 0.25 = 0.125.

Décalages de mise en page attendus vs inattendus

Tous les décalages de mise en page ne sont pas mauvais, seuls ceux que vous n'attendez pas le sont. Lorsque vous cliquez sur un lien "charger plus d'éléments", par exemple, vous vous attendez à ce que plus d'éléments apparaissent sur la page et que le contenu de la page se décale.

C'est pourquoi seuls les décalages de mise en page inattendus causeront une contribution au CLS. Par exemple, si un utilisateur clique sur un bouton et qu'en réponse du nouveau contenu est ajouté à la page (par exemple un menu déroulant), le décalage de mise en page sera exclu du CLS. Pour être précis : les décalages de mise en page qui se produisent dans les 500 millisecondes suivant une interaction de l'utilisateur (user input) seront exclus des calculs.

Sessions de décalage de mise en page

Lorsque le CLS a été introduit pour la première fois, certains sites ont été injustement pénalisés avec un mauvais score CLS. Par exemple, une page qui implémente un défilement infini aurait vu l'impact du nouveau contenu ajouté s'additionner au score CLS total pour chaque nouveau défilement. C'est pourquoi le CLS est désormais calculé en sessions. Chaque session a une durée maximale de 5 secondes et un écart d'une seconde entre les décalages de mise en page. La session avec le plus grand score CLS deviendra le score CLS final.

Le CLS et les Core Web Vitals

Le Cumulative Layout Shift (CLS) est une métrique importante centrée sur l'utilisateur pour mesurer la stabilité visuelle. Le Cumulative Layout Shift (CLS) fait partie des Core Web Vitals avec le Largest Contentful Paint (LCP) et l'Interaction to Next Paint (INP). Ensemble, ces trois métriques mesurent les performances de chargement, l'interactivité et la stabilité visuelle.

Causes courantes du CLS

L'origine de tous les décalages de mise en page est fondamentalement la même. À un moment donné, un élément qui était placé au-dessus d'un autre élément a pris plus ou moins de place qu'auparavant. Cela est généralement dû à une ou plusieurs de ces causes :

Images, vidéos et iframes sans dimensions

Les médias non dimensionnés sont la première cause du CLS sur le web. Selon le Web Almanac 2025, 62% des pages mobiles comportent au moins une image sans dimensions explicites. Pour le guide complet couvrant les images, vidéos, iframes non dimensionnés, le piège CSS width: auto, la direction artistique, les incohérences d'images responsives, le lazy loading et les espaces réservés (placeholders), consultez Comment les images et les médias causent le Layout Shift.

Remplacements de polices web (Web font swaps)

Les polices web sont téléchargées depuis internet pendant que la page s'affiche avec une police de secours (fallback font). Lorsque la police web arrive, la différence de taille entre la police de secours et la police finale provoque un décalage de mise en page. Seulement 11% des pages préchargent les polices web, ce qui signifie que la grande majorité du web est vulnérable au CLS dû aux remplacements de polices.

Le correctif implique deux techniques : faire correspondre la police de secours à la police web en utilisant des redéfinitions de métriques @font-face (size-adjust, ascent-override), et accélérer la livraison des polices en les auto-hébergeant et en préchargeant les polices critiques. Consultez le guide d'identification et de correction pour des exemples de code.

Animations et transitions CSS

Les animations CSS qui utilisent des propriétés déclenchant la mise en page comme top, left, width et height forcent le navigateur à recalculer la mise en page à chaque frame, produisant ainsi du CLS. Selon le Web Almanac, 39% des pages mobiles ont des animations non composées contribuant au CLS. La solution consiste à utiliser transform et opacity à la place, qui s'exécutent sur le compositeur GPU et ne déclenchent jamais de mise en page. Pour la procédure complète, voir le décalage de mise en page causé par les transitions CSS.

Annonces, intégrations et contenu injecté dynamiquement

Les annonces se chargent tardivement et poussent le contenu vers le bas. Les bannières de consentement aux cookies apparaissent et décalent la page. Les requêtes AJAX injectent du nouveau contenu sans réserver d'espace. Ce sont tous le même problème : quelque chose apparaît sur la page dont le navigateur n'avait pas connaissance au moment du rendu. La solution est toujours de réserver de l'espace avec min-height et d'isoler le conteneur avec le style contain: layout. Pour les intégrations tierces comme YouTube et Google Maps, le modèle de façade (facade pattern) élimine entièrement le CLS.

Décalages de mise en page déclenchés par le défilement

Il s'agit de la cause de CLS que Lighthouse ne détectera jamais. Les en-têtes qui se masquent au défilement, les effets de parallaxe et les barres de navigation qui rétrécissent animent souvent top ou height, et le défilement n'est pas une entrée excluante dans la spécification Layout Instability. Chaque décalage de mise en page déclenché par le défilement compte pour votre score CLS. Le correctif : utilisez transform: translateY() pour toute animation déclenchée par le défilement. Voir comment les animations déclenchées par le défilement causent du CLS pour la procédure complète.

Trouver et corriger les problèmes de CLS

Le diagnostic du CLS suit la même méthodologie donnant la priorité aux données de terrain que les autres Core Web Vitals. Commencez avec la Google Search Console ou un outil RUM comme CoreDash pour confirmer quelles pages sont affectées et quels éléments se déplacent. Utilisez ensuite les Chrome DevTools ou l'extension Core Web Vitals Visualizer pour reproduire le problème localement et identifier la cause première.

Pour le processus de diagnostic complet étape par étape, des présentations d'outils, des correctifs de code pour chaque cause et une liste de contrôle pour les corrections rapides, consultez notre guide dédié : Trouver et corriger les problèmes de Cumulative Layout Shift (CLS).

Étude de cas : Rakuten 24 et l'impact commercial du CLS

Rakuten 24, une grande plateforme e-commerce japonaise, a mené une étude détaillée sur l'impact du Cumulative Layout Shift sur ses métriques commerciales. En réduisant le CLS sur l'ensemble de ses pages de produits et de catégories, Rakuten 24 a obtenu des résultats remarquables :

• Augmentation de 53.37% des revenus par visiteur pour les utilisateurs ayant bénéficié d'un faible CLS par rapport à ceux ayant un CLS élevé.
• Augmentation de 33.13% du taux de conversion pour la même cohorte de CLS amélioré.
• Baisse de 15.20% du taux de rebond parmi les visiteurs ayant des expériences de page stables.

Ces chiffres démontrent que le CLS n'est pas seulement une métrique technique. L'instabilité visuelle coûte directement des revenus aux entreprises en frustrant les utilisateurs au cours de leur navigation et de leur parcours d'achat. Lorsque les éléments se déplacent de manière inattendue, les utilisateurs perdent confiance, font des erreurs de clic et abandonnent leurs sessions. L'étude de Rakuten 24 confirme qu'investir dans l'optimisation du CLS a un retour sur investissement mesurable, en particulier pour les sites e-commerce où chaque interaction compte.

Ce que montrent les données CLS dans le monde réel

Les données de CoreDash montrent que le CLS est le Core Web Vitals le plus performant, avec 92.8% des chargements de page sur corewebvitals.io atteignant un score "bon" et pratiquement aucun écart entre les appareils mobiles et de bureau. Les ordinateurs de bureau (92.8% bon) et les mobiles (92.7% bon) atteignent des scores CLS presque parfaits, avec un p75 de 0 sur les deux types d'appareils.

Cela contraste avec des métriques telles que le LCP et l'INP, où les performances mobiles sont nettement inférieures à celles des ordinateurs de bureau. Le CLS est la seule métrique à être meilleure sur mobile que sur bureau sur l'ensemble du web, ce qui est l'inverse de tous les autres Core Web Vitals.

À l'échelle mondiale, selon le Web Almanac 2025, le tableau est moins optimiste :

• 72% des sites web atteignent globalement de bons scores CLS, tandis que 11% ont un CLS médiocre.
• 62% des pages mobiles ont au moins une image non dimensionnée (contre 66% en 2024, mais cela reste un contributeur majeur au CLS).
• 39% des pages mobiles ont des animations non composées contribuant au CLS.
• Seulement 11% des pages préchargent les polices web, ce qui signifie que la grande majorité des sites sont vulnérables aux décalages de mise en page dus aux remplacements de polices.

Le CLS a montré une amélioration constante d'une année sur l'autre à l'échelle mondiale, mais les données révèlent que les images non dimensionnées et les animations non composées restent les deux causes les plus courantes. Résoudre ces deux problèmes à eux seuls éliminerait les décalages de mise en page pour une grande partie du web.

Guides associés

Cette page centrale couvre le Cumulative Layout Shift à un niveau élevé. Pour des conseils détaillés et pratiques sur la recherche et la correction des problèmes de CLS, explorez ces guides dédiés :

• Trouver et corriger les problèmes de CLS : Le guide de diagnostic complet étape par étape avec des présentations d'outils, des correctifs de code pour chaque cause et une liste de contrôle pour les corrections rapides.
• Comment les images et les médias causent le Layout Shift : Le guide définitif du CLS dû aux images, vidéos, iframes non dimensionnés, à la direction artistique, aux images responsives, au lazy loading et aux espaces réservés (placeholders).
• Corriger le décalage de mise en page causé par le redimensionnement automatique des images : Une procédure complète pour ajouter des dimensions appropriées aux images et aux conteneurs responsives.
• Corriger le décalage de mise en page causé par les transitions CSS : Identifier et remplacer les animations CSS déclenchant des mises en page par des alternatives composées.
• Animations déclenchées par le défilement et CLS : La cause de CLS que Lighthouse ne peut pas détecter, et comment y remédier.
• Auto-héberger Google Fonts : Réduire le CLS dû au chargement des polices en hébergeant soi-même les polices avec des stratégies de font-display et de préchargement appropriées.
• S'assurer que le texte reste visible pendant le chargement des polices web : Configurer le font-display et les redéfinitions des métriques de police pour éliminer les décalages de mise en page dus aux remplacements de polices.
• Créer un widget de chat avec des Core Web Vitals parfaits : Une étude de cas sur l'implémentation de widgets tiers sans introduire de régressions CLS, INP ou LCP.

Pour un aperçu complet de toutes les métriques Core Web Vitals et des stratégies d'optimisation, visitez la présentation des Core Web Vitals ou utilisez la checklist ultime des Core Web Vitals pour auditer votre site.