Cumulative Layout Shift CLS

Vitesse et performance : tout savoir sur la métrique CLS (Cumulative Layout Shift)

Introduction

La vitesse et la performance d'un site web sont des facteurs clés pour garantir une excellente expérience utilisateur et un bon positionnement dans les résultats des moteurs de recherche comme Google. Parmi les nombreuses métriques utilisées pour évaluer la performance d’un site figure le CLS (Cumulative Layout Shift), une métrique essentielle qui mesure le décalage cumulatif de la mise en page et donc la stabilité visuelle d’une page web.

Un site rapide mais instable visuellement peut générer beaucoup de frustrations : clics involontaires, perte de repères, incompréhension du contenu, baisse de confiance… C’est précisément ce que le CLS permet de quantifier. Dans cet article complet et professionnel sur la « Vitesse et Performance CLS – Décalage cumulatif de mise en page », nous allons explorer en profondeur ce qu’est le CLS, comment il est calculé, quels sont les bons seuils, et surtout comment l’optimiser pour améliorer à la fois l’expérience utilisateur et vos performances SEO.

Concepts clés

Qu’est-ce que le CLS ?

Le Cumulative Layout Shift (CLS) est une métrique de performance des pages web qui mesure la stabilité visuelle d’une page. Il évalue à quel point les éléments visibles d’une page (images, boutons, blocs de texte, bannières, publicités, formulaires, etc.) se déplacent de façon inattendue pendant le chargement et, plus largement, durant la vie de la page lorsque l’utilisateur la consulte.

Concrètement, un changement de mise en page survient lorsqu’un élément visible change de position ou de taille, déplaçant le contenu autour de lui sans que l’utilisateur n’ait déclenché d’action justifiant ce mouvement (clic, tap, scroll, etc.). Le CLS additionne ensuite l’ensemble de ces décalages pour en faire un score global.

Un score de CLS élevé indique que les éléments de la page se déplacent fréquemment ou de manière importante. Cela peut entraîner une mauvaise expérience utilisateur, par exemple :

• un bouton « Acheter » qui se déplace au moment où l’utilisateur clique, provoquant un clic involontaire sur un autre élément ;
• un paragraphe de texte qui se décale pendant la lecture, obligeant l’utilisateur à retrouver sa ligne ;
• une bannière ou une publicité qui se charge tardivement et pousse le contenu déjà affiché vers le bas.

À l’inverse, un CLS faible signifie que la page est stable visuellement, ce qui contribue à une navigation fluide, à une meilleure compréhension du contenu et, souvent, à de meilleures performances de conversion.

Le CLS parmi les Core Web Vitals

Le CLS fait partie des Core Web Vitals, un ensemble d’indicateurs définis par Google pour mesurer la qualité de l’expérience utilisateur sur le web. Aujourd’hui, les trois principaux Core Web Vitals sont :

• LCP (Largest Contentful Paint) : mesure le temps nécessaire pour afficher le principal contenu visible de la page (souvent une grande image ou un bloc de texte).
• INP (Interaction to Next Paint) : remplace progressivement le FID et mesure la réactivité globale de la page aux interactions (clics, taps, saisies de texte).
• CLS (Cumulative Layout Shift) : mesure la stabilité visuelle en quantifiant les décalages inattendus de mise en page.

Historiquement, d’autres métriques comme le FCP (First Contentful Paint) ou le Speed Index sont également utilisées pour analyser les performances, mais le CLS se distingue en se focalisant spécifiquement sur les sauts visuels inattendus, un problème très perceptible par les utilisateurs.

Les seuils de CLS : qu’est-ce qu’un « bon » score ?

Le CLS est exprimé sous la forme d’un nombre décimal sans unité (par exemple 0,03 ; 0,12 ; 0,25). Plus le score est faible, meilleure est la stabilité visuelle.

Les recommandations généralement admises pour le CLS sont les suivantes :

• Bon CLS : ≤ 0,1
• À améliorer : entre 0,1 et 0,25
• Mauvais / médiocre : > 0,25

