Mis à jour le 13 juillet 2026 · Relu et vérifié par Damien Hernandez

CLS (Cumulative Layout Shift) : définition, rôle et bonnes pratiques SEO

Comment fonctionne le CLS ?

Le CLS additionne les décalages inattendus survenus pendant la vie de la page. Chaque décalage se calcule en multipliant la fraction d’impact par la fraction de distance, selon web.dev. La fraction d’impact représente la surface du viewport occupée par l’élément instable. La fraction de distance mesure la distance parcourue par cet élément entre deux images. Google ne retient plus la somme totale depuis 2021 : le score correspond à la plus forte rafale de décalages. Cette rafale, appelée fenêtre de session, regroupe les décalages espacés de moins d’une seconde, sur cinq secondes maximum, selon web.dev. Les décalages survenant dans les 500 millisecondes après une interaction utilisateur sont exclus du calcul.

Pourquoi le CLS est important pour le SEO ?

Le CLS fait partie des signaux d’expérience de page utilisés par Google depuis 2021. Un bon score protège le parcours utilisateur : un bouton qui se déplace provoque des clics accidentels et de la frustration. Le CLS reste le Core Web Vital le plus facile à valider : 81 % des pages mobiles atteignent le seuil « bon », contre 62 % pour le LCP, selon le Web Almanac 2025. Google traite les Core Web Vitals comme un critère de départage entre pages de pertinence proche, pas comme un levier de classement dominant. Améliorer le CLS agit surtout sur le taux de conversion et le taux de rebond, deux signaux corrélés à la stabilité visuelle.

Faites auditer le CLS de vos pages

Comment réduire le CLS d’une page ?

Réduire le CLS repose sur trois actions concrètes. Renseigner les attributs width et height sur chaque image et vidéo réserve l’espace avant le chargement. Réserver un espace fixe aux publicités, embeds et iframes évite les poussées de contenu. Charger les polices avec font-display et une police de repli calibrée limite le reflow du texte. Le Web Almanac 2025 désigne les images sans dimensions comme première cause évitable, présentes sur 62 % des pages mobiles.

Quels outils mesurent le CLS ?

Quatre outils mesurent le CLS de façon fiable. PageSpeed Insights combine les données de terrain CrUX et un test Lighthouse en laboratoire. Google Search Console signale les URL en échec dans son rapport Signaux Web essentiels. La bibliothèque web-vitals de Google capte le CLS des visiteurs réels. Le CLS ne se mesure que dans les navigateurs Chromium, Chrome et Edge en tête, alors que Safari et Firefox ne le supportent pas.

Exemple concret de CLS

Une image sans dimensions déclenche un décalage dès son chargement. Le navigateur ignore la place à réserver, puis pousse le contenu vers le bas quand l’image arrive. Réserver l’espace en amont, via un ratio d’aspect ou une hauteur minimale, corrige la cause la plus fréquente relevée par le Web Almanac 2025.

/* Reserver l'espace des medias avant chargement */
img, video {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/* Espace fixe pour un emplacement publicitaire */
.ad-slot {
  min-height: 250px;
}

Erreur fréquente observée en audit

Sources

• web.dev, Cumulative Layout Shift (CLS) · 2025
• web.dev, Optimize Cumulative Layout Shift · 2025
• HTTP Archive, Web Almanac 2025, chapitre Performance · 2025

Termes liés