TL;DRVous ouvrez une page sur votre téléphone. Vous visez le bouton Ajouter au panier, et au moment de toucher l'écran, une bannière apparaît, tout descend d'un cran et vous cliquez sur autre chose. Ce défaut porte un nom : le CLS, l'un des indicateurs de performance web suivis par Google. Il dégrade l'expérience utilisateur, et il se corrige presque toujours avec quelques règles simples. Je vous explique comment améliorer le CLS de votre site.
Qu'est-ce que le CLS ?#
Le CLS, pour Cumulative Layout Shift, mesure la stabilité visuelle d'une page. Il additionne les décalages de mise en page que le visiteur n'a pas provoqués : un texte qui descend, un bouton qui se déplace, une image qui pousse le contenu. Plus le score est bas, plus la page reste en place pendant le chargement.
C'est l'un des trois Core Web Vitals – les Signaux Web essentiels en français –, les indicateurs que Google utilise pour évaluer l'expérience réelle sur une page. Les deux autres sont le LCP, qui mesure la vitesse d'affichage du contenu principal, et l'INP, qui mesure la réactivité aux clics.
Le CLS n'est pas une durée. C'est un score sans unité, calculé à partir de deux éléments : la part de l'écran touchée par le décalage et la distance parcourue par les éléments déplacés.
Un détail utile : les mouvements qui suivent une action du visiteur ne comptent pas. Si un menu s'ouvre juste après un clic, c'est attendu, donc ce n'est pas pénalisé.
Quel est un bon score CLS ?#
Google considère qu'un CLS est bon jusqu'à 0,1. Entre 0,1 et 0,25, il est à améliorer. Au-delà de 0,25, il est mauvais. Ce seuil doit être respecté pour 75 % des visites, sur mobile et sur ordinateur, les deux étant évalués séparément.
Ce point des 75 % change tout. Votre page peut être stable sur votre ordinateur de bureau, avec une bonne connexion, et instable sur le téléphone d'un client en 4G. C'est l'expérience de la majorité de vos visiteurs qui compte, pas la vôtre.
Regardez donc toujours le mobile en premier. C'est là que les décalages sont les plus fréquents, parce que l'écran est étroit et que le moindre élément inséré pousse tout le reste.
Pourquoi le CLS compte pour votre SEO et vos ventes ?#
Le CLS fait partie des signaux d'expérience de page que Google prend en compte dans son classement. Son poids reste limité face à la pertinence du contenu. Son effet le plus direct est ailleurs : une page qui bouge provoque des clics ratés, de l'agacement et des abandons, surtout sur mobile.
Je préfère être honnête : corriger votre CLS ne vous fera pas passer de la page 3 à la première position. Un contenu qui répond mal à la recherche ne sera pas sauvé par une page stable.
En revanche, sur une boutique en ligne, un bouton qui se déplace au moment du clic se paie tout de suite. Le visiteur ouvre la mauvaise fiche, ferme une fenêtre par erreur ou valide une option qu'il ne voulait pas.
C'est pour cette raison que je traite le CLS dans chaque audit SEO, au même titre que la vitesse de chargement : c'est un sujet de SEO technique, mais c'est d'abord un problème de confort pour vos clients.
Comment mesurer le CLS de votre site ?#
Commencez par PageSpeed Insights : saisissez une adresse, l'outil affiche le CLS vécu par vos vrais visiteurs quand les données existent, puis un test en laboratoire. Complétez avec le rapport Signaux Web essentiels de la Search Console, qui regroupe vos pages par type de problème.
Données de terrain et données de laboratoire#
Les données de terrain viennent des visiteurs réels, sur les 28 derniers jours. Les données de laboratoire viennent d'un test simulé, lancé une seule fois, sans défilement ni interaction.
Les deux peuvent diverger. Un test en laboratoire ne voit pas le bandeau qui apparaît après dix secondes, ni le bloc qui se charge quand on descend dans la page. Si les chiffres ne concordent pas, fiez-vous au terrain.
Trouver l'élément qui bouge#
Dans PageSpeed Insights, le diagnostic sur les décalages de mise en page liste les éléments responsables. Dans Chrome, l'onglet Performance des outils de développement les met en évidence un par un. Lighthouse, intégré à Chrome, permet de relancer le test en laboratoire après chaque correction.
Si vous voulez un premier état des lieux sans rien installer, notre outil d'analyse de site gratuit donne une vue d'ensemble en quelques minutes.
Quelles sont les causes d'un mauvais CLS et comment l'optimiser ?#
Un mauvais CLS vient presque toujours de la même erreur : un élément s'affiche sans que sa place ait été réservée. Les coupables habituels sont les images sans dimensions, les polices web, les bandeaux insérés en haut de page et les contenus tiers comme les publicités, les vidéos ou les widgets d'avis.
Les images et vidéos sans dimensions#
Sans largeur ni hauteur déclarées, le navigateur ne sait pas quelle place garder. Il affiche le texte, puis le repousse quand l'image arrive.
La correction est simple : renseignez les attributs width et height sur chaque image, ou utilisez la propriété CSS aspect-ratio. Le navigateur réserve alors l'espace dès le départ.
J'ai vu le même problème avec un élément moins courant. Sur un site vitrine, l'animation en haut de page était dessinée dans un canevas dimensionné par un script, donc un peu trop tard. Tout le contenu sautait à l'affichage. En fixant sa taille immédiatement, le décalage a disparu.
Les polices web#
Le navigateur affiche d'abord une police de secours, puis la remplace par la vôtre. Si les deux n'ont pas la même largeur, les lignes se recoupent autrement et le texte bouge.
Deux pistes : précharger la police principale, et choisir une police de secours aux proportions proches. Sur le site dont je parlais, j'ai retenu une autre approche : les polices personnalisées ne s'activent qu'une fois mises en cache, donc jamais en plein affichage.
Les bandeaux et contenus insérés après coup#
Bandeau cookies, barre de promotion, message de livraison offerte : dès qu'un bloc s'insère au-dessus du contenu, tout descend.
Affichez ces éléments par-dessus la page, en position fixe, au lieu de les glisser dans le flux. Pour les blocs chargés plus tard – avis clients, produits recommandés, publicités – réservez leur hauteur avec un min-height.
Les animations#
Animer la hauteur, la largeur ou les marges d'un élément déplace ses voisins. Utilisez plutôt transform et opacity, qui ne touchent pas à la mise en page.
Sur PrestaShop comme sur Shopify, vérifiez aussi vos modules et applications. Beaucoup injectent leur contenu une fois la page affichée, et c'est souvent là que se cache le décalage.
FAQ sur le CLS#
Que veut dire CLS ?#
CLS signifie Cumulative Layout Shift, soit décalage cumulé de mise en page. C'est l'indicateur de Google qui mesure si les éléments d'une page restent en place pendant le chargement et la navigation.
Le CLS est-il un facteur de classement Google ?#
Oui, comme les autres Core Web Vitals, il fait partie des signaux d'expérience de page. Son poids reste modeste : à contenu comparable il peut faire la différence, mais il ne remplace pas un contenu pertinent.
Pourquoi mon CLS est bon dans le test mais mauvais dans la Search Console ?#
Le test en laboratoire charge la page une seule fois, sans défiler. La Search Console reflète les visites réelles, avec leurs bandeaux, leurs connexions lentes et leurs contenus chargés au défilement. C'est elle qui fait référence.
Combien de temps faut-il pour voir l'amélioration ?#
Le test en laboratoire réagit tout de suite. Les données de terrain portent sur 28 jours glissants : comptez environ un mois pour que la correction soit entièrement visible.
Le CLS concerne-t-il aussi les ordinateurs ?#
Oui, mobile et ordinateur sont évalués séparément. Le mobile est en général le plus touché, c'est donc lui qu'il faut contrôler en priorité.
Un CLS stable, c'est d'abord une question de place réservée#
Retenez une seule règle : tout ce qui s'affiche doit avoir sa place prévue à l'avance. Images dimensionnées, polices maîtrisées, bandeaux hors du flux. Avec ces trois points, la plupart des problèmes de CLS disparaissent et la stabilité visuelle de vos pages revient.
Si la performance de votre site vous préoccupe, deux lectures peuvent compléter celle-ci : notre étude de cas sur la compression des images en AVIF et notre page sur le référencement naturel.
Vous voulez savoir ce qui fait bouger vos pages et par quoi commencer ? Réservez un échange de 45 minutes : on regarde votre site ensemble et vous repartez avec une liste de corrections classées par priorité.
