Vous est-il déjà arrivé de vouloir cliquer sur un bouton sur un site web… et au dernier moment, le contenu se décale et vous cliquez au mauvais endroit ? C’est frustrant ! Ce mouvement brusque des éléments d’une page n’est pas une fatalité : il porte un nom, et Google le surveille de très près. Ce coupable, c’est le Cumulative Layout Shift, souvent abrégé par son petit nom : CLS.
- Comprendre pourquoi les éléments qui bougent sur un site irritent les visiteurs et peuvent faire perdre des clics ou des ventes.
- Découvrir comment le score CLS influence la visibilité sur Google et la performance globale du site.
- Apprendre les bonnes pratiques simples pour rendre une page stable et agréable dès son affichage.
Si vous avez déjà utilisé PageSpeed Insights, l’outil de Google pour mesurer les performances de votre site, vous avez forcément vu cette métrique. Mais que signifie-t-elle vraiment ? Pourquoi est-elle si importante pour votre référencement et l’expérience de vos visiteurs ? Et surtout, comment faire pour l’améliorer ?
Vous êtes au bon endroit. Prenez un chocolat chaud, installez-vous confortablement : nous allons découvrir ensemble, pas à pas, comment dompter le Cumulative Layout Shift.
- Qu'est ce que le Cumulative Layout Shift (CLS) ?
- Pourquoi le Cumulative Layout Shift est essentiel pour le SEO
- Comment PageSpeed Insights mesure le CLS
- Les causes les plus fréquentes d’un mauvais CLS
- Comment corriger le Cumulative Layout Shift : les bonnes pratiques à connaîtr
- Mesurer et analyser le CLS : où trouver les informations utiles
- Pourquoi c’est plus difficile sur mobile
- Le Cumulative Layout Shift, un indicateur de maturité web
Qu’est ce que le Cumulative Layout Shift (CLS) ?
Le Cumulative Layout Shift correspond à l’ensemble des déplacements inattendus d’éléments visibles sur une page après que celle-ci a commencé à s’afficher. Ce n’est pas simplement un détail technique : ce phénomène perturbe vos visiteurs et dégrade leur expérience.
Un déplacement inattendu, c’est par exemple :
- Lorsque le texte descend soudainement parce qu’une image se charge au-dessus
- Quand une publicité apparaît et pousse un bouton ailleurs
- Quand une police de caractère se charge tardivement et modifie la taille du texte
Le CLS additionne tous ces mouvements pour donner une note finale. Plus la note est basse, plus votre site est stable et agréable à parcourir.
Ce que cela change pour vos visiteurs
Imaginez que vous lisez un article et que soudain un bloc apparaît, déplaçant tout le paragraphe. C’est comme si quelqu’un tirait votre chaise pendant que vous vous asseyez. On rit une fois, mais après trois ou quatre fois, on se demande pourquoi on reste.
Sur mobile, c’est encore pire. Les écrans sont plus petits, donc le moindre décalage devient un vrai problème. Les utilisateurs peuvent même cliquer accidentellement sur un lien ou un bouton qu’ils ne souhaitaient pas utiliser.
Ce que Google veut éviter, c’est une expérience frustrante ou gênante. C’est pour cela que le CLS fait partie des Core Web Vitals, trois indicateurs clés utilisés pour évaluer la qualité d’un site.
Pourquoi le Cumulative Layout Shift est essentiel pour le SEO
Google récompense les sites confortables à utiliser. Depuis 2021, Google intègre le CLS dans son algorithme de classement. Ce n’est plus seulement une métrique technique pour développeurs passionnés : c’est un vrai critère SEO.
Un CLS trop élevé peut :
- Faire baisser votre score sur PageSpeed Insights
- Réduire votre visibilité dans les résultats de recherche
- Augmenter le taux de rebond de votre site
Google le dit clairement : un site rapide, bien construit et stable offrira une meilleure expérience utilisateur. Et l’expérience utilisateur, cela compte pour votre positionnement.
Un site avec un bon CLS génère plus de conversions
Moins de frustration signifie :
- Plus de temps passé sur la page
- Plus de clics sur les bons boutons
- Moins d’abandons au moment de l’achat ou de l’inscription
Une étude interne (pas besoin d’être ingénieur chez Google pour la deviner) montre que chaque seconde perturbante peut coûter des ventes. Un bouton « Ajouter au panier » qui se déplace au mauvais moment peut suffire à faire fuir un client.
Comment PageSpeed Insights mesure le CLS
Une métrique notée avec précision. Lorsque vous analysez votre site sur PageSpeed Insights, vous obtenez une valeur chiffrée. Elle peut paraître très abstraite au début, alors voici l’échelle officielle :
- CLS idéal : inférieur à 0,1
- CLS passable : entre 0,1 et 0,25
- CLS mauvais : supérieur à 0,25
Autrement dit, si votre score dépasse 0,1, vous avez déjà des améliorations à prévoir.
Données de laboratoire vs données réelles
Vous verrez parfois deux valeurs de CLS :
- La mesure « laboratoire » (simulée sur un appareil)
- La mesure « terrain » (basée sur les vrais utilisateurs Chrome)
Les deux sont complémentaires. Si la version terrain révèle un mauvais CLS, cela signifie que vos visiteurs rencontrent réellement ces décalages. Ce n’est pas juste un scénario théorique.
Les causes les plus fréquentes d’un mauvais CLS
Voici les causes et comment les corriger. Ce que l’on croise le plus souvent sur les sites :
- Images sans dimensions définies
- Publicités ou bannières chargées dynamiquement
- Polices web (Google Fonts par exemple) chargées trop tard
- Vidéos ou iframe intégrées sans attributs de taille
- Composants interactifs ajoutés au chargement
- Éléments du menu ou du header qui se décalent lorsqu’un script s’exécute
Comment corriger le Cumulative Layout Shift : les bonnes pratiques à connaîtr
Définir des dimensions fixes pour toutes vos images : C’est l’une des premières sources de CLS. Lorsque le navigateur charge une image sans connaître sa taille, il affiche d’abord l’espace minimum… puis agrandit brutalement la zone lorsque le fichier est enfin téléchargé. Cela provoque un décalage du reste du contenu.
La solution est très simple : indiquer la largeur et la hauteur de chaque image dans votre code HTML ou votre style CSS. Par exemple :
<img src="produit.jpg" width="600" height="400" alt="Exemple de produit">En précisant ces dimensions, le navigateur réservera directement l’espace nécessaire, même si l’image n’est pas encore affichée. Votre mise en page reste stable, et la métrique CLS augmente instantanément.
Cela vaut aussi pour les images d’arrière-plan. On peut utiliser des conteneurs avec ratio d’aspect (la proportion largeur/hauteur) pour éviter que l’espace ne se réorganise pendant le chargement.
Tutoriel : Image responsive en HTML
Donner une taille prédéfinie aux vidéos, iframes et cartes
Comme les images, les vidéos YouTube, les iframes (contenu embarqué) ou hCartes Google Maps peuvent s’insérer après coup dans la page, souvent parce qu’un script externe les génère au dernier moment.
Vous pouvez éviter cela en :
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?- Prévoyant un conteneur avec un ratio adapté
- Appliquant une hauteur et une largeur minimum
- Chargeant le player uniquement après un clic (technique du « click-to-load » qui peut aussi booster les performances)
Par exemple, une vidéo YouTube intégrée sans dimensions provoque presque toujours un déplacement du contenu. Il est donc stratégique d’en tenir compte dès la conception.
Stabiliser les publicités et éléments dynamiques
Nous savons tous que les pubs aiment s’afficher où bon leur semble, souvent après le contenu principal. Elles apparaissent soudainement, et tous les éléments en dessous sont poussés vers le bas. Un cauchemar pour le CLS.
Deux solutions très efficaces : Réserver d’avance l’espace où la publicité apparaîtra et prévoir un espace de remplacement même si l’annonce ne charge pas
Autrement dit, votre page ne doit jamais dépendre d’un élément incertain pour maintenir sa structure.
Optimiser le chargement des polices web
Ce problème est très visible : le texte s’affiche avec une police système par défaut, puis lorsque la police personnalisée arrive, la taille change… et tout se déplace.
On appelle cela le FOIT (Flash Of Invisible Text) ou le FOUT (Flash Of Unstyled Text). Pour y remédier, trois approches simples :
- Utiliser l’attribut
font-display: swapdans les @font-face - Précharger les polices via
<link rel="preload" …> - Choisir une police système très proche de celle utilisée
Ainsi, le texte ne changera pas de taille en cours de route, et la lecture restera fluide.
Attention aux animations et aux injections tardives de contenu
Certains scripts ajoutent du contenu après le chargement initial : messages de cookies, options personnalisées, formulaires, éléments interactifs. Sur mobile, ce type de mouvement est souvent perçu comme brusque et désagréable.
Pour éviter un mauvais CLS :
- Insérez ces éléments dès le départ, même masqués
- Évitez les animations qui modifient la position d’un bloc
- Chargez d’abord le squelette complet de la page (layout)
Cette idée peut sembler contradictoire : afficher des éléments invisibles dès le départ ? Oui, c’est justement ce qui stabilise l’architecture de votre page.
Mesurer et analyser le CLS : où trouver les informations utiles
Sur PageSpeed Insights, lorsque vous lancez une analyse, vous voyez un score coloré (vert, orange ou rouge). Plus bas dans la page, une section Core Web Vitals affiche le Cumulative Layout Shift.
En cliquant sur le détail, l’outil vous montre :
- Les pages concernées
- Les éléments qui provoquent les décalages
- Des pistes d’améliorations concrètes
Il ne s’agit pas d’un outil « pour faire joli ». PageSpeed Insights vous offre un diagnostic précis de l’expérience réellement vécue par vos utilisateurs.
Dans la Search Console de Google
Si votre site reçoit suffisamment de trafic, la Search Console affiche un rapport dédié : Signaux Web essentiels. Ce rapport montre :
- Les URL avec un CLS bon ou mauvais
- La tendance dans le temps
- Le nombre réel d’utilisateurs impactés
Si un groupe d’URL obtient un score élevé, c’est qu’un élément commun (le header, un script de pub, un bloc d’inscription) doit être examiné.
Avec Lighthouse et Chrome DevTools
Chrome propose également des outils pour visualiser les déplacements en direct pendant le chargement. Ouvrez l’inspecteur et cliquez sur l’onglet Lighthouse. On peut y voir :
- Quels éléments ont bougé
- Quand ils ont bougé
- La gravité du déplacement
Cet outil est fantastique pour comprendre pourquoi une page pourtant « propre » bouge encore.
Pourquoi c’est plus difficile sur mobile
Les écrans mobiles étant plus étroits, un petit changement de dimension en hauteur peut :
- Déplacer la moitié de la page
- Masquer un contenu important
- Provoquer des clics accidentels
Sur un ordinateur, un bloc peut se décaler de 20 pixels sans que l’on s’en rende vraiment compte. Sur smartphone, ces 20 pixels deviennent une source de frustration immédiate.
Il est donc essentiel de tester sur différents modèles de téléphones, avec des réseaux lents (3G simulée par exemple) et également en mode paysage et portrait
Un site peut paraître stable sur PC, mais catastrophique sur iPhone.
Le Cumulative Layout Shift, un indicateur de maturité web
Comprendre et optimiser le CLS, c’est montrer que votre site :
- Prend soin de ses visiteurs
- Se soucie de la lisibilité et du confort
- Anticipe les imprévus techniques
Cela fait partie d’une approche plus large : construire des sites qui se chargent vite, qui répondent rapidement et qui ne surprennent pas négativement les utilisateurs.
Vous l’avez remarqué, le Cumulative Layout Shift n’est pas une métrique esthétique ou secondaire. C’est un véritable juge de la qualité d’un site. Les visiteurs ne veulent plus voir les pages bouger dans tous les sens. Ils veulent cliquer au bon endroit, lire sans être interrompus, naviguer sans se battre avec la page.
Optimiser le CLS, c’est offrir une expérience plus fluide, plus confortable et finalement plus humaine. Et comme par hasard, Google adore cela. En stabilisant votre mise en page, vous stabilisez aussi votre présence dans les résultats de recherche.
Alors, la prochaine fois que vous ouvrirez PageSpeed Insights, ne voyez plus le Cumulative Layout Shift comme un score mystérieux. Voyez-le comme un allié, un guide qui vous montre le chemin vers un site plus agréable et plus performant. Et si un jour, grâce à vous, quelqu’un parvient enfin à cliquer sur le bouton « Valider » du premier coup… vous saurez que vous y êtes pour quelque chose.
Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi