Cumulative Layout Shift (CLS) : définition, calcul et optimisation

Tu as déjà vécu ça : tu lis un article sur ton téléphone, tu t’apprêtes à cliquer sur un bouton, et au dernier moment tout le contenu saute vers le bas. Tu cliques sur la mauvaise chose, tu perds ta position dans la page, et tu quittes le site en râlant. Ce décalage visuel a un nom technique : le Cumulative Layout Shift, ou CLS.

Le CLS est l’une des trois métriques que Google utilise pour évaluer la qualité d’un site web. Si ton score est mauvais, ton référencement en souffre et tes visiteurs partent. Dans cet article, tu vas découvrir :

• Ce qu’est le CLS et pourquoi Google le surveille de près
• Comment ton score est calculé (avec la formule exacte et des exemples)
• Les causes les plus fréquentes d’un mauvais CLS
• Les outils pour mesurer ton score
• Les techniques concrètes pour l’améliorer

Qu’est-ce que le Cumulative Layout Shift ?

Le CLS, une métrique Core Web Vitals de stabilité visuelle

Le Cumulative Layout Shift fait partie des Core Web Vitals, les trois indicateurs de performance que Google utilise comme facteurs de classement. Le LCP (Largest Contentful Paint) mesure la vitesse de chargement, l’INP (Interaction to Next Paint) mesure la réactivité, et le CLS mesure la stabilité visuelle.

Concrètement, le CLS évalue à quel point les éléments de ta page bougent de manière inattendue pendant que le visiteur la consulte. Plus les éléments restent en place, meilleur est ton score. Un CLS de 0, c’est une page parfaitement stable où rien ne bouge.

Ce que le CLS mesure concrètement sur une page web

Le CLS ne regarde pas tous les mouvements sur ta page. Il se concentre sur les décalages inattendus : un texte qui descend parce qu’une image apparaît au-dessus, une pub qui s’insère et pousse tout le contenu, une police de caractères qui change de taille après le chargement initial.

Les mouvements déclenchés volontairement par le visiteur (cliquer sur un menu déroulant, ouvrir un accordéon) ne sont pas comptabilisés. Google ne pénalise que les sauts de mise en page que l’utilisateur n’a pas provoqués.

Pourquoi le CLS est important pour ton site

L’impact sur l’expérience utilisateur

Un mauvais CLS transforme la navigation en parcours du combattant. Voici ce qui se passe quand tes éléments bougent de manière imprévisible :

• Perte de position dans la lecture : le visiteur lit un paragraphe, une image se charge au-dessus et tout le texte descend. Il doit retrouver où il en était.
• Clic accidentel : le visiteur vise un bouton “Ajouter au panier” et, au moment du clic, une bannière publicitaire apparaît. Il clique sur la pub au lieu du bouton.
• Action involontaire : dans les cas les plus graves, un décalage peut amener le visiteur à confirmer une commande qu’il voulait annuler, ou à supprimer quelque chose qu’il voulait conserver.

Chacune de ces situations génère de la frustration. Et un visiteur frustré, c’est un visiteur qui quitte ton site.

L’impact sur le référencement naturel (SEO)

Depuis 2021, Google intègre les Core Web Vitals dans ses critères de classement. Un score CLS médiocre envoie un signal négatif à l’algorithme : ta page offre une mauvaise expérience de navigation. Google favorise les pages stables dans ses résultats de recherche, surtout quand deux contenus sont comparables en qualité.

Le CLS n’est pas le facteur SEO le plus puissant (la pertinence du contenu reste reine), mais c’est un critère de départage. À contenu égal, le site avec un meilleur CLS passe devant.

D’ailleurs, une bonne stabilité visuelle ne suffit pas : assure-toi aussi que tes URLs suivent les bonnes pratiques de SEO URL pour maximiser ton positionnement global.

L’impact sur les conversions et le taux de rebond

Un visiteur qui clique sur le mauvais élément à cause d’un décalage de mise en page risque de quitter immédiatement ton site. Ton taux de rebond augmente, le temps passé sur la page diminue, et tes conversions chutent.

Ce problème est encore plus prononcé sur les pages commerciales. Si une pub s’insère entre le visiteur et le bouton d’achat, tu perds potentiellement une vente. Les sites e-commerce avec un CLS élevé observent des taux de conversion plus bas, simplement parce que l’interface n’inspire pas confiance.

Qu’est-ce qu’un bon score CLS ?

Les trois seuils définis par Google

Google classe les scores CLS en trois catégories :

Score CLS	Évaluation
0 à 0,1	Bon : la page est visuellement stable
0,1 à 0,25	À améliorer : des décalages perceptibles existent
Au-dessus de 0,25	Médiocre : l’expérience est dégradée

