Le CLS, ce score qui gâche l’expérience utilisateur sans crier gare
Vous avez sûrement déjà vécu cette situation frustrante : vous lisez un article sur votre smartphone, vous êtes sur le point de cliquer sur un lien, et au dernier moment, un élément de la page se déplace brusquement. Vous voilà redirigé vers une publicité que vous ne souhaitiez pas visiter. Ce phénomène agaçant porte un nom technique : le Cumulative Layout Shift, ou CLS. Depuis que Google a officiellement intégré ce métrique dans ses Core Web Vitals en 2021, puis renforcé son poids dans les signaux de classement, le CLS est devenu un indicateur que les agences SEO françaises ne peuvent plus se permettre d’ignorer. Un score CLS supérieur à 0,1 est considéré comme insuffisant par Google, et au-delà de 0,25, votre site est officiellement dans la zone rouge. Pourtant, de nombreux sites professionnels continuent de cumuler des décalages visuels, souvent sans que leurs gestionnaires en aient la moindre conscience.
Les causes évidentes… et celles que tout le monde oublie
Les causes classiques du CLS sont aujourd’hui bien documentées : des images sans dimensions définies dans le HTML, des publicités qui s’insèrent dynamiquement dans la mise en page, ou encore des polices web qui se substituent tardivement aux polices système. Ces coupables habituels sont relativement faciles à identifier via des outils comme Google Search Console, PageSpeed Insights ou Lighthouse. Cependant, les vrais pièges se cachent souvent ailleurs. Parmi les causes moins connues, on trouve les iframes embarquées — notamment les lecteurs vidéo YouTube ou Vimeo — qui, lorsqu’elles sont intégrées sans attribut de ratio d’aspect, provoquent des sauts de mise en page au moment où elles finissent de charger. De même, les bannières de consentement RGPD, omniprésentes sur les sites français depuis l’entrée en vigueur du règlement européen, sont une source majeure de CLS si elles sont injectées dans le DOM après le premier rendu de la page. Une bannière qui s’insère en haut de page après le chargement initial peut déplacer l’intégralité du contenu visible, générant un score CLS catastrophique en quelques millisecondes.
Les animations CSS et JavaScript : des suspects moins évidents
Un autre domaine souvent négligé concerne les animations et transitions CSS. Certaines animations qui modifient des propriétés comme height, width, top ou margin peuvent provoquer des reflows du layout et contribuer au CLS. La bonne pratique consiste à privilégier les animations basées sur les propriétés transform et opacity, qui s’exécutent sur le thread du compositeur et n’impactent pas le calcul de la mise en page. Du côté de JavaScript, les scripts tiers constituent une menace sérieuse. Les outils de chat en ligne, les widgets de réseaux sociaux, les pixels de tracking ou encore les scripts d’A/B testing peuvent injecter des éléments dans le DOM de façon asynchrone, bien après le rendu initial. En France, où les sites e-commerce et les sites d’agences intègrent souvent une multitude de solutions tierces — de Hotjar à Intercom en passant par divers outils CRM — ce problème est particulièrement répandu. Une audit des scripts tiers avec l’onglet Performance de Chrome DevTools permet de repérer ces injections tardives et de mesurer leur impact réel sur le score CLS.
Les polices web, un coupable récurrent mais maîtrisable
Le phénomène du FOUT (Flash of Unstyled Text) et du FOIT (Flash of Invisible Text) est intimement lié au CLS. Lorsqu’une police web met du temps à se charger, le navigateur utilise temporairement une police système de substitution dont les métriques — chasse, hauteur de ligne, interlettrage — diffèrent souvent significativement de la police cible. Ce changement de police provoque un recalcul du layout et, par conséquent, un décalage visible des éléments textuels. Depuis peu, la propriété CSS size-adjust associée à @font-face permet d’ajuster les dimensions d’une police de substitution pour qu’elle corresponde au mieux à la police web, limitant ainsi le saut visuel lors de la substitution. La directive font-display: optional est une autre approche radicale : elle empêche tout rendu de la police web si elle n’est pas disponible dans le cache, évitant tout changement de police après le premier rendu. L’hébergement local des polices plutôt que l’utilisation de Google Fonts via CDN est également fortement recommandé, d’autant qu’il présente l’avantage supplémentaire d’éviter les requêtes vers des serveurs tiers, un point sensible en matière de conformité RGPD pour les sites opérant en France.
Mesurer le CLS réel vs le CLS de laboratoire
Une subtilité importante que les référenceurs expérimentés connaissent bien : il existe une différence significative entre le CLS mesuré en conditions de laboratoire (via Lighthouse ou PageSpeed Insights) et le CLS dit « de terrain », mesuré à partir des données réelles des utilisateurs via le Chrome User Experience Report (CrUX). C’est ce dernier que Google utilise réellement pour évaluer vos Core Web Vitals dans la Search Console. Le CLS de terrain peut parfois être bien meilleur que le CLS de laboratoire — si les utilisateurs accèdent souvent à votre site avec les polices déjà en cache — ou au contraire bien pire, si certaines interactions utilisateur déclenchent des décalages que les outils de laboratoire ne simulent pas. Depuis la mise à jour de la définition du CLS en 2021, Google ne cumule plus tous les décalages depuis le début du chargement de la page, mais les regroupe en fenêtres de session et retient la pire fenêtre. Ce changement, souvent méconnu, signifie que des interactions comme le défilement ou les clics sur des accordéons peuvent maintenant contribuer au score CLS, ce qui change la façon dont il faut aborder les corrections sur des pages longues et interactives, fréquentes sur les sites de contenu et les blogs d’agences.
Stratégie de correction : par où commencer pour les agences françaises ?
Pour une agence SEO qui gère un portefeuille de clients, la priorité est d’abord d’identifier les pages les plus touchées grâce au rapport Core Web Vitals de la Search Console, puis de reproduire les problèmes en environnement de développement avec Chrome DevTools, en activant l’option Layout Shift Regions dans le panneau Rendering, qui colore en bleu les zones affectées par des décalages. Une fois les causes identifiées, les corrections suivent généralement un ordre de priorité : réservation d’espace pour les images et médias via les attributs width et height ou la propriété CSS aspect-ratio, gestion du chargement des polices, puis traitement des injections de contenu dynamique. Sur les sites sous WordPress — qui représentent une part très importante du parc de sites français — des plugins comme Perfmatters ou des configurations avancées de cache permettent de différer le chargement des scripts tiers problématiques. L’objectif final n’est pas seulement d’obtenir un beau score dans PageSpeed Insights, mais bien d’améliorer concrètement l’expérience des visiteurs français qui consultent vos sites sur mobile, dans des conditions réseau parfois dégradées, et dont la patience — comme celle de tout internaute — reste une ressource précieuse à ne jamais gaspiller.
