Cumulative Layout Shift (CLS) : qu'est-ce que c'est et comment optimiser votre site Web pour cela

Imaginez ceci : vous chargez un site Web et il semble prêt à fonctionner. Vous cliquez sur l'image d'un blog pour lire l'article, et soudain toute la page change parce que quelque chose d'autre vient de se charger. Et vous cliquez sur quelque chose de complètement différent et chargez une page que vous n'aviez jamais prévue. Si vous avez vous-même rencontré ce problème, vous savez à quel point le Cumulative Layout Shift (CLS) peut avoir un impact négatif sur l'expérience utilisateur (UX) d'un site.

Le décalage de mise en page cumulatif est le terme qui désigne le décalage de mise en page d'une page pendant son chargement, et dans cet article, nous allons approfondir un peu ce que cela signifie. Nous vous montrerons comment mesurer le CLS et expliquerons ce qu'est un bon score. Ensuite, nous discuterons de la façon d'optimiser le score CLS de votre site Web. Mettons-nous au travail!

Abonnez-vous à notre chaîne Youtube

Qu'est-ce que le décalage de mise en page cumulatif (CLS) ?

Il n'y a pas de meilleur moyen d'illustrer ce que représente un score CLS élevé (c'est-à-dire tout ce qui est supérieur à 0,10 d'après PageSpeed ​​Insights de Google) qu'avec un exemple visuel. Voici un site Web avec une mise en page qui ne cesse de changer au fur et à mesure que la page se charge. Notez que nous ne faisons pas du tout de défilement lors de la capture. Notre fenêtre d'affichage reste la même, mais la page change d'elle-même de façon drastique :

En tant qu'utilisateur visitant ce site Web, vous ne savez peut-être pas quand le chargement est réellement terminé. Vous pouvez essayer de cliquer sur une actualité, uniquement pour que la mise en page change radicalement. En conséquence, vous vous retrouvez sur la mauvaise page et vous devez perdre du temps à revenir en arrière. Selon la page, cela peut se produire plusieurs fois. Si c'est le cas, il y a de fortes chances que vous partiez.

Et vos utilisateurs aussi.

Plus un site Web est complexe, plus il est susceptible d'avoir un score CLS élevé. Avec des mises en page simples telles que l'emblématique page d'accueil de Google, il n'y a pas de CLS car ils incluent si peu d'éléments :

Cela ne veut pas dire que tous les sites Web complexes ont des scores CLS élevés. Considérez Amazon, par exemple. Personne ne dirait que le géant du commerce électronique utilise une conception Web simple. Pourtant, il y a peu ou pas de changement de mise en page à voir en parcourant son catalogue.

Les changements de mise en page se produisent parce que les navigateurs ont tendance à charger les éléments de page de manière asynchrone. Plus important encore, il peut y avoir des éléments multimédias sur votre page avec des dimensions initialement inconnues. Cette combinaison signifie que le navigateur ne sait pas combien d'espace les éléments individuels prendront jusqu'à ce qu'ils aient fini de se charger. D'où le changement radical de mise en page.

CLS est intéressant dans la mesure où il peut être mesuré objectivement à l'aide de divers outils, mais il est également centré sur l'utilisateur dans la mesure où l'appareil de chaque utilisateur peut affecter la façon dont la mise en page de votre site peut changer. Bien que vous ne puissiez pas contrôler cet aspect, vous pouvez certainement prendre des précautions pour qu'il ait le moins d'impact possible.

CLS est l'un des trois éléments essentiels du Web que Google mesure pour l'aider à déterminer si votre site Web offre une solide expérience utilisateur (UX). Les autres éléments essentiels du Web sont le délai de première entrée (FID) et le plus grand contenu de peinture (LCP), qui valent également tout effort d'optimisation.

Comment mesurer le CLS

Déterminer si votre site Web présente des changements de mise en page marqués est relativement simple. Tout d'abord, nous vous recommandons d'essayer d'accéder à votre site Web à partir de divers appareils et de demander aux autres de faire de même. Comme vous le faites, vous pouvez observer si la mise en page reste cohérente pendant le chargement des pages.

Ce que vous constaterez probablement, c'est que l'expérience CLS peut varier considérablement. Cela dépend non seulement de l'optimisation de votre site Web, mais aussi de l'appareil que vous utilisez. Dans cet esprit, le meilleur outil pour mesurer le CLS de votre site Web est PageSpeed ​​Insights. Cela est directement lié au Core Web Vitals de Google afin que vous puissiez voir directement comment votre score CLS affecte la façon dont Google voit votre site.

Ce service vous permet de saisir une URL et de recevoir un score de performance global basé sur les 28 derniers jours de données collectées par Google. Ce score prend en compte plusieurs métriques, notamment CLS, FCP et LCP.

