# CLS (Cumulative Layout Shift) : définition et explications

> Le Cumulative Layout Shift (CLS) mesure combien de contenu visible bouge de façon inattendue pendant qu’une page est ouverte ; un bon score est de 0,1 ou moins.

URL: https://yes-seo.com/fr/glossaire/cumulative-layout-shift

Le **Cumulative Layout Shift (CLS)** mesure la stabilité visuelle, c’est-à-dire la quantité de contenu qui saute de façon inattendue pendant qu’on utilise une page. Vous connaissez la sensation : vous allez cliquer sur un lien, une publicité se charge au-dessus, et vous touchez le mauvais élément. Le CLS transforme cette gêne en un chiffre, et c’est l’un des trois [Core Web Vitals](https://yes-seo.com/fr/glossaire/core-web-vitals).

## Comment le score fonctionne

Chaque décalage inattendu reçoit un score égal à *fraction d’impact × fraction de distance* : la part de la fenêtre visible touchée par les éléments qui bougent, multipliée par la distance qu’ils parcourent relativement à la fenêtre. Les décalages sont regroupés en « fenêtres de session » (des rafales où les décalages sont espacés de moins d’une seconde, plafonnées à cinq secondes), et le CLS est le score de la pire fenêtre, pas un total pour toute la visite ([web.dev : CLS](https://web.dev/articles/cls)).

Les décalages survenant dans les 500 ms après un clic, un appui tactile ou une touche sont exclus, car un mouvement attendu, comme l’ouverture d’un accordéon, ne pose pas de problème.

## Seuils

Un bon score est de **0,1 ou moins**, un mauvais score est **supérieur à 0,25**, au 75e centile des visites réelles. Le CLS n’a pas d’unité : c’est un score, pas une durée.

## Causes fréquentes et correctifs

| Cause | Correctif |
| --- | --- |
| Images et vidéos sans dimensions | Définir les attributs width et height, ou la propriété CSS aspect-ratio |
| Publicités, contenus intégrés et iframes qui se chargent tard | Réserver l’emplacement avec min-height |
| Bannières de cookies et bandeaux promotionnels insérés en haut de page | Les superposer à la page, ou réserver leur espace dès le départ |
| Polices web qui se substituent et font se reformater le texte | Précharger les polices clés et ajuster la police de repli avec size-adjust |
| Animation de top, height ou margin | Animer plutôt transform et opacity |

## Exemple : donner la forme au navigateur à l’avance

```

  img { max-width: 100%; height: auto; }   /* toujours adaptatif */
  .ad-slot { min-height: 250px; }           /* de la place pour une pub 300×250 */

```

Avec width et height présents, les navigateurs modernes calculent le rapport d’aspect avant l’arrivée du fichier et conservent cet espace au lieu de le réduire à zéro.

## Erreurs courantes

- **Ne tester que le premier chargement dans un outil de laboratoire.** Le CLS continue de s’accumuler pendant que les gens font défiler la page : les flux infinis et les publicités tardives n’apparaissent donc souvent que dans les données terrain.

- **Des images en chargement différé sans dimensions.** Le [chargement différé](https://yes-seo.com/fr/glossaire/chargement-differe) et les décalages de mise en page vont souvent de pair.

- **Des écrans squelettes qui ne correspondent pas à la mise en page finale** dans les applications monopages : tout bouge quand le vrai contenu les remplace.

- **Injecter des blocs « articles associés » ou de newsletter** au milieu d’un article après le chargement.

Test rapide : chargez votre page sur un téléphone avec une connexion bridée et observez les cinq premières secondes. Tout ce qui bouge sans que vous touchiez l’écran vous coûte du CLS.

## Le vérifier

Le [test de vitesse de page](https://yes-seo.com/fr/test-vitesse-site) affiche le CLS terrain de PageSpeed Insights quand il est disponible. Le [vérificateur d’images](https://yes-seo.com/fr/verificateur-alt-images) liste chaque image d’une page avec ses dimensions et signale celles qui risquent de provoquer des décalages de mise en page.

## Questions fréquentes

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

Google considère 0,1 ou moins comme bon et tout ce qui dépasse 0,25 comme mauvais, mesurés au 75e centile des visites réelles, séparément sur mobile et sur ordinateur.

### Le CLS compte-t-il les décalages qui se produisent pendant le défilement ?

Oui. Le CLS est mesuré pendant toute la visite : un contenu qui se décale quand vous faites défiler la page compte donc aussi. Seuls les décalages survenant dans les 500 ms après un clic, un appui tactile ou une touche sont exclus.

### Pourquoi le CLS diffère-t-il entre Lighthouse et les données terrain ?

Lighthouse mesure un seul chargement de page, sans défilement ni interaction. Les données terrain enregistrent des visites entières d’utilisateurs réels, avec les publicités tardives, les bannières de cookies et le défilement infini : elles montrent donc souvent un CLS plus élevé.