Lorsque vous naviguez sur un site web depuis votre téléphone, vous avez peut-être déjà remarqué des déplacements inattendus de contenu : un bouton change de position juste avant que vous ne cliquiez dessus, ou un paragraphe descend soudainement sans prévenir. Ce type de désagrément est souvent dû à un indicateur appelé le CLS (Cumulative Layout Shift). Sur mobile, un score supérieur à 0,1 est considéré comme problématique par Google et peut pénaliser l’expérience utilisateur ainsi que le référencement naturel. Dans cet article,voyons ensemble ce qu’est précisément le CLS, pourquoi un score supérieur à 0,1 pose problème sur mobile, comment identifier les URL concernées, et quelles actions concrètes peuvent être prises pour optimiser votre site web.

Comprendre le CLS et son impact sur l’expérience mobile

Le CLS, ou Cumulative Layout Shift, est un indicateur de performance web encore relativement jeune, mais déjà devenu incontournable dans l’analyse de la qualité de navigation. Son rôle est de mesurer la stabilité visuelle d’une page lors de son chargement, en particulier les déplacements inattendus des éléments visibles par l’utilisateur. Autrement dit, il s’intéresse à ce que perçoit un internaute pendant que le contenu se met en place : chaque saut d’image, chaque bouton qui change de position sans prévenir, est enregistré et pénalise le score. Ce concept a émergé avec une volonté de mieux prendre en compte l’expérience réelle des utilisateurs, en particulier dans le contexte du mobile, où la fluidité et la lisibilité jouent un rôle majeur dans l’engagement. L’histoire du CLS est intimement liée à celle des Core Web Vitals, introduits par Google en mai 2020. Ce trio de métriques (LCP (Largest Contentful Paint), FID (First Input Delay) et CLS) a été présenté comme une évolution logique des précédents critères de performance purement techniques, comme le temps de chargement ou le poids des pages.

À l’origine, le projet est issu des travaux de l’équipe Chrome Speed Metrics chez Google, dirigée par Philip Walton et Nicolas Gallagher. Ces ingénieurs, spécialisés en performance web, ont observé que les métriques traditionnelles ne reflétaient pas toujours les désagréments perçus par les utilisateurs. Un site pouvait être techniquement rapide, mais visuellement instable, ce qui nuisait fortement à la navigation. D’où la naissance du CLS, une tentative de quantification de cette instabilité visuelle — jusqu’alors absente des modèles d’évaluation. Le CLS se calcule à partir de deux facteurs : la fraction de l’écran affectée par un changement de mise en page, et la distance parcourue par les éléments déplacés. Un score est attribué à chaque événement de déplacement, puis tous les scores sont additionnés sur la durée de vie de la page. Contrairement à d’autres métriques, il ne dépend pas uniquement de la vitesse de chargement mais aussi de la manière dont les contenus s’organisent visuellement.

Depuis juin 2021, Google a officiellement intégré les Core Web Vitals, et donc le CLS, comme signal de classement dans ses algorithmes de recherche. Cela signifie qu’une mauvaise note peut affecter la visibilité d’un site dans les résultats, en particulier sur mobile, où la navigation est souvent plus sensible aux perturbations visuelles. Voici un exemple représentatif : Un utilisateur commence à lire un article sur son smartphone. Une publicité, chargée quelques secondes plus tard, pousse le texte vers le bas. Résultat : l’utilisateur clique sur une mauvaise zone, se frustre, quitte la page. Ce type de comportement est ce que le CLS tente d’éliminer en encourageant les concepteurs de sites à anticiper l’espace nécessaire aux éléments et à stabiliser les blocs dynamiques.

Sur mobile, ces déplacements sont souvent amplifiés par la taille réduite de l’écran, ce qui rend le CLS d’autant plus pertinent. Une bannière qui déplace de 100 pixels un bloc de texte sur un écran de 15 pouces ne gênera que peu l’utilisateur, mais la même bannière sur un écran de 5 ou 6 pouces peut fortement perturber la lecture et l’interaction.