Pour offrir une bonne expérience à la majorité de vos utilisateurs, l’objectif réaliste est de maintenir un CLS inférieur ou égal à 0,1 pour au moins une grande partie de votre trafic, que ce soit sur mobile ou sur desktop.

Comment le CLS est-il calculé ?

Le calcul du CLS peut paraître technique, mais il est important d’en comprendre les grandes lignes pour optimiser efficacement vos pages. Le CLS est la somme des scores de chaque décalage de mise en page inattendu qui se produit pendant la durée de vie de la page.

Chaque décalage individuel est mesuré à l’aide de deux composantes :

• Impact fraction : la fraction de la zone visible (viewport) occupée par les éléments instables avant et après le décalage.
• Distance fraction : la distance maximale parcourue par l’un des éléments instables, rapportée à la taille du viewport (en pourcentage).

Le score de chaque layout shift est alors obtenu en multipliant ces deux valeurs :

Score de layout shift = Impact fraction × Distance fraction

Le score CLS final est la somme de ces différents scores de décalage, en tenant compte des règles d’agrégation actuelles (fenêtres de session de quelques secondes, exclusion des actions attendues…). En pratique, les outils comme PageSpeed Insights, Lighthouse, Search Console ou les rapports de terrain (CrUX) se chargent de ce calcul pour vous.

Dimension temporelle : quand les décalages sont-ils pris en compte ?

Le CLS ne tient pas compte de tous les mouvements sur une page de la même façon. Quelques principes importants :

• Les décalages qui se produisent sans interaction utilisateur, par exemple à cause du chargement tardif d’images, de bannières, de modules tiers ou de contenus injectés dynamiquement, contribuent au CLS.
• Les décalages qui se produisent dans un délai court après une interaction utilisateur éligible (généralement dans les 500 ms) sont considérés comme prévisibles et donc exclus du CLS, car l’utilisateur s’attend à un changement (ouverture d’un menu, d’un accordéon, etc.).
• En environnement réel, le CLS prend en compte les déplacements inattendus qui surviennent tout au long de la vie de la page, pas uniquement au moment du premier chargement.

Impact du CLS sur le SEO et le business

L’impact du CLS sur le SEO

Le CLS est un des signaux pris en compte dans le cadre des Core Web Vitals, qui eux-mêmes représentent une partie des signaux de classement liés à l’expérience de page. Un CLS très élevé peut donc peser négativement dans la balance lorsque Google compare plusieurs pages offrant un contenu similaire.

Cependant, le CLS ne remplace pas les autres facteurs majeurs de classement (pertinence du contenu, autorité, maillage, etc.). Il fonctionne comme un signal complémentaire : entre deux pages équivalentes en termes de contenu, celle qui offre une meilleure expérience (meilleur CLS, LCP, INP) aura davantage de chances d’être favorisée.

Impact sur la conversion et l’expérience utilisateur

Au-delà du SEO, le CLS a un impact direct sur vos performances business :

• Les clics involontaires créent de la frustration (abandon de panier, fermeture de la page, perte de confiance).
• Les décalages pendant la lecture nuisent à la compréhension de l’information et augmentent la fatigue cognitive.
• Une interface instable peut faire perdre à l’utilisateur le sentiment de maîtrise, ce qui réduit les conversions (inscriptions, achats, demandes de devis, etc.).

À l’inverse, une page stable, où les boutons restent à leur place et où le contenu ne se dérobe pas sous les yeux de l’utilisateur, favorise la confiance et la fluidité du parcours. C’est un facteur souvent sous-estimé dans l’optimisation du taux de conversion.

Les recommandations fréquentes pour un bon niveau de performance globale incluent :

• LCP inférieur à 2,5 secondes ;
• INP inférieur à 200 millisecondes ;
• CLS inférieur ou égal à 0,1.

CLS et autres métriques de performance

Comparaison avec le LCP

Le Largest Contentful Paint mesure le temps nécessaire pour afficher le principal élément de contenu visible dans la fenêtre (image héro, titre, section principale…). Il s’agit surtout d’une mesure de vitesse de rendu. Un bon LCP signifie que l’utilisateur voit rapidement le cœur de la page.

