Depuis le printemps 2021, la page Experience de Google a mis l’expérience utilisateur au centre de l’équation. En effet, l’UX (User Experience) est un critère à prendre en compte dans le classement des résultats de recherche sur Google. Et si son poids reste faible (de la même façon que pour le critère lié au HTTPS), proposer une expérience utilisateur irréprochable est un paramètre à ne pas négliger pour son site internet.
En effet, il est indispensable de ne pas faire fuir ses utilisateurs avant même qu’ils aient démarré leur navigation sur votre site web. Pour cela, le respect du Core Web Vitals de Google doit permettre aux propriétaires de sites de proposer une expérience qualitative. Le Cumulative Layout Shift (CLS) est une des métriques principales du Core Web Vitals et constitue un pilier pour une expérience utilisateur optimale.
Qu’est-ce que le Cumulative Layout Shift (CLS) ?
Le Cumulative Layout Shift (CLS) est une métrique qui mesure la stabilité visuelle d’une page web. En d’autres termes, le CLS mesure à quel point les éléments de la page (comme les images, les boutons, les textes, etc.) se déplacent de manière inattendue pendant que la page se charge ou pendant que l’utilisateur interagit avec elle. Cette métrique est conçue pour aider à comprendre l’expérience de l’utilisateur en termes de déplacements inattendus du contenu de la page.
L’objectif du CLS est de fournir une mesure quantitative qui reflète la qualité de l’expérience utilisateur en matière de stabilité du contenu. Un score de CLS faible indique que la page est stable, avec peu ou pas de déplacement de contenu, ce qui est idéal pour une bonne expérience utilisateur.
À l’inverse, un score de CLS élevé signale que la page a des éléments qui se déplacent de manière inattendue, ce qui peut être frustrant pour les utilisateurs.
Les conséquences d’un mauvais CLS
Démonstration de l’importance du Cumulative Layout Shift par Google : https://web.dev/cls/.
Le déplacement d’éléments peut être perturbateur pour les utilisateurs, entraînant des clics accidentels, des difficultés de lecture, et donc une expérience utilisateur frustrante.
Clics accidentels
L’un des problèmes les plus courants causés par un mauvais CLS est le risque de clics accidentels. Si un utilisateur essaie de cliquer sur un bouton ou un lien, mais que l’élément se déplace au dernier moment, l’utilisateur peut finir par cliquer sur quelque chose qu’il n’avait pas l’intention de sélectionner. Cela peut être particulièrement problématique dans des contextes comme les formulaires en ligne, les boutiques en ligne, les applications web interactives ou même lorsque l’utilisateur cherche à avoir rapidement accès à une information.
Difficultés de lecture
Un mauvais CLS peut également rendre le contenu difficile à lire. Si les éléments de texte se déplacent pendant que l’utilisateur essaie de lire, cela peut interrompre le flux de lecture et rendre l’expérience frustrante. Cela peut être particulièrement gênant pour les utilisateurs qui utilisent des appareils mobiles avec des écrans plus petits.
Frustration et abandon du site
Les déplacements inattendus du contenu peuvent créer une expérience utilisateur frustrante, ce qui peut inciter les utilisateurs à quitter le site. Un taux de rebond élevé et un temps de session réduit sont des indicateurs clés qui démontrent que les utilisateurs ne sont pas satisfaits de leur expérience, ce qui peut également avoir un impact sur le taux de conversion.
Impact sur le SEO
Google a intégré le CLS dans ses Core Web Vitals, qui sont un ensemble de mesures axées sur l’expérience utilisateur. Un mauvais score de CLS peut donc affecter négativement le classement d’un site dans les résultats de recherche, ce qui peut réduire la visibilité et le trafic, même si le poids de ce critère est à relativiser.
Perte de confiance
Une mauvaise expérience utilisateur due à un CLS élevé peut entraîner une perte de confiance envers le site ou l’application. Les utilisateurs sont moins susceptibles de revenir sur un site qui offre une expérience frustrante, ce qui peut avoir des conséquences à long terme sur la réputation et la fidélité à la marque.
Facteurs qui contribuent au CLS
Les facteurs qui contribuent à dégrader ou améliorer la stabilité visuelle d’une page sont nombreux. Le chargement des ressources, le manque d’informations au sujet des médias ou encore des chargements asynchrones peuvent influer sur ce critère.
Images et médias sans dimensions spécifiées
L’un des facteurs les plus courants qui contribuent au CLS est l’absence de dimensions spécifiées pour les images, les vidéos ou d’autres éléments médias. Sans dimensions spécifiées, le navigateur ne sait pas combien d’espace allouer à ces éléments, ce qui peut entraîner un repositionnement lorsque la page se charge.
Contenu Dynamique
L’ajout de contenu dynamique à une page, comme des publicités, des pop-ups ou des bannières, peut également affecter le CLS. Si ces éléments sont insérés dans la page après son chargement initial, ils peuvent déplacer d’autres éléments, ce qui peut entraîner un mauvais CLS.
Polices Web
Le chargement de polices web personnalisées peut également contribuer au CLS, surtout si elles remplacent une police par défaut après le chargement de la page. Cela peut entraîner un « flash » où le texte change de taille ou de style, déplaçant d’autres éléments sur la page.
Actions de l’Utilisateur
Parfois, les actions de l’utilisateur peuvent déclencher des changements de mise en page. Par exemple, en cliquant sur un bouton « Lire la suite », l’utilisateur peut provoquer l’expansion d’une section de contenu, déplaçant ainsi d’autres éléments sur la page.
Scripts Externes
Des scripts externes, comme des widgets de médias sociaux ou des commentaires, peuvent également affecter le CLS. Ces scripts peuvent prendre du temps à charger et à s’exécuter, ce qui peut entraîner des déplacements de contenu.
Styles CSS
Des styles CSS mal optimisés peuvent également contribuer au CLS. Par exemple, l’utilisation de propriétés CSS qui affectent la mise en page globale de la page, comme width, height, margin, et padding, sans prendre en compte leur impact sur la stabilité visuelle, peut entraîner des déplacements de contenu.
Chargement Asynchrone
Le chargement asynchrone de ressources, comme le JavaScript ou le CSS, peut également contribuer au CLS. Si ces ressources affectent la mise en page, leur chargement asynchrone peut entraîner des déplacements de contenu.
Comment mesurer le CLS ?
La mesure du Cumulative Layout Shift (CLS) repose sur une formule mathématique qui prend en compte deux facteurs principaux : l’impact fractionnel (fraction) et la distance fractionnelle. Voici une explication plus détaillée de ces deux composantes et de la manière dont elles sont utilisées pour calculer le CLS.
Impact Fractionnel
L’impact fractionnel mesure comment les éléments instables peuvent impacter la visualisation à partir de deux écran. Source : Google.
L’impact fractionnel mesure la portion de la fenêtre d’affichage (viewport) qui est affectée par le déplacement d’un élément. Il est calculé en divisant la surface de l’élément déplacé par la surface totale de la fenêtre d’affichage.
Exemple :
Si un élément qui occupe 50 % de la fenêtre d’affichage se déplace, son impact fractionnel sera de 0,5 (50 % de la fenêtre d’affichage).
Distance Fractionnelle
La distance fractionnelle désigne la distance du mouvement des éléments instables sur l’écran divisée par la plus large dimension de support de visualisation. Source : Google.
La distance fractionnelle mesure la distance que l’élément se déplace par rapport à la fenêtre d’affichage, exprimée en pourcentage. Elle est calculée en divisant la distance de laquelle l’élément se déplace (en pixels) par la dimension de la fenêtre d’affichage dans la direction du déplacement (également en pixels).
Exemple :
Si un élément se déplace verticalement de 100 pixels et que la hauteur de la fenêtre d’affichage est de 400 pixels, la distance fractionnelle sera de 0,25 (100 pixels / 400 pixels).
Formule de Calcul du CLS
La formule pour calculer le CLS est la suivante :
CLS=Impact fractionnel×Distance fractionnelle
Dans cette formule, l’impact fractionnel et la distance fractionnelle sont multipliés pour obtenir le score de CLS pour un déplacement d’élément unique. Le score de CLS total pour une page est la somme de tous les scores de CLS individuels générés pendant la durée de vie de la page.
Exemple :
Si l’impact fractionnel est de 0,5 et la distance fractionnelle est de 0,25, alors le CLS pour ce déplacement particulier serait de 0,5×0,25=0,1250,5×0,25=0,125.
En comprenant ces composantes et en utilisant la formule, les développeurs peuvent mesurer avec précision le CLS, ce qui est crucial pour optimiser l’expérience utilisateur en termes de stabilité visuelle.
Utiliser des outils pour auditer sa page web
Google met plusieurs outils à disposition des propriétaires de sites web pour mesurer son Cumulative Layout Shift rapidement et facilement. Parmi les outils principaux, nous retrouvons :
Google Lighthouse
Google Lighthouse est un outil d’audit automatisé pour les sites web qui fournit des informations sur la performance, l’accessibilité, les meilleures pratiques et d’autres aspects du site web. Il inclut le CLS parmi ses mesures de performance et offre des conseils sur la façon de l’améliorer. Pour y accéder, il suffit d’accéder à l’URL que vous souhaitez évaluer via Google Chrome, effectuer un clic droit, puis cliquer sur « Inspecter ». Sélectionnez ensuite l’onglet « Lighthouse » de la fenêtre contextuelle qui apparaît, puis cliquez sur « Analyze page load » (analyser le chargement de la page »).
Google Search Console
La Google Search Console offre un rapport sur les « Web Vitals » qui inclut le CLS parmi d’autres mesures clés de l’expérience utilisateur. Ce rapport est particulièrement utile pour identifier les pages qui nécessitent une attention en termes de performance et d’expérience utilisateur.
GTmetrix
GTmetrix est un outil en ligne qui analyse la performance de votre site web et fournit des recommandations pour l’améliorer. Il inclut également le CLS dans son ensemble de mesures et offre des conseils sur la façon de résoudre les problèmes qui pourraient contribuer à un mauvais CLS.
PageSpeed Insights
PageSpeed Insights est un outil de Google qui fournit des informations sur la performance d’une page web pour les appareils mobiles et les ordinateurs de bureau. Il utilise les données de Lighthouse et de Chrome User Experience Report pour fournir un score de CLS.
Les stratégies pour améliorer le CLS
Si votre site web propose une expérience utilisateur dégradée et particulièrement en matière de Cumulative Layout Shift (instabilité visuelle de la page), alors il est essentiel de prendre des mesures pour remédier à cela. L’optimisation du CLS prend en compte de nombreux critères, voici comment proposer une interface stable pour vos utilisateurs.
Améliorer le Cumulative Layout Shift (CLS) est essentiel pour offrir une meilleure expérience utilisateur. Voici quelques stratégies qui peuvent vous aider à optimiser cette métrique :
Spécifier les dimensions des éléments médias
Assurez-vous de spécifier les dimensions (hauteur et largeur) pour les images, vidéos, et autres éléments médias. Cela permet au navigateur de réserver l’espace nécessaire pour ces éléments, réduisant ainsi les déplacements inattendus pendant le chargement de la page.
Utiliser le « Lazy Loading » avec précaution
Le « Lazy Loading » permet de charger les images et autres éléments médias uniquement lorsqu’ils sont sur le point d’être affichés à l’écran. Bien que cela puisse améliorer le temps de chargement de la page, il est important de réserver l’espace nécessaire pour ces éléments afin d’éviter les déplacements de contenu.
Éviter les contenus dynamiques (publicités) qui déplacent les éléments existantes
Si votre site utilise des publicités, des pop-ups, ou d’autres éléments dynamiques, assurez-vous qu’ils ne déplacent pas les éléments existants sur la page. Vous pouvez réserver un espace pour ces éléments ou les placer dans des zones qui n’affectent pas la mise en page globale.
Optimiser le chargement des polices web
Utilisez des paramètres CSS comme font-display: optional ou font-display: swap pour contrôler le comportement de chargement des polices web. Cela peut minimiser l’effet de « flash » où le texte change de taille ou de style, ce qui peut contribuer au CLS.
Charger les scripts asynchrones après le chargement de la page
Si vous utilisez des scripts externes qui ajoutent du contenu à la page, essayez de les charger de manière asynchrone ou de les différer jusqu’à ce que la page principale soit complètement chargée. Placez vos scripts le plus bas possible dans le code de votre page.
Si vous utilisez des transitions animées pour les changements de mise en page
Si votre site utilise des animations ou des transitions pour révéler du contenu supplémentaire (comme un menu déroulant), assurez-vous que ces animations sont fluides et ne causent pas de déplacements soudains qui pourraient affecter le CLS.
Tester, mesurer, et itérer
Utilisez des outils d’analyse de performance pour mesurer régulièrement le CLS. Prenez des mesures correctives en fonction des résultats et continuez à tester pour vous assurer que les changements ont l’effet désiré.
Éduquer l’équipe de développement
Assurez-vous que toute votre équipe de développement est consciente de l’importance du CLS et des meilleures pratiques pour l’optimiser. Une compréhension partagée peut aider à intégrer l’optimisation du CLS dans le processus de développement.
Garantir une expérience utilisateur optimale pour préserver vos performances web
Le Cumulative Layout Shift (CLS) est une métrique de performance web cruciale qui mesure la stabilité visuelle d’une page. Un mauvais CLS peut avoir des conséquences sérieuses, allant de clics accidentels et de difficultés de lecture à une expérience utilisateur frustrante. Ces problèmes peuvent à leur tour affecter négativement le taux de conversion, le classement dans les résultats de recherche, et la fidélité des utilisateurs à votre site.
Il existe plusieurs facteurs qui peuvent contribuer à un mauvais CLS, y compris des images sans dimensions, du contenu dynamique comme des publicités, et des polices web mal optimisées. Heureusement, il existe également une variété d’outils pour mesurer le CLS, y compris Google Lighthouse, PageSpeed Insights ou la Google Search Console, qui peuvent vous aider à identifier les domaines nécessitant une amélioration.
Pour optimiser le CLS, des stratégies telles que la spécification des dimensions des éléments médias, l’utilisation prudente du « Lazy Loading », et l’optimisation du chargement des polices web peuvent être extrêmement efficaces. Il est également important de tester régulièrement les performances de votre site et d’ajuster vos stratégies en conséquence.
En somme, le CLS est une métrique qui ne doit pas être négligée. En accordant l’attention nécessaire à l’optimisation de cette métrique, les développeurs et les designers peuvent non seulement améliorer l’expérience utilisateur mais aussi augmenter la compétitivité globale de leur site web dans un environnement en ligne de plus en plus exigeant.