L’objectif est d’obtenir un score inférieur à 0,1 pour au moins 75 % de tes visiteurs. Google utilise le 75e centile comme référence : cela signifie que même les visiteurs avec des conditions de navigation moins favorables (connexion lente, appareil ancien) doivent profiter d’une page stable.

Différences entre les scores mobile et desktop

Le CLS peut varier significativement entre mobile et desktop. Sur mobile, les écrans plus petits amplifient l’impact visuel des décalages : un élément qui se déplace de 50 pixels représente un pourcentage plus grand de la fenêtre d’affichage. Les connexions mobiles, souvent plus lentes, augmentent aussi le risque de chargement asynchrone qui provoque des sauts.

Pense à vérifier ton CLS sur les deux types d’appareils. Un score parfait sur desktop ne garantit pas la même chose sur mobile.

Comment le CLS est-il calculé ?

La formule : Impact Fraction × Distance Fraction

Le score d’un décalage individuel se calcule avec cette formule :

Layout Shift Score = Impact Fraction × Distance Fraction

L’Impact Fraction correspond au pourcentage de la fenêtre d’affichage (viewport) occupé par l’élément instable, en combinant sa position avant et après le décalage. Si un élément occupe 50 % de l’écran et se déplace vers le bas, la zone totale impactée (position initiale + position finale) peut représenter 75 % du viewport. L’Impact Fraction est alors de 0,75.

La Distance Fraction mesure la distance parcourue par l’élément, exprimée en pourcentage de la plus grande dimension du viewport. Si un élément se déplace de 25 % de la hauteur de l’écran, la Distance Fraction est de 0,25.

Exemple concret de calcul du score CLS

Prenons un cas simple : un bloc de texte occupe la moitié de ton écran (50 % du viewport). Une image se charge au-dessus et pousse ce bloc vers le bas de 25 % de la hauteur de l’écran.

• Impact Fraction : la zone combinée (position initiale + finale) représente 75 % du viewport → 0,75
• Distance Fraction : le bloc s’est déplacé de 25 % de la hauteur → 0,25
• Score : 0,75 × 0,25 = 0,1875

Avec un seul décalage de ce type, tu dépasses déjà le seuil de 0,1. C’est pour ça qu’il faut traquer chaque source de mouvement sur ta page.

Autre exemple plus léger : un bouton occupe 30 % de l’écran et se déplace de 10 %. Le score est 0,3 × 0,1 = 0,03. Ce décalage est acceptable.

Le calcul par fenêtres de session depuis 2021

Avant avril 2021, Google additionnait tous les décalages survenus pendant la durée de vie d’une page. Ce calcul pénalisait injustement les pages longues ou les applications web où l’utilisateur reste longtemps.

Depuis la mise à jour, le CLS se calcule par fenêtres de session. Une fenêtre de session regroupe les décalages qui se produisent rapidement les uns après les autres (moins d’une seconde d’intervalle), dans une durée maximale de 5 secondes. Ton score CLS final correspond au score de la fenêtre de session la plus élevée, pas à la somme de tous les décalages.

Ce changement est une bonne nouvelle : si ta page a un petit décalage isolé en bas de page et un gros décalage au chargement, seul le plus gros compte.

Les causes les plus fréquentes d’un mauvais CLS

Images et vidéos sans dimensions définies

C’est la cause numéro un des problèmes de CLS. Quand une image n’a pas d’attributs width et height dans le HTML, le navigateur ne sait pas quelle place lui réserver. Il charge d’abord le texte, puis quand l’image arrive, tout le contenu en dessous se décale pour lui faire de la place.

La solution est simple : indique toujours les dimensions de tes images, soit directement dans le HTML (width="800" height="600"), soit via CSS avec la propriété aspect-ratio.

Polices de caractères qui se chargent tardivement

Quand tu utilises une police personnalisée (Google Fonts par exemple), le navigateur affiche d’abord le texte avec une police par défaut (Arial, Times New Roman). Quand la police personnalisée finit de se charger, elle remplace la police par défaut. Si les deux polices n’ont pas exactement la même taille, tout le texte se décale légèrement : c’est le phénomène appelé FOUT (Flash of Unstyled Text).

Pour limiter ce problème, tu peux héberger tes polices localement au lieu de les charger depuis un serveur externe, utiliser la propriété CSS font-display: swap ou optional, et précharger tes polices avec la balise <link rel="preload">.

Publicités et widgets tiers qui se redimensionnent

Les blocs publicitaires sont une source majeure de CLS, surtout quand leur taille n’est pas fixée à l’avance. Une pub qui s’affiche après le chargement de la page repousse tout le contenu situé en dessous.

La même chose se produit avec les widgets tiers : boutons de partage social, formulaires d’inscription intégrés, lecteurs vidéo embarqués. Chaque élément qui se charge après le rendu initial de la page risque de provoquer un décalage.

Contenu injecté dynamiquement au-dessus du contenu existant

