Cumulative Layout Shift (CLS)

Ce que vérifie ce contrôle

Lit le CLS depuis PageSpeed Insights. Le CLS est un score sans unité — la somme cumulée de chaque décalage de mise en page inattendu pendant le chargement de la page, pondérée par la portion de viewport déplacée et la distance parcourue.

Valeur CLS	Verdict
≤ 0,1	Bon
0,1–0,25	À améliorer
> 0,25	Mauvais

Pourquoi c’est important

Une page qui saute est une page frustrante. Vous cliquez sur un bouton, la page bouge, vous cliquez sur autre chose. Vous lisez un paragraphe, une pub charge, le paragraphe descend. Les décalages de mise en page sont parmi les métriques les plus corrélées au taux de rebond.

Le CLS est le troisième Core Web Vital, aux côtés du LCP et de l’INP. C’est aussi le plus facile à corriger une fois les éléments fautifs identifiés — la majorité du CLS vient d’une poignée de patterns spécifiques.

Comment le corriger

1. Réservez l’espace pour les images et les embeds. Définissez toujours les attributs width et height (ou aspect-ratio en CSS) :

<img src="/hero.webp" width="1200" height="600" alt="..." />

Le navigateur réserve la boîte avant que l’image se charge. Sans cela, l’image apparaît et le texte en dessous saute.

2. Réservez l’espace pour les pubs. Si vous diffusez de l’AdSense ou similaire, fixez une hauteur minimum sur le conteneur de pub qui correspond à la taille de pub la plus fréquente :

.ad-slot {
  min-height: 250px;
}

3. Évitez les webfonts à chargement tardif. Utilisez font-display: swap (le texte s’affiche dans la police de repli, swap quand la webfont arrive — petit CLS) ou font-display: optional (pas de swap ; meilleur CLS, marque moins forte). Du woff2 auto-hébergé avec preload minimise la fenêtre de swap.

4. N’insérez pas de contenu au-dessus du contenu existant. Bannières cookies, prompts « abonnez-vous » et toasts « vous avez une nouvelle notification » qui poussent la page vers le bas = CLS garanti. Positionnez-les en superposition (position: fixed).

5. Utilisez les transforms CSS pour l’animation, pas top/left. transform: translateY() ne déclenche pas de décalage. Animer top si.

Questions fréquentes

Comment le CLS est-il calculé ?

Le score est la pire fenêtre de 5 secondes de décalages pendant la session, pas la somme sur la durée de vie. Google a mis cela à jour en 2021 pour éviter de pénaliser disproportionnellement les longues pages.

Et les décalages initiés par l’utilisateur ?

Les clics, taps et envois de formulaire qui causent des changements de mise en page sont exclus du CLS pendant 500 ms après l’interaction. Donc déplier un accordéon ne compte pas — seuls les décalages « surprise » comptent.

Pourquoi mon CLS explose sur mobile mais pas sur desktop ?

Les viewports mobiles sont plus étroits, donc un décalage de N pixels est une fraction plus grande de l’écran. Même cause, plus grosse pénalité. Testez toujours sur le profil mobile dans PageSpeed.