Cumulative Layout Shift (CLS) : Définition, Causes, Fixes
CLS est un Core Web Vital mesurant les shifts visuels inattendus. Score ≤ 0,1 = bon. Causé par dimensions image manquantes, ads dynamiques, fonts tardives.
Qu'est-ce que Cumulative Layout Shift (CLS) ?
Cumulative Layout Shift (CLS) est un Core Web Vital qui mesure la quantité totale de shift visuel inattendu qui se produit pendant le lifetime d'une page. Chaque fois que du contenu saute parce qu'une image charge tard, qu'une ad inject ou qu'une font swap, c'est un layout shift — frustrant pour les utilisateurs.
CLS est l'un des trois Core Web Vitals (avec LCP et INP) que Google utilise comme signal ranking search.
Comment CLS est mesuré
CLS = somme des scores layout shift. Chaque shift score = impact fraction × distance fraction.
| CLS | Rating |
|---|---|
| ≤ 0,1 | Bon |
| 0,1 - 0,25 | Besoin d'amélioration |
| > 0,25 | Pauvre |
Ce qui cause CLS
| Cause | Pourquoi | Fix |
|---|---|---|
| Images sans width/height | Navigateur ne sait pas l'espace | Set width + height attrs |
| Ads, embeds, iframes | Injectent contenu taille inconnue | Réserver l'espace |
| Web fonts chargeant tard | Fallback swap avec web font | font-display: optional |
| Contenu dynamique au-dessus | Contenu injecté pousse tout en bas | Append en bas |
| Animations changeant layout | Animer height/width | Utiliser transform |
| Banners cookie/GDPR | Top banner pousse contenu | Position fixed |
Fixes CLS courants
1. Toujours spécifier dimensions image
<img src="hero.jpg" alt="Hero" width="1200" height="675">2. Réserver espace pour ads/embeds
<div class="ad-slot" style="min-height: 250px;"></div>3. Optimiser web fonts
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: optional;
size-adjust: 95%;
}4. Transform au lieu de propriétés layout
.menu { transition: transform 0.3s; transform: translateY(0); }Mesurer CLS
| Outil | Type |
|---|---|
| Lighthouse / PageSpeed Insights | Lab + field |
| Chrome DevTools | Lab |
| Web Vitals Chrome extension | Field |
| web-vitals.js | Programmatique, RUM |
| Search Console CWV report | Field |
| CrUX Dashboard | Field, public |
Best practices CLS
- Width/height sur images et vidéos.
- Réserver espace pour tout ce qui charge tard.
- font-display: optional pour fonts non-critiques.
- Match fallback font metrics.
- Animations transform.
- Skeleton screens.
- Ne pas injecter au-dessus contenu existant.
- Tester sur devices lents.
Pièges CLS courants
- Image responsive sans aspect ratio.
- Web fonts qui resize texte.
- Ads lazy-loaded sans espace réservé.
- Click handlers sur éléments shifting.
- Carousels auto-rotants.
- Image hero chargeant tard.
FAQ : Cumulative Layout Shift
Quel est un bon score CLS ?
≤ 0,1 est bon.
CLS affecte-t-il SEO ?
Oui — Core Web Vital, signal ranking.
Comment fixer images causant CLS ?
Toujours set attributs width et height.
Scrolling et interactions utilisateur comptent-ils en CLS ?
Non. Shifts dans 500ms d'input utilisateur exclus.
Comment font-display affecte-t-il CLS ?
font-display: optional + size-adjust pour meilleur CLS.
Puis-je avoir CLS = 0 ?
Possible mais rare.
Qu'est-ce que session window ?
Fenêtre 5-secondes de shifts consécutifs.
Catchez les régressions CLS avec LoadFocus
LoadFocus exécute des audits Lighthouse depuis 25+ régions et track CLS dans le temps. Inscrivez-vous sur loadfocus.com/signup.
Outils LoadFocus connexes
Mettez ce concept en pratique avec LoadFocus — la plateforme même qui propulse tout ce que vous venez de lire.