Comment le Cumulative Layout Shift est vraiment calculé

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

Chrome mesure le Cumulative Layout Shift comme la plus grande rafale de mouvements de mise en page inattendus pendant la vie d'une page, où chaque décalage individuel vaut impact fraction multipliée par distance fraction et où la rafale au score le plus élevé devient le CLS de la page. La métrique existe parce qu'un contenu qui saute sous le doigt du lecteur lui coûte le tap qu'il allait faire. Deux nombres décident de chaque score : quelle part du viewport a bougé, et sur quelle distance.

Le nom crée l'essentiel de la confusion. "Cumulatif" décrit ce qui se passe à l'intérieur d'une rafale, pas sur toute la page, donc quarante petits décalages étalés sur trois minutes peuvent obtenir un meilleur score que deux décalages séparés d'une demi-seconde.

Comment le score d'un décalage de mise en page est-il calculé ?

La formule publiée par l'équipe Chrome sur web.dev, vérifiée le 8 septembre 2026, est une seule multiplication :

layout shift score = impact fraction × distance fraction

L'impact fraction est l'union de la surface visible qu'un élément instable occupait dans l'image précédente et de la surface qu'il occupe dans l'image actuelle, divisée par la surface totale du viewport. La distance fraction est la plus grande distance horizontale ou verticale parcourue par un élément instable dans cette image, divisée par la plus grande dimension du viewport, largeur ou hauteur, selon celle qui est la plus grande.

Déroulez un décalage du début à la fin. Prenez un viewport mobile de 400px de large et 800px de haut, la plus grande dimension est donc 800px. Un titre d'article pleine largeur et son paragraphe d'ouverture occupent les 400px du haut, soit la moitié du viewport. Une bannière de consentement s'injecte alors au-dessus d'eux et pousse le bloc de 160px vers le bas.

Entrée	Valeur	D'où elle vient
Viewport	400 × 800 px	320,000 px de surface totale
Élément avant le décalage	y 0 à 400	160,000 px visibles
Élément après le décalage	y 160 à 560	160,000 px visibles
Union des deux images	y 0 à 560	224,000 px
Impact fraction	0.7	224,000 ÷ 320,000
Distance parcourue	160 px	hauteur de la bannière
Distance fraction	0.2	160 ÷ 800

0.7 × 0.2 = 0.14

Une seule bannière a produit 0.14, ce qui tombe déjà dans la bande "à améliorer". Les deux fractions se limitent l'une l'autre : un élément minuscule obtient un score faible même s'il traverse tout l'écran, et un bloc qui occupe tout le viewport obtient un score élevé même s'il ne parcourt que 20px.

Pourquoi le CLS n'est-il pas la somme de tous les décalages ?

Le CLS rapporte la seule fenêtre de session au score le plus élevé, pas un total courant. Une fenêtre de session s'ouvre au premier décalage et reste ouverte tant que les décalages arrivent à moins de 1 seconde d'intervalle, jusqu'à une durée maximale de fenêtre de 5 secondes. Quand un intervalle de 1 seconde ou plus s'écoule, ou que la fenêtre atteint 5 secondes, cette fenêtre se ferme et le décalage suivant en ouvre une nouvelle. Le navigateur note chaque fenêtre séparément et rapporte la plus grande.

Poursuivez l'exemple ci-dessus. Le décalage de bannière à 0.14 tombe à 1.2s. Une police web est échangée à 1.5s et refait la mise en page d'un paragraphe pour 0.03. L'intervalle est de 300ms, donc les deux appartiennent à une même fenêtre qui vaut 0.17. Un embed chargé en lazy load décale ensuite le pied de page de 0.05 à 4.0s, soit 2.5 secondes après le dernier décalage, il ouvre donc sa propre fenêtre.

Fenêtre	Décalages	Score de la fenêtre
1 (1.2s à 1.5s)	0.14 bannière, 0.03 échange de police	0.17
2 (4.0s)	0.05 embed	0.05

Le CLS de la page est 0.17, le plus grand des deux, pas 0.22. Courir après la somme envoie les équipes sur le mauvais décalage : trouvez la fenêtre au score le plus élevé et corrigez ce qu'elle contient.

Comment une fenêtre de session détermine le score

1

Le premier décalage se produit. La poussée de la bannière à 1.2s ouvre une fenêtre de session et obtient 0.14.

2

Le décalage suivant arrive avant 1 seconde. Le changement de police à 1.5s rejoint la même fenêtre et porte son total à 0.17.

3

Un écart d'au moins 1 seconde s'écoule. La fenêtre se ferme, comme c'est le cas 2.5 secondes après le changement de police.