Le seuil recommandé par Google pour le CLS est le suivant :

En 2023, Google a mis à jour sa méthode de calcul du CLS pour mieux refléter les cas réels de navigation, notamment en introduisant une mesure dite “de session”, qui permet d’ignorer les changements très espacés dans le temps. Cette évolution visait à corriger certains biais, notamment pour les pages à contenu long ou les sites à chargement progressif, comme les applications monopages (SPA).

Identifier les URL avec un CLS mobile supérieur à 0,1

Améliorer l’expérience mobile d’un site passe inévitablement par une identification précise des pages concernées par un score CLS supérieur à 0,1. Cette démarche est essentielle pour cibler les efforts d’optimisation et corriger efficacement les éléments responsables de la mauvaise stabilité visuelle. Contrairement à une simple mesure de performance comme le temps de chargement, le CLS reflète des perturbations concrètes dans la navigation vécue par l’utilisateur. Il s’agit donc de comprendre non seulement où les problèmes apparaissent, mais aussi comment et pourquoi. Pour cela, Google a mis à disposition une série d’outils puissants et complémentaires :

• Google Search Console : Accessible gratuitement pour tout propriétaire de site, cet outil fournit une vue d’ensemble des pages avec des scores CLS problématiques. Dans l’onglet “Signaux Web essentiels”, vous trouverez une distinction entre les performances sur mobile et ordinateur, ce qui permet d’isoler facilement les URL à améliorer sur smartphone. Ce rapport s’appuie sur les données du Chrome UX Report (CrUX), qui reflètent les conditions de navigation réelles enregistrées auprès de millions d’utilisateurs de Chrome à travers le monde ;
• PageSpeed Insights : Pour chaque URL individuelle, cet outil fournit un audit détaillé. Il affiche le score CLS issu des données de terrain (si disponibles) et génère également un test en conditions contrôlées. Il est particulièrement utile pour découvrir les éléments précis qui provoquent les sauts de mise en page. Les recommandations sont contextualisées, avec des exemples de lignes de code problématiques ou des ressources à ajuster ;
• Lighthouse (via Chrome DevTools) : Intégré directement dans le navigateur Chrome, cet outil est destiné aux développeurs souhaitant analyser en profondeur le comportement de leur page. Il simule un chargement de page, mesure le CLS généré dans un environnement de test et permet d’inspecter en détail les éléments HTML et CSS impliqués dans les déplacements. Lighthouse est particulièrement pertinent pour les sites dynamiques ou les applications monopages (SPA), où le contenu est injecté de façon asynchrone.

Ces outils offrent des angles d’approche différents, mais se recoupent autour d’un même objectif : détecter avec précision quelles URL souffrent d’un manque de stabilité visuelle sur mobile. Une attention particulière doit être portée aux pages qui reçoivent le plus de trafic, comme les pages d’accueil, les articles récents, les fiches produits ou les formulaires de conversion. Une fois ces pages repérées, vous constaterez souvent des problèmes récurrents. Voici les causes les plus fréquemment identifiées dans les rapports :

• Images sans dimensions fixes : Si une image ne dispose pas d’attributs explicites width et height, le navigateur ne peut pas réserver l’espace nécessaire lors du rendu initial. Cela conduit à un ajustement visuel brutal au moment de l’affichage effectif ;
• Publicités dynamiques : Les plateformes publicitaires insèrent souvent leurs contenus après le chargement initial. Sans conteneur défini à l’avance, ces éléments repoussent les autres composants de la page vers le bas, ce qui perturbe fortement la lisibilité, surtout sur écran réduit ;
• Web fonts et effets FOUT : Le “Flash of Unstyled Text” est un phénomène courant lorsque les polices personnalisées mettent du temps à charger. Le navigateur affiche d’abord le texte avec une police système, puis remplace cette dernière par la police correcte, modifiant la largeur et la hauteur des blocs de texte ;
• Contenus injectés en JavaScript : Les carrousels, les commentaires, les sections “produits associés” ou autres modules dynamiques sont souvent chargés via des scripts, parfois sans transition ni animation. Ce type d’intégration provoque des déplacements soudains dans la structure de la page.

