Le bouton d’achat se déplace quand un élément inséré au-dessus de lui — bannière, widget, iframe ou police — n’a pas d’espace réservé. Le navigateur découvre sa taille après coup et pousse le contenu vers le bas. Réservez les dimensions de chaque bloc avant chargement, chargez les widgets après l’action principale et vérifiez le CLS au 75e percentile, mobile et ordinateur, avec des données de terrain.
Qu’est-ce que le CLS, et pourquoi le bouton d’achat est-il concerné ?
Le Cumulative Layout Shift mesure l’instabilité visuelle d’une page : il combine l’ampleur du contenu visible qui bouge dans la fenêtre et la distance parcourue par les éléments déplacés. C’est une valeur sans unité, contrairement au LCP et à l’INP qui sont des métriques temporelles. Google recommande un CLS de 0,1 ou moins pour au moins 75 % des visites ; une valeur supérieure à 0,25 est considérée comme mauvaise (Optimize Cumulative Layout Shift).
Sur une fiche produit, le bouton d’achat est l’élément le plus sensible. Un décalage de quelques dizaines de pixels au moment du clic peut faire atterrir le doigt sur un autre lien, ou obliger l’acheteur à retrouver sa cible. Google cite parmi les causes courantes les images sans dimensions, les publicités, les embeds et iframes sans dimensions, le contenu injecté dynamiquement, et les polices web (Optimize Cumulative Layout Shift).
Le CLS fait partie des trois Core Web Vitals actuels, aux côtés du LCP (chargement) et de l’INP (interactivité). Ces métriques sont mesurables sur le terrain et il est recommandé de les suivre au 75e percentile des chargements, segmentées entre mobile et ordinateur (Web Vitals).
Pourquoi une bannière déplace-t-elle le contenu même si elle est petite ?
Le problème n’est pas la taille finale de la bannière, mais le moment où le navigateur apprend cette taille. Une régie publicitaire peut renvoyer un format différent de celui prévu, ou injecter la créative après le rendu initial. Si aucun espace n’est réservé, tout ce qui suit — texte, galerie, bouton d’achat — descend d’un coup.
Google cite les publicités parmi les causes courantes de décalage, car les formats dynamiques peuvent pousser le contenu visible vers le bas (Optimize Cumulative Layout Shift). Le même mécanisme s’applique aux widgets embarqués : vidéos, cartes, avis clients ou fils de réseaux sociaux arrivent souvent sans dimensions connues à l’avance.
Exemple hypothétique
Imaginez une fiche produit où une bannière de 90 pixels de haut est insérée entre le fil d’Ariane et le titre. Si elle se charge après le premier rendu, le titre, le prix et le bouton d’achat descendent de 90 pixels. Un utilisateur qui visait le bouton au moment du chargement peut cliquer à côté. Les 90 pixels sont ici une illustration, pas une mesure relevée sur un site réel.
Comment réserver l’espace des bannières et widgets ?
La méthode tient en trois décisions, à appliquer bloc par bloc.
| Élément | Décision | Vérification |
|---|---|---|
| Bannière publicitaire | Réserver un conteneur de hauteur fixe, même vide | Comparer la hauteur du conteneur avant et après chargement de la créative |
| Widget d’avis ou de vidéo | Définir largeur et hauteur sur le conteneur, pas seulement sur l’iframe | Inspecter le conteneur dans les outils du navigateur |
| Image produit | Déclarer les dimensions intrinsèques | Vérifier qu’aucun saut ne se produit au chargement de l’image |
| Police web | Utiliser une police de repli aux métriques proches | Recharger avec un cache vidé et observer le texte |
Pour les publicités, la règle pratique est de ne jamais laisser un emplacement sans hauteur minimale. Si la régie peut renvoyer plusieurs formats, réservez la hauteur du plus grand format prévu, quitte à laisser un espace vide quand la créative est plus petite. Un espace vide est préférable à un décalage.
Pour les widgets, la cause est souvent une iframe sans attributs de dimension. Le conteneur parent doit porter la taille, et l’iframe doit s’y adapter. Si le widget injecte du contenu après chargement, testez le comportement en simulant une connexion lente.
Pour les polices, le décalage vient de la différence de métriques entre la police de repli et la police finale. Google cite les polices web parmi les causes courantes (Optimize Cumulative Layout Shift). La vérification consiste à recharger la page avec un cache vidé et à observer si le texte se réorganise.
Comment mesurer le CLS sans se fier à un score unique ?
Un score de laboratoire ne suffit pas à décider. Le CLS dépend du parcours réel : connexion, appareil, moment d’apparition des publicités. La démarche utile est de comparer les données de terrain au 75e percentile, segmentées mobile et ordinateur, comme le recommande Google (Web Vitals).
- Identifiez les pages où le bouton d’achat est visible sans défilement.
- Repérez les éléments insérés au-dessus de lui : bannière, bandeau d’information, widget, sélecteur de variante.
- Pour chaque élément, vérifiez si sa hauteur est connue avant le rendu initial.
- Corrigez en réservant l’espace, puis remesurez sur la même population d’utilisateurs.
Cette séquence évite de traiter des décalages invisibles pour l’acheteur et concentre l’effort sur ce qui gêne l’action d’achat. Elle s’inscrit dans une logique de fondations : une boutique visible et utilisable repose d’abord sur des pages qui répondent à une intention d’achat, comme le détaille notre guide sur les fondations SEO d’une boutique e-commerce.
Quelles incertitudes faut-il accepter ?
Le CLS n’est pas un objectif isolé. Un score de 0,1 n’est pas une promesse de conversion, et un score supérieur ne condamne pas une page. Les seuils publiés décrivent une expérience jugée bonne ou mauvaise, pas une garantie commerciale. Par ailleurs, les publicités tierces peuvent modifier leur comportement sans préavis : une correction validée un mois peut se dégrader si la régie change de format.
Enfin, la mesure de terrain dépend de la population qui visite réellement le site. Un échantillon faible ou biaisé rend les comparaisons fragiles. Il est plus honnête de suivre une tendance sur plusieurs semaines que de conclure sur une seule mesure.
Questions fréquentes
Faut-il supprimer les bannières pour améliorer le CLS ?
Non. Réserver leur espace suffit dans la plupart des cas. Supprimer une bannière change le modèle économique de la page ; la stabiliser préserve à la fois l’expérience et le revenu publicitaire.
Le CLS de laboratoire et celui du terrain peuvent-ils diverger ?
Oui. Le laboratoire reproduit un scénario contrôlé, tandis que le terrain reflète des appareils, réseaux et comportements variés. Google recommande de suivre le 75e percentile des chargements, segmenté mobile et ordinateur (Web Vitals).
Ce qu’il faut retenir
Le bouton d’achat se déplace parce qu’un élément au-dessus de lui n’a pas d’espace réservé. Réservez la hauteur des bannières, fixez les dimensions des widgets et iframes, gérez les polices avec une police de repli proche, puis mesurez au 75e percentile sur mobile et ordinateur. Pour intégrer ce contrôle dans une démarche plus large, notre article sur l’audit SEO e-commerce et les contrôles à faire en premier propose un ordre de priorité utile.