4

Le décalage suivant ouvre une nouvelle fenêtre. Le décalage de l'embed à 4.0s ouvre sa propre fenêtre et obtient 0.05.

5

Chrome signale la fenêtre la plus élevée. 0.17 devient le CLS de la page, pas la somme de 0.22 des deux fenêtres.

Qu'est-ce qui compte comme décalage de mise en page inattendu ?

Un décalage compte comme inattendu sauf s'il suit une interaction utilisateur dans les 500 millisecondes. Chrome marque avec hadRecentInput tout décalage survenu juste après un tap, un clic ou une frappe, et ces décalages sont exclus du score, parce qu'un lecteur qui a ouvert un accordéon s'attend à ce que le contenu en dessous bouge.

Cette règle des 500ms est un levier de conception, pas un détail d'implémentation. Un bouton "Charger plus" ne coûte rien, et le même contenu injecté par un minuteur coûte ce que dit la formule.

Qu'est-ce qui cause le Cumulative Layout Shift ?

Quatre sources produisent presque tous les décalages qui méritent une correction, et chacune a une correction qui supprime le décalage au lieu de le réduire.

Cause	Ce que fait le navigateur	Correction
Images et vidéos sans dimensions	Réserve une hauteur nulle, puis refait la mise en page à l'arrivée du fichier	Poser les attributs width et height, ou réserver la boîte avec aspect-ratio en CSS
Publicités, iframes et embeds tiers	Ne dimensionne l'emplacement qu'après la réponse du tiers	Réserver l'emplacement avec min-height ou aspect-ratio, dimensionné d'après les tailles que cet emplacement a déjà servies
Bannières, avis et skeletons injectés	Insère un nœud dans le flux du document et pousse tout ce qui se trouve en dessous	Réserver l'espace à l'avance, le rendre hors du flux en superposition, ou l'insérer derrière une action utilisateur
Polices web	Échange une police de repli contre la police web et change les métriques du texte en plein rendu	Utiliser font-display: optional, aligner le repli avec size-adjust et les descripteurs de surcharge de police, et précharger la police critique

Le motif commun aux quatre : réservez la boîte avant que le contenu existe. Un navigateur qui connaît déjà la hauteur d'un emplacement n'a rien à refaire quand cet emplacement se remplit.

Pourquoi le CLS en laboratoire diffère-t-il du CLS sur le terrain ?

Le CLS en laboratoire couvre le chargement de la page uniquement, et le CLS sur le terrain couvre tout le cycle de vie de la page. Lighthouse charge une URL sur un profil d'appareil fixe, enregistre les décalages dans sa fenêtre de mesure, puis s'arrête. Les vraies personnes défilent au-delà de cette fenêtre, déclenchent des images en lazy load, ferment une bannière, ouvrent un menu, et chaque décalage postérieur à la coupure de Lighthouse compte encore sur le terrain.

Le viewport et le réseau ajoutent un second écart. La distance fraction divise par la plus grande dimension du viewport, donc la même bannière de 160px obtient un score différent sur un téléphone et sur un ordinateur de bureau, et une connexion rapide de laboratoire livre le contenu d'un emplacement avant même que le décalage se produise, ce qui masque un défaut qui se déclenche à chaque fois sur un réseau lent. Corrigez les régressions en laboratoire, puis jugez le résultat sur des données de terrain issues de vraies visites, où les seuils des trois vitals tiennent dans un seul tableau.

Comment trouver le décalage responsable d'un mauvais CLS ?

Associez le score de terrain à un enregistrement de la session qui l'a produit, pour que la rafale devienne quelque chose que vous regardez au lieu de quelque chose que vous devinez. Un p75 de 0.28 vous dit que la page échoue ; il ne vous dit pas qu'une bannière de consentement injecte 160px au-dessus de la ligne de flottaison pour les visiteurs dont l'IP se résout dans l'UE.

Flowsery livre un script de moins de 10 KB, sans cookies et hébergé dans l'UE, et n'applique aucun échantillonnage, donc le score vient de chaque session au lieu d'un sous-ensemble. Il enregistre les sessions à côté des mesures de temps, regroupe celles qui se ressemblent en un seul ticket classé par le nombre d'utilisateurs touchés, et envoie ce ticket vers Slack, Linear ou Jira avec le replay et les étapes de reproduction en pièce jointe.

Le CLS est l'un des trois Core Web Vitals, et chacun échoue pour ses propres raisons. Largest Contentful Paint couvre le temps de rendu, Interaction to Next Paint couvre la réactivité, et l'aperçu des Core Web Vitals explique pourquoi une page doit réussir les trois en même temps.

