Qu'est-ce que le CLS (Cumulative Layout Shift) ? Définition et norme

CLS signifie Cumulative Layout Shift et mesure à quel point les éléments visibles de votre page se déplacent de façon inattendue pendant son chargement. Vous connaissez la sensation : vous voulez appuyer sur un bouton, une image surgit soudainement, et vous cliquez au mauvais endroit. Ce glissement visuel est exactement ce que le CLS capture. C’est l’un des trois Core Web Vitals de Google, et donc un signal qui pèse dans votre SEO. Dans cet article, vous découvrirez ce qu’est précisément le CLS, quel score viser et comment corriger les décalages de mise en page.

Qu’est-ce que le CLS exactement ?

Le CLS est un score qui mesure la stabilité visuelle de votre page. Chaque fois qu’un élément visible change de place sans que le visiteur ait effectué une action, cela compte comme un layout shift. Le score combine deux choses : quelle proportion de l’écran se déplace et sur quelle distance.

Important : le CLS est cumulatif, ce qui signifie que tous les déplacements inattendus pendant la session sont additionnés. Un grand saut ou beaucoup de petits sauts mènent l’un comme l’autre à un score élevé, et donc mauvais.

Le CLS fait partie des Core Web Vitals, l’ensemble des scores de performance centrés sur l’utilisateur avec lesquels Google mesure la fluidité perçue d’une page. Les deux autres sont le LCP (vitesse de chargement du plus grand élément) et l’INP (rapidité de réaction à une interaction). Là où le LCP et l’INP portent sur le temps, le CLS porte purement sur la stabilité : ce que vous voyez reste-t-il en place ?

Qu’est-ce qu’un bon score CLS ?

Google applique des seuils clairs. Selon web.dev :

• Bon : 0,1 ou moins
• À améliorer : entre 0,1 et 0,25
• Mauvais : supérieur à 0,25

Ce score est mesuré au 75e percentile de vos pages vues, réparties entre mobile et desktop. Autrement dit : au moins 75 pour cent de vos visiteurs doivent connaître un CLS de 0,1 ou moins avant que votre page ne soit considérée comme “bonne”. Vous ne mesurez donc pas un test idéal unique, mais la réalité de vos vrais visiteurs.

Qu’est-ce qui provoque un CLS élevé ?

Les layout shifts ont presque toujours les mêmes causes. Les plus grands coupables :

• Les images sans dimensions. Si le navigateur ne sait pas quelle taille aura une image, il ne réserve pas d’espace et tout se décale dès qu’elle se charge.
• Les publicités, embeds et iframes. Des blocs qui n’apparaissent que plus tard poussent votre contenu vers le bas.
• Les polices chargées tardivement. Un texte qui passe de la police par défaut à votre propre police décale la mise en page.
• Le contenu inséré dynamiquement. Bandeaux cookies, notifications ou “articles liés” qui apparaissent au-dessus du contenu existant.

Une bonne partie de cela recoupe l’optimisation des images : qui charge proprement ses images avec une largeur et une hauteur fixes résout d’un coup une grande partie de son CLS.

Le tableau ci-dessous met côte à côte les quatre causes les plus fréquentes, avec ce qui cloche et le correctif que nous appliquons en premier dans la pratique.

Ce type de stabilité technique relève du SEO technique : il ne s’agit pas de produire plus de contenu, mais d’avoir une page qui se comporte de façon prévisible.

Comment améliorer votre CLS ?

Les solutions sont techniques mais concrètes :

• Donnez toujours aux images et aux vidéos une largeur et une hauteur fixes (ou un aspect-ratio), afin que le navigateur réserve l’espace.
• Réservez de l’espace pour les publicités et les embeds avec un format de conteneur fixe.
• Chargez les polices intelligemment pour qu’aucun changement de police visible ne se produise.
• Ajoutez le contenu dynamique sous la ligne de flottaison, pas en haut où il repousse les éléments existants.

