# CLS

> Métrique Core Web Vitals qui mesure l'instabilité visuelle d'une page, c'est-à-dire les déplacements inattendus d'éléments pendant son chargement.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/cls/

Cette sensation agaçante de cliquer sur un bouton qui se dérobe au dernier moment parce qu'une image vient de se charger juste au-dessus : le Cumulative Layout Shift chiffre précisément ce genre de déplacements imprévus survenus pendant l'affichage d'une page.

## Une des trois métriques Core Web Vitals

Google intègre le CLS dans son classement des résultats de recherche aux côtés du LCP et de l'INP. Sur un site WordPress, les causes les plus fréquentes sont des images sans dimensions définies, des publicités insérées dynamiquement, des polices web qui changent la mise en page une fois chargées, ou des bannières de cookies ajoutées après coup en haut de page.

## Exemple

```
<img
  src="photo-produit.jpg"
  width="800"
  height="600"
  alt="Photo du produit"
>
```

Préciser `width` et `height` permet au navigateur de réserver l'espace exact de l'image avant même qu'elle ne soit téléchargée, évitant tout déplacement du contenu environnant.

## Bon à savoir

- Un score CLS inférieur à 0,1 est considéré comme bon par Google ; au-delà de 0,25, l'expérience est jugée mauvaise.
- La propriété CSS `aspect-ratio` permet de réserver l'espace d'un média même sans connaître ses dimensions exactes à l'avance.
- Contrairement au LCP ou au TTFB, le CLS cumule les déplacements sur toute la durée de vie de la page, y compris après une interaction de l'utilisateur, pas seulement au chargement initial.