Pour ce test, nous avons choisi un site Web sans CLS discernable. PageSpeed ​​Insights a confirmé nos soupçons, car il a renvoyé des résultats extrêmement positifs avec un score CLS solide.

Notez que PageSpeed ​​Insights propose une répartition en pourcentage pour chaque score. Dans ce cas, 91 % des utilisateurs n'ont subi aucun changement de mise en page lors du chargement du site Web de test. Cependant, les visiteurs restants ont subi un certain changement de mise en page.

C'est à prévoir en ce qui concerne CLS et le reste des Core Web Vitals. L'expérience de l'utilisateur variera considérablement en fonction de l'appareil à partir duquel il visite, de sa connexion Internet et de nombreux autres facteurs. Il n'y a pratiquement aucun moyen de tenir compte du fait qu'aucun utilisateur n'a jamais expérimenté CLS, mais vous pouvez certainement prendre des précautions pour l'optimiser afin que ce pourcentage soit aussi bas que possible.

En plus des données de terrain, PageSpeed ​​Insights propose également ce qu'il appelle des données de laboratoire . Ce sont des scores de performance basés sur un seul test, au lieu de données collectées sur une longue période de temps (qui sont considérées comme des données de terrain ).

Lors de notre test, nous avons reçu un score CLS de zéro, ce qui signifie qu'il n'y a eu aucun changement de mise en page. Pour ce test en particulier. Comparons maintenant cela avec un autre site Web qui n'a pas obtenu un score CLS aussi élevé.

Pour répondre aux normes de Google, votre score CLS doit être inférieur à 0,10. Tout ce qui dépasse cela signifie qu'il y a des changements importants et notables dans la mise en page, ce qui conduit à une mauvaise expérience utilisateur.

Comment identifier les causes des changements de mise en page

Si vous souhaitez identifier les éléments qui provoquent des changements de mise en page sur votre site Web, vous pouvez le faire à l'aide des outils de développement Chrome. Si vous ouvrez les outils (CTRL-MAJ-I) et accédez à l'onglet Performances , vous pourrez enregistrer des tests de performances pendant que vous naviguez sur le Web.

Une fois l'enregistrement arrêté, Chrome Dev Tools renvoie une chronologie indiquant les temps de chargement, les demandes individuelles et les éléments essentiels du Web. À partir de cette chronologie, vous pouvez sélectionner des événements de décalage de mise en page individuels qui sont répertoriés sous Expérience . De cette façon, vous pouvez voir à quels éléments ils correspondent.

Une fois que vous savez quels éléments sont à l'origine des changements de mise en page, vous pouvez prendre des mesures pour résoudre le problème. Nous en parlerons dans la section suivante.

Si vous souhaitez surveiller le Core Web Vitals de votre site Web, nous vous recommandons de configurer un compte Google Search Console. Vous serez en mesure de surveiller les métriques de performances et Core Web Vitals à partir de la Search Console, ce qui est une aubaine en matière d'optimisation pour les moteurs de recherche (SEO). Nous pensons qu'il est dans votre intérêt de surveiller régulièrement la Search Console, mais cela ne fait jamais de mal d'avoir une métrique spécifique que vous suivez.

Comment optimiser votre score CLS

En gros, il y a deux gros coupables en ce qui concerne les scores CLS élevés : les fichiers multimédias et les publicités. Par exemple, si vous téléchargez un fichier image avec une résolution massive mais que vous ne spécifiez pas sa hauteur et sa largeur, cela risque de casser la mise en page de votre page.

En termes de performances du site Web, il est préférable d'utiliser des images qui ont déjà les dimensions précises que vous afficherez. De cette façon, le navigateur n'a pas à dépenser de la puissance de traitement (et du temps) pour les redimensionner de manière appropriée. Cependant, ce n'est pas toujours possible. Lorsque ce n'est pas le cas, vous devez définir les attributs de largeur et de hauteur pour chaque image que vous affichez. De cette façon, le navigateur de l'utilisateur saura précisément où se situe l'image et n'aura pas besoin de modifier la mise en page à la dernière seconde possible.

Voici à quoi ressemblent ces attributs en HTML :

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

Si vous utilisez WordPress, certains plugins d'optimisation d'image peuvent redimensionner automatiquement les fichiers au fur et à mesure que vous les téléchargez, ce qui se charge de définir les attributs de largeur et de hauteur nécessaires.

En ce qui concerne les images réactives, vous pouvez compter sur CSS au lieu de déclarer manuellement la largeur et la hauteur. CSS vous permet d'utiliser l'attribut max-width pour indiquer aux navigateurs quel pourcentage de la fenêtre d'affichage l'image doit occuper :

img {
max-width: 90vw;
height: auto;
}