Insérer du contenu au-dessus de ce que le visiteur est en train de lire, c’est la recette garantie pour un mauvais CLS. Les bannières de consentement cookies qui poussent la page vers le bas, les notifications qui s’insèrent en haut, les barres promotionnelles qui apparaissent après quelques secondes : tous ces éléments provoquent des décalages.

La règle est simple : ne jamais insérer de contenu au-dessus du contenu existant, sauf en réponse directe à une action du visiteur.

Décalages attendus et décalages inattendus : ce que le CLS prend en compte

Les interactions utilisateur exclues du calcul

Le CLS ne pénalise pas tous les mouvements sur ta page. Les décalages qui se produisent dans les 500 millisecondes suivant une interaction utilisateur (clic, appui sur une touche, tap sur l’écran) sont automatiquement exclus grâce au flag hadRecentInput.

Par exemple, si un visiteur clique sur “Voir plus” et que le contenu se déplie, ce mouvement n’est pas compté dans le CLS. La logique est que l’utilisateur s’attend à ce que la page réagisse à son action.

Attention : les interactions continues comme le scroll, le glissement ou le pinch-to-zoom ne sont pas considérées comme des interactions discrètes. Si une image sans dimensions apparaît pendant que le visiteur scrolle (lazy loading mal implémenté), le décalage est bien comptabilisé.

Les animations CSS qui ne déclenchent pas de layout shift

Tu peux animer des éléments sans impacter ton CLS en utilisant la propriété CSS transform. Les transformations comme transform: scale() et transform: translate() déplacent visuellement un élément sans modifier sa position dans le flux du document. Le navigateur ne considère pas ça comme un décalage de mise en page.

En revanche, modifier les propriétés top, left, width ou height provoque un vrai repositionnement dans le flux : le CLS le détecte et le comptabilise. Privilégie toujours transform pour tes animations.

Comment mesurer le Cumulative Layout Shift ?

Les outils de données terrain (PageSpeed Insights, Search Console, CrUX)

Les outils de données terrain mesurent le CLS tel que les vrais visiteurs le vivent. C’est la source la plus fiable pour évaluer ton score réel.

• PageSpeed Insights : entre l’URL de ta page et regarde la section “Données de terrain”. Le CLS y est affiché avec un code couleur (vert, orange, rouge).
• Google Search Console : le rapport Core Web Vitals te donne une vue globale du CLS sur l’ensemble de ton site, page par page.
• Chrome UX Report (CrUX) : la base de données qui alimente PageSpeed Insights. Tu peux y accéder directement via BigQuery ou l’API CrUX pour des analyses plus poussées.
• Bibliothèque web-vitals : une bibliothèque JavaScript que tu peux intégrer à ton site pour collecter les données CLS de tes propres visiteurs, avec la fonction onCLS().

Les outils de laboratoire (Lighthouse, Chrome DevTools, WebPageTest)

Les outils de laboratoire testent ta page dans un environnement contrôlé. Ils sont utiles pour diagnostiquer les problèmes, mais leurs scores ne reflètent pas toujours l’expérience réelle.

• Lighthouse (intégré à Chrome DevTools) : lance un audit de performance et regarde le score CLS dans les résultats. Lighthouse identifie aussi les éléments responsables des décalages.
• Chrome DevTools : l’onglet Performance te permet d’enregistrer le chargement de ta page et de repérer visuellement chaque layout shift.
• WebPageTest : un outil en ligne qui charge ta page depuis différents serveurs dans le monde et mesure le CLS dans des conditions réseau variées.

Pourquoi les scores Lab et Field sont souvent différents

Si tu observes un écart entre ton score Lighthouse et ton score PageSpeed Insights, c’est normal. Les outils de laboratoire ne mesurent que les décalages qui se produisent au chargement initial de la page. Ils ne captent pas :

• Les décalages liés au scroll (lazy loading d’images sans dimensions réservées)
• Les décalages causés par le contenu personnalisé (publicités ciblées, tests A/B)
• L’effet du cache : un visiteur régulier avec les ressources en cache a un meilleur CLS qu’un nouveau visiteur

Pour l’optimisation, fais confiance aux données terrain en priorité. Utilise les outils de laboratoire pour identifier les causes techniques, mais mesure tes progrès avec les données réelles de tes visiteurs.

Comment améliorer son score CLS ?

Attribuer des dimensions à toutes les images et vidéos

C’est le premier réflexe à avoir. Chaque image et chaque vidéo sur ta page doit avoir des dimensions explicites pour que le navigateur puisse réserver l’espace avant le chargement.

En HTML, ajoute les attributs width et height :

html

<img src="photo.jpg" width="800" height="600" alt="Description">

En CSS, tu peux utiliser aspect-ratio pour maintenir le ratio sans fixer les dimensions en pixels :

