Le CLS mesure la stabilité visuelle d'une page. Découvrez sa définition, son calcul et les techniques concrètes pour améliorer ce score Core Web Vitals.
Le Cumulative Layout Shift (CLS) est une métrique des Core Web Vitals qui quantifie les déplacements inattendus du contenu visible d'une page web, impactant l'expérience utilisateur et le référencement naturel.
Le CLS évalue la stabilité visuelle d'une page : un score bas signifie que les éléments ne bougent pas pendant le chargement. Pour l'optimiser, il faut réserver les dimensions des images et des publicités, éviter d'injecter du contenu dynamique au-dessus d'éléments déjà affichés, et utiliser des polices web avec un affichage correct. Un CLS inférieur à 0,1 est considéré comme bon par Google et influence directement le classement dans les résultats de recherche.
Cas fréquent observé : de nombreux sites e-commerce et médias sous-estiment l'impact des bannières publicitaires et des widgets tiers (chat, réseaux sociaux) qui se chargent tardivement et poussent le contenu principal vers le bas. Dans les faits, même une correction minime, comme l'ajout d'attributs width/height sur une image, peut réduire le CLS de 30 à 50 %, mais les équipes techniques négligent souvent ces éléments non critiques. En accompagnement, la difficulté réelle est de coordonner les développeurs front-end, les équipes marketing (publicités) et les fournisseurs de services tiers pour appliquer des conteneurs de dimensions fixes.
Le Cumulative Layout Shift (CLS) est l'un des trois Core Web Vitals de Google, aux côtés du Largest Contentful Paint (LCP) et du First Input Delay (FID). Il mesure la fréquence et l'ampleur des déplacements inattendus du contenu visible dans la fenêtre d'affichage (viewport) pendant toute la durée de vie de la page. Un déplacement est dit 'inattendu' lorsqu'il n'est pas initié par une action de l'utilisateur (comme un clic ou un scroll).
Le calcul du CLS repose sur deux facteurs : la fraction d'impact (proportion de la zone d'affichage affectée par le déplacement) et la fraction de distance (distance parcourue par l'élément instable). Le score final est la somme des produits de ces deux fractions pour chaque déplacement survenu. Par exemple, si une bannière publicitaire se charge en retard et pousse un bloc de texte de 20 % de la hauteur du viewport, et que ce bloc occupe 30 % de la surface, le déplacement contribue à hauteur de 0,2 × 0,3 = 0,06 au CLS total.
Google considère un CLS comme bon s'il est inférieur à 0,1, moyen entre 0,1 et 0,25, et mauvais au-delà de 0,25. Cette métrique est agrégée sur l'ensemble des visites d'une page pour former le score de rapport.
Le CLS est un signal de classement dans l'algorithme de Google depuis juin 2021. Un score élevé peut pénaliser le positionnement d'une page dans les résultats de recherche, en particulier pour les requêtes où l'expérience utilisateur est un facteur différenciant (sites d'information, e-commerce, services). Au-delà du SEO, un mauvais CLS dégrade directement l'expérience : l'utilisateur peut cliquer sur un bouton qui se déplace au dernier moment, lire un texte qui saute, ou perdre le fil de sa lecture.
Les conséquences sont mesurables : augmentation du taux de rebond, baisse du temps passé sur la page, et frustration menant à une perte de confiance dans le site. Pour un site e-commerce, un CLS élevé peut faire chuter le taux de conversion, car les utilisateurs quittent la page avant d'avoir pu ajouter un article au panier. Pour un blog d'actualités, les lecteurs peuvent être gênés par des encarts publicitaires mobiles qui déplacent l'article.
L'optimisation du CLS n'est donc pas seulement une exigence technique, mais un levier d'amélioration de la performance business.
Les déplacements de mise en page surviennent principalement à cause de contenus qui se chargent après l'affichage initial de la page. Les causes les plus fréquentes sont :
Identifier la source exacte nécessite une analyse avec des outils comme Lighthouse ou le rapport Core Web Vitals de Google Search Console.
La mesure du CLS peut être réalisée à deux niveaux : en laboratoire (données synthétiques) et sur le terrain (données utilisateurs réelles). Pour une analyse fiable, il est recommandé de combiner les deux approches.
Outils de laboratoire :
Outils de terrain :
Pour interpréter les résultats, concentrez-vous sur les pages ayant un CLS supérieur à 0,25. Utilisez la fonctionnalité 'Record' de Lighthouse pour capturer les déplacements visuels et les corréler avec les événements de chargement.
L'optimisation du CLS repose sur des actions concrètes, souvent simples à implémenter. Voici les techniques les plus efficaces :
Ces techniques doivent être testées sur des pages représentatives avant un déploiement global.
Les sites e-commerce sont particulièrement vulnérables au CLS à cause de la multitude d'images, de bannières promotionnelles, de widgets de recommandation et de scripts tiers (analytics, retargeting, chat). Voici comment aborder l'optimisation :
Pages produits : les images principales et les variantes doivent avoir des dimensions fixes. Utilisez un conteneur avec un ratio d'aspect pour la galerie d'images. Les boutons 'Ajouter au panier' et les options de taille/couleur doivent être statiques. Les avis clients chargés dynamiquement doivent être placés dans une zone réservée.
Pages catégories : les grilles de produits doivent utiliser des tailles de vignettes uniformes. Évitez les filtres ou tris qui redimensionnent les éléments après le chargement. Les bannières promotionnelles doivent avoir une hauteur définie, même si leur contenu change.
Panier et checkout : ces pages sont critiques car tout déplacement peut faire perdre la confiance de l'utilisateur et l'inciter à abandonner son achat. Assurez-vous que les résumés de commande, les champs de formulaire et les boutons de validation ne bougent pas. Les offres de livraison ou les codes promo qui s'affichent après le chargement doivent être intégrés dans le flux initial.
Un audit régulier avec Lighthouse et Search Console permet de détecter les régressions après chaque mise à jour.
Plusieurs outils gratuits et payants permettent de suivre le CLS en continu et d'identifier les causes :
Pour les développeurs, l'API Performance Observer en JavaScript permet de collecter les événements layout-shift et de les envoyer vers un outil d'analyse personnalisé. Cette approche est utile pour corréler les déplacements avec des actions utilisateur spécifiques.
Une stratégie de monitoring doit inclure des alertes dès que le CLS dépasse 0,15 sur un ensemble significatif de pages.
Certaines pratiques, bien qu'intentionnées, peuvent aggraver le CLS ou créer d'autres problèmes :
Une approche itérative, avec des tests A/B sur des pages à fort trafic, permet de valider l'impact des modifications.
Le CLS fait partie des Core Web Vitals, un ensemble de métriques que Google utilise comme signaux de classement depuis l'update de juin 2021 (Page Experience Update). Cette mise à jour a intégré les trois métriques (LCP, FID, CLS) dans l'algorithme, avec un poids variable selon le type de requête. Les pages avec un CLS mauvais (supérieur à 0,25) peuvent perdre du classement, surtout pour les requêtes où l'expérience utilisateur est un facteur important (actualités, recettes, e-commerce).
Google a également introduit des évolutions : en 2022, le CLS a été modifié pour ne plus prendre en compte les déplacements survenus dans les 500 millisecondes suivant une interaction utilisateur (comme un clic), afin de ne pas pénaliser les animations légitimes. En 2023, la métrique a été affinée pour mieux gérer les pages à longues sessions (comme les applications web progressives).
Pour rester conforme, il est conseillé de viser un CLS inférieur à 0,1 sur l'ensemble des pages, et de surveiller régulièrement le rapport Core Web Vitals dans Google Search Console. Les mises à jour futures pourraient renforcer le poids des Core Web Vitals, rendant l'optimisation du CLS encore plus stratégique.
| Catégorie | CLS | Interprétation |
|---|---|---|
| Bon | Inférieur à 0,1 | Expérience utilisateur satisfaisante, aucun impact négatif sur le SEO |
| À améliorer | Entre 0,1 et 0,25 | Nécessite une optimisation, risque de pénalité SEO modéré |
| Mauvais | Supérieur à 0,25 | Expérience utilisateur dégradée, pénalité SEO possible |
| Outil | Type de données | Fonctionnalités clés |
|---|---|---|
| Lighthouse | Laboratoire (synthétique) | Analyse détaillée, suggestions d'optimisation, capture vidéo |
| PageSpeed Insights | Laboratoire + Terrain (CrUX) | Rapport combiné, données agrégées par URL |
| Google Search Console | Terrain (CrUX) | Rapport par groupe de pages, historique, alertes |
| Web Vitals Extension | Temps réel | Affichage des métriques pendant la navigation |
| DebugBear | Terrain + Laboratoire | Monitoring continu, alertes, historique, tests automatisés |
| Request Metrics | Terrain (RUM) | Données utilisateur réelles, segmentation par appareil/navigateur |
| Cause | Impact typique | Solution recommandée |
|---|---|---|
| Images sans dimensions | Déplacement lors du chargement | Ajouter width/height ou aspect-ratio en CSS |
| Publicités dynamiques | Sauts fréquents, surtout en haut de page | Réserver un conteneur de taille fixe |
| Polices web avec FOIT | Texte invisible puis décalage | Utiliser font-display : swap + préchargement |
| Contenu injecté par JS | Pop-ups ou notifications décalant le flux | Placer les éléments en position fixed ou en bas de page |
| Animations CSS non conformes | Déplacements progressifs | Utiliser transform et opacity pour les animations |
Diagnostic e-commerce
On regarde votre boutique concrètement et on identifie les premières actions qui comptent vraiment.
Le CLS (Cumulative Layout Shift) est une métrique des Core Web Vitals de Google qui mesure la stabilité visuelle d'une page. Un score élevé indique que des éléments se déplacent pendant le chargement, ce qui peut nuire à l'expérience utilisateur et au classement dans les résultats de recherche.
Le CLS est calculé en additionnant les produits de la fraction d'impact (proportion du viewport affectée) et de la fraction de distance (distance du déplacement) pour chaque déplacement inattendu. Par exemple, un déplacement affectant 30 % du viewport sur une distance de 20 % contribue à hauteur de 0,06.
Un score CLS inférieur à 0,1 est considéré comme bon par Google. Entre 0,1 et 0,25, le score est à améliorer. Au-delà de 0,25, il est mauvais et peut pénaliser le référencement.
Pour réduire le CLS, réservez les dimensions des images et des publicités, utilisez font-display : swap pour les polices web, évitez d'injecter du contenu au-dessus d'éléments déjà affichés, et privilégiez les animations CSS qui n'affectent pas la mise en page (transform, opacity).
Oui, le CLS est un signal de classement depuis l'update Page Experience de juin 2021. Un mauvais CLS peut faire perdre des positions, surtout pour les requêtes où l'expérience utilisateur est importante.
Les outils principaux sont Lighthouse (analyse de laboratoire), PageSpeed Insights (données de laboratoire et de terrain), Google Search Console (données de terrain agrégées) et l'extension Web Vitals (temps réel). Pour un suivi continu, des outils comme DebugBear ou Request Metrics sont recommandés.
Le CLS peut être plus élevé sur mobile en raison de la taille réduite du viewport, ce qui amplifie l'impact des déplacements. Il est donc crucial de tester et d'optimiser spécifiquement pour les appareils mobiles.
Sources : FEVAD · Google Search Central · Shopify.