Le CLS, lui, ne mesure pas la vitesse mais la stabilité. Une page peut afficher rapidement son contenu principal (bon LCP) tout en se déplaçant ensuite à cause de contenus chargés tardivement (mauvais CLS). Il est donc indispensable de travailler simultanément la vitesse et la stabilité.

Comparaison avec l’INP et l’ancienne métrique FID

L’Interaction to Next Paint (INP) mesure la réactivité globale d’une page : le temps entre l’action de l’utilisateur (clic, tap, frappe) et le moment où l’interface réagit visiblement. Cette métrique a vocation à remplacer le First Input Delay (FID), qui ne mesurait que le premier délai d’interaction.

Le CLS ne concerne pas la réactivité, mais complète l’INP en garantissant que ce qui est déjà affiché reste stable et ne se déplace pas de manière imprévisible lorsque l’utilisateur interagit avec la page.

Comparaison avec le FCP et le Speed Index

Le First Contentful Paint (FCP) mesure le moment où le navigateur affiche pour la première fois un élément de contenu (texte, image, SVG…). Le Speed Index évalue la vitesse globale de remplissage visuel de la page. Ces métriques sont utiles pour comprendre la vitesse perçue, mais elles ne disent rien sur la stabilité des éléments une fois affichés.

C’est là que le CLS apporte une dimension complémentaire : il ne s’agit plus seulement de « quand » la page apparaît, mais de « comment » elle reste en place pendant que le reste du contenu se charge.

Principales causes d’un CLS élevé

Images et vidéos sans dimensions définies

L’une des causes les plus fréquentes d’un CLS élevé est l’utilisation d’images ou de vidéos sans largeur et hauteur définies. Lorsqu’un média se charge sans que l’espace nécessaire lui ait été réservé, le navigateur doit réarranger le contenu déjà affiché pour faire de la place, ce qui crée un décalage.

Publicités, bannières et iframes injectés dynamiquement

Les publicités, bannières de consentement, pop-ups et autres contenus tiers chargés après le contenu principal sont une autre source classique de CLS. Si l’espace n’est pas pré-réservé, ces éléments vont pousser le contenu vers le bas ou sur les côtés, créant un saut visuel important.

Polices web (webfonts) et FOIT/FOUT

Le chargement des polices externes peut aussi provoquer des décalages si la taille du texte change une fois la police chargée. On parle de FOIT (Flash of Invisible Text) ou de FOUT (Flash of Unstyled Text). Ces phénomènes peuvent amener des blocs de texte à se redimensionner et donc à décaler le reste du contenu.

Contenus injectés après coup

Les blocs de contenu insérés dynamiquement au-dessus d’éléments déjà visibles (recommandations produits, sections de blog, modules de chat, etc.) peuvent faire descendre brutalement ce qui était déjà en place, augmentant fortement le CLS.

Mauvaise gestion du lazy loading

Le lazy loading est très utile pour la performance, mais mal configuré, il peut générer des décalages. Par exemple, des images en dessous de la ligne de flottaison qui n’ont pas d’espace réservé et qui se chargent à mesure que l’utilisateur fait défiler la page peuvent pousser le contenu environnant et créer des mouvements inattendus.

Bonnes pratiques pour améliorer le CLS

Optimiser le contenu visuel

Pour améliorer votre score de CLS et renforcer la stabilité de votre site, plusieurs bonnes pratiques s’imposent :

• Définissez toujours la largeur et la hauteur de vos images et vidéos ou utilisez des conteneurs avec des ratios d’aspect (aspect-ratio) afin que le navigateur puisse réserver l’espace nécessaire avant le chargement effectif du média.
• Utilisez des formats modernes comme WebP ou AVIF et compressez vos images pour réduire leur poids, ce qui accélère leur affichage et limite les décalages tardifs.
• Mettez en œuvre un lazy loading maîtrisé : n’appliquez le chargement différé que sur les images situées en dessous de la ligne de flottaison et prévoyez toujours un espace réservé (placeholder) de la bonne taille.
• Utilisez des placeholders ou des skeletons : affichez des espaces réservés (blocs de couleur, silhouettes de cartes, cadres) à la taille exacte des éléments à venir pour éviter les changements brusques de mise en page.