D’autres facteurs peuvent s’ajouter : l’usage de iframes externes (comme des vidéos YouTube ou des intégrations de réseaux sociaux), les boutons flottants mal positionnés, ou encore les animations CSS mal calibrées. Tous ces éléments doivent être considérés comme potentiellement perturbateurs.

Il est important de noter qu’un bon diagnostic CLS ne se limite pas à une lecture automatique des outils. Chaque page problématique doit faire l’objet d’une analyse spécifique, car les causes peuvent varier selon la structure du HTML, les styles CSS appliqués, les scripts tiers utilisés ou encore la stratégie de chargement adoptée (lazy loading, AJAX, etc.). Ce travail d’investigation requiert souvent une collaboration entre développeurs, designers UX et responsables SEO. Voici un exemple de méthode pour organiser cette analyse :

En suivant cette approche méthodique, il est possible non seulement de réduire le score CLS de manière significative, mais aussi d’améliorer la fluidité générale de navigation sur mobile. Ce travail, une fois effectué, bénéficie à la fois à l’utilisateur final et à la visibilité du site dans les résultats de recherche. Il peut également améliorer les taux de conversion, car une interface stable inspire plus de confiance et réduit les erreurs de clics ou d’interaction.

Comment corriger les problèmes de CLS sur mobile

Une fois les pages identifiées, l’optimisation du CLS passe par des actions concrètes, souvent liées au design et à la performance du site mobile. Voici les principales pratiques recommandées :

1. Réserver de l’espace pour les médias

L’un des déclencheurs les plus courants d’un mauvais score CLS est l’arrivée tardive d’éléments visuels (images, vidéos, iframes) qui, lorsqu’ils se chargent, déplacent les autres contenus déjà affichés. Pour éviter cela, il est indispensable de réserver un espace fixe dans la page avant même que ces éléments ne soient téléchargés. Traditionnellement, cela se fait en définissant les attributs width et height directement dans les balises HTML. Cela permet au navigateur de calculer le ratio d’aspect de chaque média et de maintenir la structure de la page stable pendant le chargement. Une méthode plus moderne consiste à utiliser la propriété CSS aspect-ratio, introduite dans la plupart des navigateurs récents. Elle permet de réserver une hauteur proportionnelle à une largeur même sans connaître la taille exacte du média à l’avance.

Par exemple :

<img src="image.jpg" width="800" height="450" alt="Exemple"/>

ou en CSS :

.media-container {
  aspect-ratio: 16 / 9;
}

Cette anticipation visuelle est particulièrement importante sur mobile, où chaque saut de mise en page perturbe fortement l’utilisateur, pouvant l’amener à cliquer sur une mauvaise zone ou interrompre sa lecture.

2. Optimiser le chargement des polices

Les polices personnalisées peuvent représenter un atout esthétique important, mais elles sont aussi une source fréquente d’instabilité visuelle. Lorsqu’une police web met plusieurs centaines de millisecondes à se charger, le navigateur affiche d’abord du texte avec une police de remplacement, puis réapplique la police attendue une fois celle-ci disponible. Ce changement peut modifier l’espacement des lignes ou la largeur des paragraphes, ce qui engendre un décalage observable — c’est ce qu’on appelle le FOUT (Flash of Unstyled Text). Pour remédier à cela, la directive CSS font-display: swap permet d’afficher immédiatement une police de secours tout en laissant la police principale se charger en arrière-plan. Cela réduit considérablement les risques de changement brusque une fois le style final appliqué.

@font-face {
  font-family: 'MaPolice';
  src: url('mapolice.woff2') format('woff2');
  font-display: swap;
}

Il est également conseillé de limiter le nombre de polices importées sur une page, et d’éviter de charger plusieurs variantes inutilisées (gras, italique, etc.). Un chargement de police bien maîtrisé améliore non seulement le CLS, mais aussi le temps de rendu perçu.

