Le décalage cumulatif de la mise en page : qu’est-ce que c’est et comment optimiser la métrique ?
C'est une expérience pour le moins frustrante : nous commençons à lire un contenu en ligne quand, tout à coup, la page saute des centaines ou des milliers de pixels et nous fait complètement rater le point où nous étions, ou peut-être essayons-nous de taper sur un bouton et qu'une fenêtre contextuelle apparaît à sa place, sur laquelle nous appuyons involontairement, nous amenant à une page non désirée d'où nous essayons désespérément de revenir. Il ne s'agit pas d'une coïncidence si Google a inclus le Cumulative Layout Shift (décalage cumulatif de la mise en page) parmi les mesures des Core Web Vitals, et nous guide maintenant pour mesurer et optimiser cette mesure afin d'améliorer l'utilisation de nos pages.
Qu’est-ce que le CLS, Cumulative Layout Shift ?
Le Cumulative Layout Shift (CLS) est une métrique de Google qui mesure la stabilité visuelle à travers l'analyse d'un événement de l'expérience utilisateur, ou le déplacement inattendu des éléments de la page web alors que celle-ci est encore en cours de chargement.
C'est l'une des trois Core Web Vitals qui sera un facteur de classement sur Google à partir de 2021, comme annoncé début juin : c'est donc un élément avec lequel il faut composer pour avoir un site performant et assurer une expérience utilisateur positive, en se conformant aux indications et souhaits du moteur de recherche, puisqu'il fait également partie des signaux de classement évalués dans le cadre de l'Expérience de la page.
Contrairement aux deux autres Core Web Vitals - Largest Contentful Paint et First Input Delay - son unité de référence n'est pas le temps, mais l'espace, et Google a créé un score spécifique pour identifier le niveau des variations de mise en page pendant le chargement de la page, qui peuvent compromettre l'expérience de l'utilisateur.
Les problèmes liés aux variations de mise en page
Le CLS se produit lorsque le contenu de la page se déplace sans que l'utilisateur ne l'ait volontairement demandé ou n'en ait été informé au préalable : les éléments de la page qui ont tendance à provoquer des variations sont les caractères, les images, les vidéos, les formulaires de contact, les boutons et d'autres types de contenu.
Dans le cas le plus courant, l'utilisateur qui visite la page est prêt à cliquer sur un élément, mais entre-temps le chargement modifie la position et conduit la personne à "se tromper" et à cliquer sur quelque chose d'autre, souvent même sur une publicité ou une fenêtre contextuelle.
Cumulative Layout Shift ou CLS : que signifie cette mesure ?
L'analyse approfondie est une fois de plus réalisée par Patrick Kettner, Developer Advocate de Google, qui a diffusé sur YouTube une série consacrée spécifiquement aux techniques d'optimisation de Core Web Vitals.
En ce qui concerne CLS, Patrick Kettner explique que ce paramètre nous aide à comprendre le degré de stabilité d'une page ou, plus précisément, le degré de prévisibilité de l'utilisation d'une page.
Toutes les parties visibles d'une page et la manière dont elles s'intègrent, explique M. Kettner, constituent ce qu'un navigateur considère comme une mise en page - images, texte, vidéos, tout. Lorsque le contenu d'une page change, par exemple lorsqu'une publicité est insérée, qu'un widget est chargé ou que la taille d'une image est modifiée, il arrive que des éléments déjà visibles sur la page soient déplacés ailleurs pour que tout s'emboîte, et "chaque fois que cela se produit, il y a une modification de la mise en page".
Le décalage cumulatif de la mise en page est donc un moyen de déterminer quelle proportion des parties visibles d'une page, en pourcentage, subit ces variations de mise en page.
Exemples de CLS et cas les plus problématiques
Pour mieux comprendre ce qu'est le décalage cumulatif de la mise en page (CLS) - et à quel point il peut être gênant - il suffit de regarder cette courte vidéo explicative de Google.
Comme vous le voyez, l'utilisateur veut cliquer sur le bouton pour modifier l'ordre, mais l'apparition soudaine et inattendue d'une fenêtre contextuelle modifie la présentation de la page et déplace les éléments plus bas que la position précédente. Ainsi, le clic qui aurait dû se trouver sur le "non" atterrit en fait sur la confirmation du panier, ce qui provoque une frustration (et probablement aussi pas mal de nuisances et d'irritations).
Un autre type de problème peut survenir lors de la lecture d'un article : au lieu de permettre la réalisation de l'opération sans interruption, le texte ou d'autres éléments changent et l'utilisateur perd la référence visuelle de sa lecture, devant secouer la page pour retrouver le paragraphe qu'il était en train de lire.
Dans la vidéo, le Googler donne également l'exemple d'un simple article de blog, qui affiche sur la page un titre, une image principale et du texte. Pour les utilisateurs qui naviguent à partir d'une connexion plus lente, le texte apparaît immédiatement, mais l'image met un peu plus de temps à apparaître, même si elle finit par être téléchargée et ouverte.
Exemples de modification de la mise en page
Cependant, avant que les pixels de ces images puissent être peints, quelques changements peuvent être nécessaires.
En ce qui concerne le navigateur, tout ce qui se trouve au-dessus de l'image est en place et il n'est pas nécessaire de changer quoi que ce soit, mais pour que l'image apparaisse à l'endroit et de la manière dont elle a été conçue, tout ce qui se trouve en dessous doit être déplacé vers le bas pour lui faire de la place.
L’importance du décalage cumulatif de la mise en page pour le référencement et l’UX
"La plupart du temps, ce type d'expérience est simplement ennuyeux, mais dans certains cas, il peut causer de réels dommages", écrivent Philip Walton et Milica Mihajlija sur web.dev, ajoutant qu'"un CLS faible aide à garantir que la page est agréable" pour les utilisateurs.
Il est donc important de minimiser ce paramètre, car le déplacement des pages peut entraîner une mauvaise expérience pour l'utilisateur, et le problème est encore plus important sur les appareils mobiles, car les écrans des smartphones sont plus petits et l'impact des variations est plus intense.
Un mauvais score CLS indique des problèmes de codage qui peuvent être résolus.
Causes du CLS
Selon les Googlers, il y a cinq raisons pour lesquelles une variation cumulative de la mise en page se produit :
- Images ou vidéos dont la taille est inconnue ou qui ne sont pas réglées correctement.
- Annonces, embeds et iframes sans dimensions.
- Contenu injecté
- Polices Web qui provoquent un FOIT / FOUT
- Actions qui attendent une réponse du réseau avant de mettre à jour le DOM
Ainsi, des décalages inattendus peuvent se produire "parce que des ressources sont chargées de manière asynchrone ou que des éléments DOM sont ajoutés dynamiquement à la page au-dessus du contenu existant", mais ils peuvent aussi être responsables "d'une image ou d'une vidéo de taille inconnue, d'un caractère qui devient plus grand ou plus petit que son repli ou d'une publicité ou d'un widget tiers qui se redimensionne dynamiquement".
Ce qui rend ces facteurs encore plus problématiques, c'est que le fonctionnement d'un site en développement est "souvent très différent de la façon dont les utilisateurs l'expérimentent" : par exemple, le contenu personnalisé ou tiers peut ne pas se comporter de la même façon en développement qu'en production, les images de test sont généralement déjà dans le cache du navigateur du développeur et les appels d'API qui sont exécutés localement sont parfois si rapides que le retard n'est pas flagrant.
Décalage cumulatif de la mise en page d’une page, conseils de Google
En conséquence, le texte de l'article est littéralement mis en bas par rapport à la quantité visible de la page pour faire de la place à l'image : Cela signifie que 50 % de ce qui peut être vu immédiatement doit être affiché uniquement parce que l'image apparaît, et donc que le CLS est de 0,5 - mais seulement si personne d'autre ne s'affiche sur la page ou si l'utilisateur accède à la page avant que quelqu'un d'autre ne modifie la mise en page, car le CLS est alors plus petit.
En revanche, le score CLS d'une page indique dans quelle mesure les parties visibles de cette dernière ont été modifiées, mais Kettner précise qu'il y a quelques précautions et aspects à ne pas négliger.
Il ne peut y avoir qu’un seul score CLS
Chaque fois qu'une personne visite le site, le navigateur suit en permanence le CLS pendant toute la durée de l'utilisation et, lorsque l'utilisateur quitte la page ou ferme l'onglet, il indique la valeur CLS la plus élevée trouvée. Ce chiffre unique est associé à celui de tous les autres visiteurs de cette URL et génère la valeur CLS pour la page Web vitale de cette page.
Le changement est parfois positif
"Si les pages ne changeaient jamais, elles ne seraient pas si utiles", explique M. Kettner : certaines modifications de la mise en page déclenchées par les interactions de l'utilisateur (toucher, cliquer ou taper) bénéficient d'un délai de grâce de 500 millisecondes pour effectuer toute modification de la mise en page nécessaire afin de répondre au mieux aux besoins de l'utilisateur. Après ces 500 millisecondes, une nouvelle fenêtre de session CLS commence : à partir de la 501e milliseconde, tout changement de contenu qui se produit est ajouté et potentiellement utilisé pour un score CLS final, et cette fenêtre de session restera ouverte tant qu'il y aura des mises en page visibles qui sont déplacées.
Représentation de la fenêtre de grâce
Tout mouvement supplémentaire est additionné : par exemple, une autre page de notre site a une présentation de base, avec un titre et un corps de texte, mais cette fois-ci, elle contient deux images plus petites qui, comme dans le cas précédent, sont lentes à charger et déplacent le contenu lorsqu'elles apparaissent. La première photo ne déplace la mise en page que d'une petite quantité, de 5 %, et son CLS serait alors de 0,05, mais la seconde image est chargée plusieurs centaines de millisecondes plus tard et a besoin d'espace, poussant le contenu encore plus bas, pour une quantité visible de 2,5 %. Ces deux événements ont lieu à des moments rapprochés et les variations sont donc accumulées dans une seule valeur CLS, qui est de 7,5 % ou 0,075.
La fenêtre de session reste en fait ouverte jusqu'à ce que plus d'une seconde se soit écoulée depuis le dernier changement de disposition, ou jusqu'à ce que cinq secondes se soient écoulées depuis la création de cette fenêtre de session : tout changement de disposition ultérieur est compté comme un événement distinct et n'est pas ajouté à la fenêtre précédente.
Toutes les interactions ne sont pas gratuites
Les interactions de l'utilisateur telles que le défilement ou le mouvement de la souris ne sont pas considérées comme des événements ouvrant le délai de grâce de 500 millisecondes, car en fait "un utilisateur ne peut pas s'attendre à ce que la présentation d'une page bouge pendant qu'il la fait défiler".
Tous les changements ne sont pas négatifs
Il est possible de déplacer librement le contenu de la page par le biais d'animations et de transformations CSS.
Effet de l'attribut transform en CSS
En définissant un attribut CSS comme transform, l'élément est déplacé vers une couche spécifique et sa position n'affecte pas la mise en page d'une autre partie de la page, mais "c'est comme s'il flottait au-dessus de tout le reste" et n'est pas pris en compte dans le CLS.
Ce que nous ne voyons pas ne peut pas nous nuire
Les NPC ne s'appliquent qu'aux éléments visibles de la page et, pour cette mesure, "il importe peu que quelque chose bouge que l'on ne peut pas voir". Dans le respect de la philosophie de l'expérience de la page, le CLS sert à garantir aux utilisateurs la meilleure expérience possible : nous pouvons donc déplacer un élément ou mettre un contenu en chargement paresseux "s'il n'est pas visible pour l'utilisateur" et sans influencer le CLS.
Ce que mesure le CLS
La métrique CLS "mesure la somme totale de tous les scores des changements de mise en page individuels pour chaque changement de mise en page inattendu qui se produit pendant toute la durée de la page" : un changement de mise en page se produit chaque fois qu'un élément visible change de position d'une image à l'autre.
Pour offrir une bonne expérience à l'utilisateur, les sites devraient essayer d'avoir un score CLS inférieur à 0,1 et "pour être sûr d'atteindre cet objectif pour la plupart de vos utilisateurs, un bon seuil à mesurer est le 75e percentile des chargements de page, segmenté sur les appareils mobiles et de bureau".
Les variations de mise en page sont définies par l'API Layout Instability, qui signale les entrées de changement de mise en page chaque fois qu'un élément visible avec la fenêtre de visualisation change sa position initiale entre deux images ; ces éléments sont considérés comme instables.
Comment Google calcule-t-il le score de variation cumulative de la mise en page ?
Pour calculer le score de variation de la mise en page, le navigateur examine la taille de la fenêtre et le mouvement des éléments instables dans la fenêtre entre deux images rendues.
Concrètement, le score CLS est le produit de deux mesures de ce mouvement : la fraction d'impact et la fraction de distance, traduites par fraction d'impact et fraction de distance, qui prennent en compte le pourcentage de l'écran du navigateur affecté par les modifications de la mise en page.
Qu'est-ce que la fraction d'impact ?
Le premier paramètre mesure l'impact des éléments instables sur la zone de la fenêtre entre deux cadres et prend ensuite en compte la zone de l'écran du navigateur affectée par les modifications de la mise en page.
La fraction d'impact pour le cadre actuel est donnée par la fusion des zones visibles de tous les éléments instables pour le cadre précédent et pour le cadre actuel, en tant que portion de la zone totale de la fenêtre.
La fracture d'impact
L'image permet de mieux comprendre : un élément occupe la moitié de la fenêtre dans un cadre ; dans le cadre suivant, l'élément descend de 25 % de la hauteur de la fenêtre. Le rectangle rouge et pointillé indique l'union de la zone visible de l'élément dans les deux cadres qui, dans ce cas, représente 75 % de la vue totale, de sorte que sa fraction d'impact est de 0,75.
Nous pouvons dire que la fraction d'impact mesure l'espace total que l'élément d'une fenêtre a occupé, depuis sa position dans la vue lorsqu'il est affiché pour la première fois jusqu'à la position finale, à la fin du rendu de la page.
Qu'est-ce que la fraction de distance ?
L'autre partie de l'équation de notation de CLS mesure la distance verticale et/ou horizontale que les éléments instables ont parcourue par rapport à la fenêtre ; elle est calculée en divisant la plus longue distance parcourue par un élément instable déplacé dans la boîte par la plus grande taille de la fenêtre (largeur ou hauteur).
Là encore, l'exemple visuel permet de mieux comprendre la valeur : la plus grande taille de la fenêtre est la hauteur et l'élément instable s'est déplacé de 25 % de la hauteur de la fenêtre, ce qui fait que la fraction de distance est de 0,25.
Initialement, le CLS ne prenait en compte que la fraction d'impact, mais Google a ensuite décidé d'introduire ce deuxième facteur pour éviter de pénaliser excessivement les cas dans lesquels de grands éléments se déplacent d'une petite portion.
Le score définitif du CLS
Dans l'exemple donné, le score global de variation de la mise en page est donc de 0,75 * 0,25 = 0,1875, obtenu en multipliant le nombre de fractions d'impact (0,75) et celui de la fraction de distance (0,25). Comme indiqué, pour Google, un score CLS est considéré comme bon lorsqu'il est inférieur à 0,1.
Les scores CLS : comment les mesurer et quelles sont les bonnes valeurs
Il y a une chose essentielle à retenir : un bon score CLS signifie que ce que l'utilisateur voit est stable et prévisible et qu'il ne saute pas partout.
D'un point de vue pratique, le CLS est représenté par un chiffre entre 0 et 1, le 0 représentant le score parfait "dans un monde idéal" car, pour le Googler, "il n'y a presque jamais besoin d'un changement d'agencement et nous pouvons presque toujours les prévenir" ; cependant, dans la réalité, "nous avons tous un travail et nos sites sont confrontés à des tonnes de préoccupations différentes".
Indication d’un bon score CLS
Ainsi, s'il est presque impossible d'atteindre 0, "un très bon chiffre sur lequel parier est 75% ou plus des vues sur une page qui a un CLS de 0,1 ou moins", dit Kettner. Si nous parvenons à rester en dessous de ce seuil, les pages offrent une expérience visuelle stable, tandis que si nous dépassons ces valeurs, il existe des méthodes pour améliorer la situation et réduire le CLS.
Les variations de mise en page et leur impact sur l'expérience de l'utilisateur
L'analyse approfondie de wev.dev montre avec d'autres exemples que l'ajout de contenu à un élément existant affecte le score de la variation de la mise en page.
Exemples de variantes de mise en page
Dans ce cas, le bouton "Cliquez-moi !" est ajouté au bas de la boîte grise avec du texte noir, ce qui pousse la boîte verte avec du texte blanc vers le bas (et partiellement hors de la boîte de visualisation).
Même si la taille de la boîte grise change, sa position initiale ne change pas et elle n'est donc pas considérée comme un élément instable. D'autre part, le bouton ne se trouvait pas auparavant dans le DOM et ne change donc même pas sa position initiale.
C'est la position initiale de la boîte verte qui change : comme elle a été partiellement déplacée hors de la fenêtre de visualisation, la zone invisible n'est pas prise en compte dans le calcul de la fraction d'impact. Cela signifie que la réunion des zones visibles pour le rectangle vert dans les deux images (illustrées par le rectangle rouge et le rectangle pointillé) est égale à la zone du rectangle vert dans la première image, c'est-à-dire 50 % de la fenêtre. Dans ce cas, la fraction d'impact est donc de 0,5.
La fraction de distance est illustrée par la flèche violette : la boîte verte s'est déplacée vers le bas d'environ 14% de la fenêtre, la fraction de distance est donc de 0,14.
Le score pour la variation de la mise en page est donc de 0,5 x 0,14 = 0,07.
CLS et éléments non fixes
L'ajout d'autres éléments non fixes complique encore la situation. Dans la première image ci-dessus, on trouve quatre résultats d'une requête API pour des animaux, triés par ordre alphabétique ; dans la seconde, d'autres résultats sont ajoutés à la liste ordonnée.
Le premier élément de la liste ("Chat") est stable et ne change pas sa position initiale ; les nouveaux éléments ajoutés à la liste ne se trouvaient pas auparavant dans le DOM, de sorte que même leurs positions initiales ne changent pas, mais les objets intitulés "Chien", "Cheval" et "Zèbre" changent leur position de départ et sont donc instables.