Dans cet exemple, nous demandons au navigateur de mettre l'image à l'échelle afin qu'elle occupe 90 % de la fenêtre d'affichage de l'utilisateur. Dans le même temps, nous définissons l'attribut height sur auto , afin que le navigateur calcule la hauteur idéale en fonction de la nouvelle largeur de l'image et de son rapport hauteur/largeur.

Les mêmes principes fondamentaux s'appliquent aux publicités qu'aux images. En règle générale, vous travaillerez avec des iframes, et parfois les réseaux publicitaires utiliseront des éléments de taille dynamique. Cela peut faire des ravages dans la mise en page de vos pages.

Au lieu de laisser les réseaux publicitaires décider de la taille des annonces sur votre site Web, vous pouvez leur réserver des zones. Cela signifie déclarer les attributs de largeur et de hauteur pour les zones publicitaires et définir des solutions de secours au cas où elles ne se chargeraient pas, afin que l'espace vide ne provoque pas de changement de mise en page.

Vous pouvez utiliser le même type de CSS et de style en ligne pour tout conteneur d'annonces de votre choix, en le maintenant verrouillé en position quelles que soient les annonces diffusées.

Foire aux questions sur le changement de disposition cumulatif (CLS)

CLS peut être un peu plus compliqué à saisir que les métriques LCP et FCP. Dans cet esprit, passons en revue certaines questions courantes que les utilisateurs se posent à propos de CLS, pour nous assurer que vous ne manquez aucune information clé.

Comment CLS affecte-t-il les performances de mon site Web ?

En théorie, vous pouvez avoir un site Web très rapide qui obtient toujours un score CLS relativement faible. Comme pour les autres Core Web Vitals, les scores CLS peuvent ne pas être directement corrélés aux performances globales du site. Votre site est peut-être très rapide, mais au fur et à mesure qu'il se charge, il se déploie comme un accordéon. Même dans ce cas, les grands changements de mise en page ont certainement un impact négatif sur l'UX du site. Google considère cela extrêmement important. C'est pourquoi Google pondère si fortement ce point de données.

Le CLS est-il moins important que les scores FCP ou LCP ?

De nombreux utilisateurs accordent plus d'attention aux scores FCP et LCP qu'à CLS. C'est parce que ces deux mesures sont plus faciles à corréler avec les performances du site Web. Même si FCP est également une métrique centrée sur l'utilisateur, CLS est plus difficile à évaluer de manière cohérente sur un grand nombre d'utilisateurs.

Les trois métriques constituent les Google Core Web Vitals. Cela signifie que si vous ignorez l'un d'entre eux, vous courez le risque de vous placer plus bas dans les résultats de recherche pertinents. S'assurer que votre site est optimisé pour un faible CLS n'a généralement qu'un impact positif sur les performances du site, comme le LCP et le FCP. Si la plus grande peinture de contenu est poussée vers le bas de l'écran dès que l'utilisateur la voit, à quel point ce temps de chargement rapide est-il utile ?

Qu'est-ce qu'un bon score CLS ?

En chiffres, Google considère que tout ce qui est inférieur à 0,10 est un bon score CLS. Cependant, si vous prenez les mesures appropriées, obtenir un score CLS de 0 n'est pas hors de question, et c'est relativement ordinaire parmi les sites Web bien optimisés. Gardez à l'esprit, cependant, que même les sites qui obtiennent régulièrement un score de 0 peuvent avoir un faible pourcentage d'utilisateurs qui subissent des changements. C'est hors de votre contrôle, et tout ce que vous pouvez faire est de tenir compte du fait que la plupart de vos utilisateurs ont 0 CLS.

Conclusion

Il y a beaucoup de facteurs qui entrent en ligne de compte pour offrir une UX forte sur votre site Web. Idéalement, il devrait se charger rapidement. Il devrait être facile d'interagir avec. Cela ne devrait pas changer la position de la mise en page à mesure que les éléments apparaissent. Des changements de mise en page drastiques entraînent de la frustration et des erreurs de clic. Ceux-ci conduisent à un taux de rebond plus élevé. Ce qui n'est bon pour aucun site Web.

CLS est l'un des éléments essentiels du Web que Google utilise pour mesurer l'expérience utilisateur globale de votre site. Et les utilisateurs sont la seule raison pour laquelle vous avez un site Web en premier lieu. Leur expérience est la priorité 1. Un score CLS faible (inférieur à 0,10) signifie que votre site Web doit se charger de manière fluide et que chaque aspect de sa mise en page apparaîtra au bon endroit dès le départ.

Vous avez des questions sur CLS ou comment réduire les vôtres ? Parlons-en dans la section commentaires ci-dessous!

Image en vedette via Older Brother / shutterstock.com