Questions fréquentes

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

0.1 ou moins au 75e centile est bon, de 0.1 à 0.25 est à améliorer, et au-dessus de 0.25 est mauvais, selon les seuils de l'équipe Chrome sur web.dev en septembre 2026. Le centile est calculé séparément pour le mobile et le bureau, une page peut donc réussir sur ordinateur et échouer sur téléphone. Ce qui compte comme un bon CLS détaille comment le p75 est assemblé.

Le CLS a-t-il une unité ?

Non. Les deux entrées de la formule sont des fractions du viewport, leur multiplication produit donc un nombre sans unité. C'est pour cela que 0.1 signifie la même chose sur un téléphone de 400px et sur un écran de 2560px : la métrique se normalise par rapport à l'écran sur lequel elle s'est produite.

Les décalages sous la ligne de flottaison comptent-ils dans le CLS ?

Seul le mouvement du contenu visible dans le viewport au moment du décalage contribue à l'impact fraction. Un élément qui se réagence 4000px plus bas dans la page pendant que le lecteur reste en haut n'ajoute rien. Il commence à compter au moment où le lecteur le fait défiler à l'écran et où il bouge à nouveau.

Pourquoi mon CLS a-t-il empiré après l'ajout d'un skeleton loader ?

Un skeleton dont la hauteur ne correspond pas au contenu final décale la page deux fois au lieu d'une : d'abord quand le skeleton apparaît, puis quand le vrai contenu le remplace avec des dimensions différentes. Dimensionnez le skeleton sur la boîte que le contenu va occuper, sinon l'espace réservé devient le défaut.

Une animation peut-elle provoquer un décalage de mise en page ?

Animer des propriétés qui déclenchent la mise en page, comme top, left, width ou height, déplace le contenu environnant et compte comme un décalage. Animer transform ne le fait pas, parce que le compositeur déplace la couche peinte sans relancer la mise en page. Basculez les animations sur transform et opacity et les décalages disparaissent.

Le CLS continue-t-il de s'accumuler une fois la page chargée ?

Oui. Le navigateur surveille les décalages pendant tout le cycle de vie de la page, donc une bannière injectée au bout de 30 secondes, ou une image chargée en lazy load au défilement, ouvre une nouvelle fenêtre de session et peut devenir le score rapporté de la page. C'est la raison principale pour laquelle un run Lighthouse propre cohabite avec un score de terrain en échec.

Combien de temps une fenêtre de session CLS reste-t-elle ouverte ?

Une fenêtre de session s'ouvre au premier décalage et continue de regrouper les décalages arrivant à moins de 1 seconde d'écart, jusqu'à un plafond de 5 secondes. Un écart d'1 seconde ou une durée totale de 5 secondes la ferme, et le décalage suivant ouvre une nouvelle fenêtre. Chrome note chaque fenêtre de la page et ne signale que la plus élevée comme CLS.

Cliquer sur un bouton avant un décalage l'empêche-t-il de compter dans le CLS ?

Un décalage est exclu du CLS s'il survient dans les 500 millisecondes suivant un tap, un clic ou une frappe, un signal que Chrome enregistre sous le nom hadRecentInput. Un bouton "Charger plus" qui affiche du contenu juste après un clic ne coûte rien, alors que le même contenu injecté par une minuterie est noté selon la formule. Cette règle existe parce qu'un lecteur qui vient d'ouvrir un accordéon s'attend à ce que le contenu en dessous bouge.

Pourquoi le même décalage de mise en page obtient-il un score différent sur mobile et sur ordinateur ?

La fraction de distance divise la distance parcourue par un élément par la plus grande dimension du viewport, donc un décalage en pixels fixe représente une fraction plus grande sur un écran de téléphone que sur un écran d'ordinateur plus large. Le décalage de bannière de 160px de l'exemple précédent obtient 0.2 sur un viewport de 800px de haut et obtiendrait un score plus bas sur un écran d'ordinateur plus haut. Le CLS sur le terrain aggrave cet écart puisque le percentile est calculé séparément pour mobile et ordinateur, si bien que le même défaut peut passer sur l'un et échouer sur l'autre.

Quelle est la correction la plus rapide pour un décalage causé par une image ?

Ajoutez les attributs width et height aux images et vidéos, ou réservez la boîte avec la propriété CSS aspect-ratio, pour que le navigateur retienne l'espace avant l'arrivée du fichier. Les images sans dimensions réservent une hauteur nulle par défaut et font recalculer la mise en page dès que le fichier charge. Réserver la boîte supprime le décalage au lieu de simplement le réduire.