css

img {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

Cette simple modification résout une grande partie des problèmes de CLS sur la plupart des sites.

Réserver un espace pour les publicités et les iframes

Si ton site affiche des publicités, réserve un espace fixe pour chaque emplacement publicitaire avec min-height en CSS. Même si la pub met quelques secondes à se charger, l’espace est déjà occupé et le reste de la page ne bouge pas.

.ad-container {
  min-height: 250px;
  min-width: 300px;
}

Applique la même logique aux iframes (vidéos YouTube embarquées, formulaires externes, cartes Google Maps). Définis toujours une hauteur minimale pour éviter les sauts au chargement.

Optimiser le chargement des polices de caractères

Pour éviter les décalages liés aux polices, plusieurs techniques fonctionnent :

• Héberger les polices localement plutôt que les charger depuis Google Fonts ou un CDN externe. Le chargement est plus rapide et plus prévisible.
• Précharger les polices avec <link rel="preload" href="police.woff2" as="font" crossorigin> dans le <head> de ta page.
• Utiliser font-display: optional en CSS : si la police n’est pas chargée dans les premières millisecondes, le navigateur garde la police par défaut sans provoquer de décalage.
• Choisir des polices web safe (Arial, Verdana, Georgia) quand le design le permet. Pas de chargement externe, pas de décalage.

Utiliser les transformations CSS plutôt que les changements de mise en page

Pour toutes tes animations et transitions, remplace les modifications de propriétés de mise en page par des transformations CSS :

Au lieu de…	Utilise…
top, left, right, bottom	transform: translate()
width, height	transform: scale()
margin pour déplacer	transform: translate()

Les transformations CSS sont traitées par le GPU du navigateur, ne provoquent pas de recalcul de mise en page, et n’impactent pas le CLS. C’est un double gain : meilleure performance et meilleur score.

Le cas WordPress : réduire le CLS avec les bons réglages

Sur WordPress, plusieurs sources de CLS sont spécifiques à l’écosystème :

• Les extensions de cache et d’optimisation peuvent retarder le chargement de certains éléments au-dessus de la ligne de flottaison. Vérifie les réglages de WP Rocket, Autoptimize ou LiteSpeed Cache pour exclure le contenu above the fold des optimisations de lazy loading.
• Les thèmes mal codés qui ne définissent pas les dimensions des images dans les templates. Teste ton thème avec Lighthouse pour repérer les éléments sans dimensions.
• Les polices du thème : beaucoup de thèmes chargent des polices Google Fonts en externe. Héberge-les localement ou utilise une extension comme OMGF (Optimize My Google Fonts).
• Les publicités AdSense : utilise les emplacements avec taille fixe plutôt que les emplacements adaptatifs qui se redimensionnent après le chargement.

Passe en revue tes extensions une par une en les désactivant temporairement pour identifier celles qui dégradent ton CLS. Un audit méthodique vaut mieux que des corrections au hasard.

Au-delà du CLS, pense aussi à utiliser la balise strong de manière stratégique pour mettre en valeur les informations clés de tes pages sans altérer leur stabilité visuelle.

FAQ sur le Cumulative Layout Shift

Quel est le rapport entre le CLS et les autres Core Web Vitals (LCP, INP) ?

Les trois Core Web Vitals mesurent des aspects différents de l’expérience utilisateur. Le LCP (Largest Contentful Paint) évalue la vitesse à laquelle le contenu principal s’affiche. L’INP (Interaction to Next Paint) mesure la rapidité de réponse de la page aux interactions. Le CLS évalue la stabilité visuelle. Les trois sont complémentaires : un site rapide mais instable reste frustrant, tout comme un site stable mais lent. Google prend les trois en compte pour le classement.

Quel score CLS viser pour ne pas être pénalisé par Google ?

Google recommande un score inférieur à 0,1 au 75e centile de tes visiteurs. C’est le seuil “bon”. Entre 0,1 et 0,25, tu es dans la zone “à améliorer” : pas de pénalité directe, mais un désavantage face aux concurrents qui font mieux. Au-dessus de 0,25, ton score est considéré comme médiocre et peut réellement impacter ton classement, surtout sur des requêtes concurrentielles.

Comment Lighthouse mesure-t-il le CLS ?

Lighthouse mesure le CLS en simulant le chargement de ta page dans un navigateur contrôlé (Chrome headless). Il enregistre tous les décalages de mise en page qui se produisent pendant le chargement et calcule le score selon la même formule (Impact Fraction × Distance Fraction). La limite de Lighthouse, c’est qu’il ne capture que les décalages au chargement initial. Il ne simule pas le scroll, les interactions utilisateur ni le chargement de contenu personnalisé. C’est pour ça que le score Lighthouse est souvent meilleur que le score réel mesuré sur le terrain via PageSpeed Insights ou la Search Console.