# CLS : comment mesure-t-on les décalages de mise en page ?

> CLS : le score de stabilité visuelle de Google. Formule, fenêtres de session, seuil de 0,1, calcul d'un décalage réel sur un site de PME et erreurs à éviter.

Mis à jour le 15 octobre 2026 · https://app.pilotiko.com/glossaire/cls

Le CLS (Cumulative Layout Shift) est le score qui mesure la stabilité visuelle d'une page : il additionne les déplacements inattendus du contenu pendant la plus forte rafale de décalages observée. Selon web.dev, un CLS de 0,1 ou moins est bon, et un CLS supérieur à 0,25 est mauvais.

## En bref
- Le CLS n'a pas d'unité : c'est un score, pas un temps.
- Bon : 0,1 ou moins. Mauvais : plus de 0,25.
- Score d'un décalage = fraction d'impact × fraction de distance.
- Les décalages dans les 500 ms suivant un clic ou un toucher sont exclus.

## Que mesure le CLS ?

Web.dev décrit le CLS comme la mesure de la plus forte rafale de scores de décalage pour chaque décalage de mise en page inattendu survenu pendant la vie de la page [1]. Un décalage, c'est un élément visible qui change de position d'une image à l'autre sans que le visiteur l'ait demandé.

Contrairement au [LCP](https://app.pilotiko.com/glossaire/lcp) et à l'[INP](https://app.pilotiko.com/glossaire/inp), le CLS ne se compte pas en secondes ni en millisecondes. C'est un score sans unité, ce qui surprend souvent la première fois qu'on lit un rapport des [Core Web Vitals](https://app.pilotiko.com/glossaire/core-web-vitals) [2].

## Comment calcule-t-on le score d'un décalage ?

Chaque décalage reçoit un score égal à la fraction d'impact multipliée par la fraction de distance. La fraction d'impact est la part de la fenêtre touchée par les éléments instables sur deux images successives. La fraction de distance est la distance parcourue par ces éléments, rapportée à la plus grande dimension de la fenêtre [1].

**Calcul : un bandeau promotionnel qui s'insère en haut d'une page de couvreur**

- Part de l'écran occupée par le contenu qui bouge, avant et après (fraction d'impact) : 0,60
- Déplacement du contenu ÷ plus grande dimension de l'écran (fraction de distance) : 0,20
- Score de ce décalage (0,60 × 0,20) : 0,12
- Second décalage 0,4 s plus tard, quand une image se charge : 0,05
- Total de la fenêtre de session (0,12 + 0,05) : 0,17
- **= CLS de 0,17 : à améliorer, alors qu'il suffirait de réserver la hauteur du bandeau et de l'image pour descendre près de 0.**

## Qu'est-ce qu'une fenêtre de session ?

Les décalages sont regroupés en fenêtres de session : une fenêtre réunit des décalages qui se suivent avec moins d'une seconde d'intervalle, et une fenêtre dure au plus cinq secondes. Le CLS d'une page est le total de la fenêtre qui obtient le score le plus élevé [1].

Ce mode de calcul évite qu'une longue visite accumule un score énorme simplement parce que la personne est restée longtemps sur la page.

## Tous les déplacements sont-ils comptés ?

| Situation | Compté ? | Pourquoi |
|---|---|---|
| Une publicité pousse le texte vers le bas pendant la lecture | Oui | Décalage inattendu |
| Le contenu bouge dans les 500 ms après un toucher sur « Voir plus » | Non | Décalage attendu après une interaction |
| Le contenu bouge pendant un défilement | Oui | Le défilement n'est pas une interaction qui exclut le décalage |
| Une police téléchargée change la taille du titre | Oui | L'élément change de place sans action du visiteur |

Seules les entrées ponctuelles (toucher, clic, touche de clavier) excluent les décalages des 500 ms suivantes ; le défilement, le glisser et le pincement ne les excluent pas [1].

## Quels sont les seuils du CLS ?

Web.dev juge bon un CLS de 0,1 ou moins et mauvais un CLS supérieur à 0,25, en lisant la valeur au 75e centile des chargements, mobile et ordinateur séparés [1]. Google Search Central reprend la cible de 0,1 [3].

## Quelles erreurs causent un mauvais CLS ?

- Insérer des images sans largeur ni hauteur : le texte saute quand elles arrivent.
- Afficher un bandeau de témoins ou de promotion qui pousse la page au lieu de la recouvrir.
- Charger un module d'avis clients ou une carte qui grandit après coup.
- Placer le bouton d'appel juste sous une zone qui change de taille.
- Ne tester que sur ordinateur, alors que l'écran étroit d'un téléphone amplifie chaque déplacement.

## Pilotiko vérifie-t-il le CLS ?

Pilotiko n'annonce pas de mesure du CLS. Ses fonctions de visibilité disponibles portent sur le [référencement naturel](https://app.pilotiko.com/glossaire/seo) du site qu'il héberge : [données structurées](https://app.pilotiko.com/glossaire/donnees-structurees), plan du site, [robots.txt](https://app.pilotiko.com/glossaire/robots-txt) et llms.txt, plus l'audit de votre site actuel.

## Questions fréquentes

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

Web.dev considère qu'un CLS de 0,1 ou moins est bon. Au-dessus de 0,25, il est mauvais ; entre les deux, il est à améliorer.

### Pourquoi le CLS n'a-t-il pas d'unité ?

Parce qu'il multiplie deux fractions : la part de l'écran touchée et la distance parcourue rapportée à la taille de l'écran. Le résultat est un score, pas une durée.

### Le bandeau de consentement aux témoins nuit-il au CLS ?

Seulement s'il déplace le contenu existant. Un bandeau qui se superpose à la page sans la pousser ne crée pas de décalage de mise en page.

### Un menu qui s'ouvre après un toucher augmente-t-il le CLS ?

Non, si le déplacement survient dans les 500 millisecondes suivant le toucher. Web.dev exclut ces décalages, considérés comme attendus.

### Le CLS est-il mesuré pendant toute la visite ?

Oui, mais il retient seulement la fenêtre de session au score le plus élevé, avec des fenêtres d'au plus cinq secondes. Une longue visite n'est donc pas pénalisée du seul fait de sa durée.

### Comment corriger un CLS élevé rapidement ?

Commencez par donner des dimensions à toutes les images et réserver l'espace des bandeaux et des modules externes. Ces deux corrections sont simples et s'essaient avant toute refonte.

## Sources

1. web.dev (Google), « Cumulative Layout Shift (CLS) (version française) », https://web.dev/articles/cls?hl=fr (consulté le 2026-10-15)
2. web.dev (Google), « Web Vitals (version française) », https://web.dev/articles/vitals?hl=fr (consulté le 2026-10-15)
3. Google Search Central, « Comprendre les Core Web Vitals et les résultats de recherche Google », https://developers.google.com/search/docs/appearance/core-web-vitals?hl=fr (consulté le 2026-10-15)