Améliorer la structure du code et du layout

Une structure de code claire et bien pensée est essentielle pour maintenir un bon score de CLS :

• Réservez l’espace pour les publicités et les blocs dynamiques : définissez des hauteurs minimales pour les emplacements publicitaires, les bannières, les blocs de recommandations ou les widgets tiers, même s’ils se chargent plus tard.
• Évitez de déplacer le contenu déjà visible : lorsqu’un nouvel élément doit être ajouté, faites-le autant que possible en dessous du contenu déjà affiché ou dans une zone explicitement réservée.
• Réduisez l’utilisation de scripts bloquants : les scripts JavaScript qui bloquent le rendu ou manipulent massivement le DOM tardivement peuvent provoquer des réorganisations de mise en page. Privilégiez le chargement différé ou asynchrone, et optimisez la quantité de JavaScript exécutée.
• Implémentez un design responsive cohérent : assurez-vous que votre site s’adapte correctement à toutes les tailles d’écran, avec des grilles et des conteneurs prévisibles. Évitez que le passage d’une largeur de viewport à une autre ne provoque des déplacements inattendus d’éléments qui ne seraient pas anticipés par le design.
• Stabilisez les polices web : utilisez des stratégies comme font-display: swap et choisissez des polices de secours (fallback fonts) aux dimensions proches de la police finale pour limiter les changements de taille de texte.

Créer un contenu de qualité dans une interface stable

Le CLS ne se limite pas à un sujet purement technique. Il s’inscrit dans une réflexion plus large sur l’expérience utilisateur :

• Rédigez un contenu pertinent, clair et engageant : lorsque le texte est structuré (titres, sous-titres, paragraphes courts, listes), l’utilisateur se repère mieux et ressent davantage la stabilité de la page.
• Structurez votre page pour la lisibilité : utilisez des intertitres, des blocs bien délimités, des marges cohérentes. Une page visuellement bien organisée renforce la perception de stabilité.
• Mettez en place une navigation intuitive : menus clairs, fil d’Ariane, pieds de page cohérents… Une navigation fluide aide l’utilisateur à rester concentré sur le contenu, sans être perturbé par des déplacements inutiles.
• Limitez les publicités et éléments intrusifs : évitez les pop-ups agressifs, les interstitiels plein écran non essentiels, ou les bannières qui apparaissent sans prévenir et poussent le contenu principal. Si ces éléments sont nécessaires, prévoyez toujours un espace dédié.

Mesurer et diagnostiquer le CLS

Outils de mesure

Pour optimiser le CLS, la première étape est de le mesurer précisément. Plusieurs outils permettent d’obtenir des données utiles :

• PageSpeed Insights : fournit des données de laboratoire (simulées) et des données de terrain (issues de l’usage réel) pour le CLS, ainsi que des recommandations concrètes.
• Lighthouse (intégré à Chrome DevTools) : permet d’analyser le CLS en environnement de test et de voir comment la page se comporte sur une connexion simulée.
• Chrome User Experience Report (CrUX) et Search Console : pour les sites suffisamment visités, ces rapports donnent une vision statistique du CLS réel vécu par les utilisateurs.
• Outils d’analytics et de monitoring : certaines solutions de monitoring des performances front-end proposent un suivi du CLS par page, par device ou par pays.

Analyse des causes de décalages

Une fois le score de CLS connu, il est essentiel de comprendre quels éléments provoquent les décalages. Les navigateurs modernes et certains outils d’audit affichent une chronologie des décalages, mettant en évidence :

• à quel moment du chargement se produit le décalage ;
• quel élément (ou groupe d’éléments) en est responsable ;
• la magnitude de l’impact sur le score global.

En observant ces données, vous pouvez identifier rapidement les modèles récurrents (images sans dimensions, blocs publicitaires, widgets tiers, etc.) et cibler les correctifs les plus efficaces.

Stratégies d’optimisation avancées du CLS