3. Stabiliser les éléments dynamiques

Dans de nombreux sites modernes, une partie importante du contenu est ajoutée dynamiquement après le chargement initial. Il peut s’agir de modules de commentaires, d’avis clients, de suggestions personnalisées, de notifications, de widgets sociaux, ou encore de bannières contextuelles. Ces éléments sont souvent injectés via JavaScript, sans préavis ni structure préalable, ce qui provoque des déplacements imprévisibles de la mise en page. La meilleure pratique consiste à réserver dès le départ une zone vide (placeholder) dans le DOM pour accueillir ces contenus. Cela permet au navigateur de conserver la structure de la page et d’afficher l’élément lorsqu’il est prêt, sans perturber les autres blocs.

Par exemple, pour un bandeau promotionnel qui apparaît après 3 secondes :

<div class="promo-placeholder"></div>

<script>
setTimeout(() => {
  document.querySelector('.promo-placeholder').innerHTML = '<div class="promo-banner">Promo !</div>';
}, 3000);
</script>

L’ajout de transitions douces à ces éléments (via opacity ou transform) peut également aider à atténuer leur impact visuel.

4. Réduire les animations brutales

Les transitions visuelles font partie intégrante d’un design moderne, mais lorsqu’elles sont trop rapides ou mal synchronisées, elles peuvent déclencher des déplacements de contenu visibles. C’est le cas, par exemple, d’un accordéon qui s’ouvre instantanément, d’un menu déroulant qui pousse tout le contenu vers le bas ou d’un changement d’état brutal dans un formulaire.

Pour préserver la stabilité visuelle, il est recommandé d’utiliser des animations CSS douces, avec une durée d’au moins 200 à 300 ms. Les effets basés sur opacity et scale sont préférés à ceux qui modifient directement la position (top, margin, etc.), car ils ne provoquent pas de reflow du contenu. Exemple d’animation douce :

.fade-in {
  opacity: 0;
  transition: opacity 300ms ease-in;
}
.fade-in.visible {
  opacity: 1;
}

Une animation maîtrisée améliore non seulement le confort visuel, mais limite aussi le risque d’interactions erronées, notamment sur les appareils tactiles.

5. Prioriser les contenus critiques

La ligne de flottaison, c’est-à-dire la portion de page visible dès l’arrivée sur l’écran sans avoir à scroller, est une zone stratégique. Tout déplacement dans cette zone est perçu de manière immédiate et peut générer de la frustration. Il est donc essentiel que les éléments situés au-dessus de la ligne de flottaison soient chargés rapidement et visuellement stables. Pour cela, il faut éviter d’y placer des composants tiers ou des blocs chargés avec un fort délai. Préchargez les images et polices critiques avec des balises <link rel="preload"> pour qu’elles soient disponibles dès les premières millisecondes. Définissez aussi des dimensions fixes pour tous les éléments principaux visibles au premier affichage.

Le lazy loading (chargement différé) est une bonne pratique, mais il doit être appliqué avec discernement. Évitez de retarder les contenus qui doivent apparaître en premier, et limitez son usage aux éléments situés sous la ligne de flottaison (images dans un article long, produits secondaires, etc.). Enfin, n’oubliez pas qu’un bon design d’interface mobile repose sur la clarté et la stabilité. Chaque intervention sur les blocs visibles dès l’arrivée de l’utilisateur doit être pensée pour réduire l’instabilité et accélérer la compréhension.

Une fois ces optimisations mises en place, il peut alors être utile de les valider à l’aide d’outils de mesure comme PageSpeed Insights ou Lighthouse. Réalisez des audits répétés à différents moments de la journée, sur différentes connexions mobiles (4G, 3G, Wi-Fi) et en simulant plusieurs tailles d’écrans. Cela permet de s’assurer que le score CLS est réellement réduit et que l’expérience utilisateur mobile est améliorée de manière durable.