Core Web Vitals : l’indicateur CLS

Le CLS (Cumulative Layout Shift) est l’un des indicateurs qui fait partie des Core Web Vitals définis par Google en 2020. Il mesure la stabilité visuelle d’une page web et joue un rôle dans l’expérience utilisateur — un critère de plus en plus pris en compte dans le référencement naturel. Premiere.Page, agence SEO, vous explique tout sur cet indicateur et comment l’optimiser.

Qu’est-ce que le CLS ? Définition et principe

Le CLS ou Cumulative Layout Shift fait partie des 3 métriques qui composent les signaux web essentiels (Core Web Vitals), aux côtés du LCP (Largest Contentful Paint) et du FID (First Input Delay). Ces indicateurs ont été mis en place par Google pour évaluer la qualité de l’expérience utilisateur sur un site internet.

Concrètement, le CLS mesure l’instabilité visuelle d’une page : il quantifie les déplacements intempestifs des éléments lors du chargement. Vous savez, ce moment frustrant où vous allez cliquer sur un bouton et qu’un bloc se décale juste avant votre clic ? C’est exactement ce que le CLS mesure.

Sa formule de calcul repose sur deux mesures :

• La proportion d’impact : quelle surface de l’écran est affectée par le déplacement
• La proportion de distance : de combien l’élément s’est déplacé par rapport à la hauteur de la fenêtre

Score CLS = proportion d’impact × proportion de distance

Quels sont les seuils de score CLS selon Google ?

Google a défini des paliers clairs pour évaluer la performance d’un site sur cet indicateur :

Score CLS	Évaluation Google
≤ 0,1	Bon (Good)
Entre 0,1 et 0,25	À améliorer (Needs improvement)
> 0,25	Mauvais (Poor)

Un score CLS inférieur à 0,1 est l’objectif à atteindre pour satisfaire à la fois les utilisateurs et les algorithmes de Google.

Quelles sont les principales causes d’un mauvais score CLS ?

Plusieurs facteurs peuvent dégrader votre score CLS. Les webmasters de Google ont identifié les principaux :

• Des images ou vidéos sans dimensions définies (width/height)
• Des contenus injectés dynamiquement (publicités, bandeaux, pop-ins)
• L’utilisation de polices personnalisées provoquant un FOIT ou FOUT au chargement
• Des éléments qui se chargent après le contenu principal et le repoussent
• Un temps de latence réseau élevé amplifiant les décalages

Comment optimiser son score CLS ?

Optimiser le CLS d’une page nécessite une approche méthodique. Voici les bonnes pratiques à mettre en oeuvre :

• Toujours définir les dimensions des images et vidéos (attributs width et height) pour que le navigateur réserve l’espace avant leur chargement
• Éviter les publicités sans dimensions fixes : définissez des espaces réservés statiques
• Précharger les polices personnalisées avec la directive font-display: optional ou swap
• Utiliser la propriété CSS aspect-ratio pour les éléments médias
• Charger les contenus dynamiques en dehors de la zone de lecture principale
• Inspecter les formulaires et CTA qui peuvent apparaître tardivement et décaler le contenu

Comment mesurer le CLS de son site ?

Google met à disposition plusieurs outils pour mesurer les Core Web Vitals et donc le CLS :

• Google Search Console : rapport Core Web Vitals avec données réelles sur les URL de votre site
• PageSpeed Insights : combine données de laboratoire (Lighthouse) et données de terrain (CrUX)
• Lighthouse : outil de laboratoire intégré à Chrome DevTools, indicatif mais non représentatif du réel
• Web Vitals Extension : extension Chrome pour mesurer les Core Web Vitals en temps réel

La Google Search Console et PageSpeed Insights sont les deux outils les plus fiables car ils s’appuient sur des données de terrain réelles (données CrUX).

Quel impact du CLS sur le SEO ?

Depuis le déploiement de la Google Page Experience (juin 2021), les Core Web Vitals — dont le CLS — sont officiellement des signaux de classement pour Google. Cela dit, leur poids reste modéré face à la pertinence du contenu.

En revanche, l’impact indirect est réel : un mauvais CLS dégrade l’expérience utilisateur, augmente le taux de rebond et diminue le temps passé sur la page — autant de signaux négatifs pour votre référencement. L’optimisation de l’expérience utilisateur est donc indissociable d’une bonne stratégie SEO. Pour aller plus loin, notre page dédiée au SEO technique vous donnera toutes les clés pour optimiser les performances techniques de votre site.