Architecture front-end et frameworks

Les frameworks modernes (React, Vue, Angular, Svelte, etc.) permettent de construire des interfaces riches, mais peuvent aussi générer des décalages s’ils ne sont pas utilisés avec précaution.

• Pré-rendez autant que possible : le rendu côté serveur (SSR) ou le static site generation (SSG) permettent de livrer une structure HTML plus complète dès le départ, réduisant certains décalages liés à l’hydratation tardive.
• Prévoyez des espaces fixes pour les composants dynamiques : cartes produits, carrousels, modules de recommandation… réservez-leur une hauteur minimale dès le markup initial.
• Gérez soigneusement les états de chargement : utilisez des loaders ou skeletons de taille fixe plutôt que des conteneurs qui changent brusquement de dimensions.

Gestion fine des polices et du texte

Les polices personnalisées sont souvent un élément fort de l’identité visuelle, mais elles ne doivent pas nuire à la stabilité :

• Choisissez des polices de secours proches en largeur et en hauteur pour limiter les changements de layout lors du passage à la police finale.
• Utilisez des attributs et paramètres adaptés (comme font-display) pour contrôler le comportement du texte pendant le chargement.
• Testez l’affichage sur différents navigateurs et appareils pour vérifier que les variations de rendu n’introduisent pas de décalages inattendus.

Optimisation des publicités et contenus tiers

Les contenus tiers sont souvent indispensables (monétisation, tracking, widgets sociaux), mais ils peuvent fortement dégrader le CLS s’ils sont intégrés sans précaution :

• Travaillez avec des formats publicitaires aux dimensions prédéfinies : bannière, skyscraper, rectangle… assurez-vous que chaque emplacement est prévu dans la maquette dès le départ.
• Réservez des conteneurs fixes pour les contenus tiers (iframes, vidéos intégrées, modules de chat, etc.).
• Chargez les scripts tiers de façon contrôlée : évitez qu’ils manipulent la structure principale de la page après le chargement initial, surtout au-dessus de la ligne de flottaison.

Bonnes pratiques de contenu et d’ergonomie

Structurer le contenu pour la stabilité et la lisibilité

Un bon score de CLS est plus facile à atteindre lorsque le contenu est logiquement structuré :

• Utilisez une hiérarchie claire de balises HTML (h1, h2, h3…) pour organiser vos sections.
• Limitez les blocs insérés au-dessus du contenu déjà présent, sauf si l’espace a été prévu et que le comportement est clairement anticipé.
• Évitez de modifier profondément la structure de la page pendant la navigation, sauf dans le cadre d’interactions explicites (ouverture de menu, d’accordéon, etc.).

Limiter les animations perturbantes

Les animations et transitions peuvent enrichir l’expérience, mais mal utilisées, elles peuvent être perçues comme des décalages gênants :

• Privilégiez des animations qui n’affectent pas la position des éléments clés en cours de consultation (titres, boutons d’action principaux).
• Évitez les animations qui poussent ou tirent le contenu dans la zone de lecture sans action claire de l’utilisateur.
• Testez les transitions sur différents appareils pour vérifier qu’elles restent fluides et ne génèrent pas de réorganisations brusques.

Résumé des objectifs de performance à viser

Pour offrir une expérience utilisateur de haute qualité, réduire la frustration et optimiser vos performances SEO et business, vous pouvez retenir les objectifs suivants :

• Un CLS ≤ 0,1 pour la majorité de vos utilisateurs, afin de garantir une bonne stabilité visuelle.
• Un LCP < 2,5 secondes pour que le contenu principal s’affiche rapidement.
• Un INP < 200 ms pour assurer une réactivité fluide aux interactions.

En combinant ces objectifs avec une approche centrée sur l’utilisateur, une architecture front-end maîtrisée et des choix de design cohérents, vous améliorez non seulement vos indicateurs techniques, mais aussi la satisfaction globale de vos visiteurs et vos . Le CLS n’est pas seulement une métrique à cocher dans un rapport : c’est un levier concret pour rendre votre site plus agréable, plus fiable et plus performant au quotidien.