Une approche plus large de votre vitesse et de votre stabilité se trouve dans améliorer les Core Web Vitals. Le CLS y est souvent le plus facile à corriger, parce que les causes se situent généralement dans une poignée d’éléments.

Un exemple B2B concret

Imaginons : une société de logiciels dispose d’une landing page pour une demande de démo. En haut se trouve une grande image hero sans dimensions fixes, et le formulaire de contact est en dessous. Sur mobile, le texte se charge en premier, le visiteur commence à lire le formulaire, puis l’image hero surgit malgré tout. Tout ce qui se trouve sous l’image descend d’un cran. Celui qui voulait justement appuyer sur le premier champ touche à la place un mauvais bouton ou perd le fil.

Dans la pratique, nous constatons que ces décalages font surtout mal sur précisément les pages qui doivent générer des leads. La solution était ici modeste : donner une hauteur fixe au hero et placer le formulaire dans un conteneur réservé. Aucune page réécrite, mais une première impression plus stable au moment où cela compte.

Erreurs fréquentes

• Tester uniquement sur desktop. La plupart des layout shifts se remarquent sur mobile, où les images lentes à charger et les écrans étroits amplifient chaque écart. Mesurez toujours le score mobile.
• Se fier à un seul test en laboratoire. Un score propre dans un outil de test dit peu de chose si vos vrais visiteurs ont des connexions lentes ou d’autres formats d’écran. C’est le CLS issu des données de terrain (le 75e percentile) qui compte.
• Oublier le bandeau cookies. Une bannière ou une notification de consentement qui se glisse en haut décale toute votre page et passe facilement inaperçue lors des tests.
• Traiter le CLS comme une tâche isolée. Si vous corrigez vos images mais laissez de côté les publicités et le contenu tardif, le score restera élevé. Traitez les causes ensemble.

Honnêtement : quel poids a le CLS en B2B ?

Soyons honnêtes : un score CLS parfait ne génère pas de leads en soi. Google utilise les Core Web Vitals comme un signal parmi beaucoup d’autres, et le contenu et la pertinence pèsent plus lourd. Vous ne dépasserez pas votre concurrent uniquement parce que votre page ne saute pas.

Là où le CLS compte vraiment, c’est sur la confiance et la conversion. Un visiteur B2B qui envisage un devis et atterrit sur une page qui saute doute inconsciemment de votre professionnalisme. Pire encore : si votre call-to-action ou votre formulaire de contact se déplace au moment où quelqu’un veut cliquer, vous perdez l’action qui compte vraiment. Vu ainsi, le CLS n’est pas une astuce SEO mais une question de ne pas gêner votre visiteur. Pilotez donc ce score parce qu’il aide votre conversion, pas pour le tableau de bord.

Questions fréquentes

Que signifie CLS ? CLS signifie Cumulative Layout Shift et mesure à quel point les éléments visibles de votre page se déplacent de façon inattendue pendant le chargement. C’est l’un des Core Web Vitals de Google.

Qu’est-ce qu’un bon score CLS ? 0,1 ou moins est bon, entre 0,1 et 0,25 est à améliorer et au-dessus de 0,25 est mauvais, mesuré au 75e percentile de vos visiteurs.

Quelle est la principale cause d’un CLS élevé ? Le plus souvent des images, des publicités ou des embeds sans dimensions fixes, ce qui empêche le navigateur de réserver de l’espace et fait sauter le contenu dès qu’ils se chargent.

Le CLS est-il un facteur de classement ? Le CLS fait partie des Core Web Vitals qui comptent comme signal de classement, mais son influence est limitée par rapport au contenu et à la pertinence. Le gain le plus important se situe dans l’expérience utilisateur et la conversion.

Votre page saute et cela vous coûte des conversions ?

Dites-nous quelles pages sont les plus importantes pour vos leads, et nous regardons où les layout shifts gênent vos visiteurs. Nous sommes une petite équipe qui avance vite, vous recevez donc des correctifs concrets plutôt qu’une liste de recommandations vagues. Planifiez votre entretien gratuit.