Découvrez nos projets d'amélioration de la métrique Cumulative Layout Shift et envoyez-nous vos commentaires.
Le CLS (Cumulative Layout Shift) est une métrique qui mesure la stabilité visuelle d'une page Web. Cette métrique est appelée "décalage de mise en page cumulatif", car le score de chaque décalage individuel est additionné pendant toute la durée de vie de la page.
Bien que tous les changements de mise en page soient une mauvaise expérience utilisateur, ils s'accumulent sur les pages ouvertes plus longtemps. C'est pourquoi l'équipe des métriques de vitesse Chrome s'est efforcée d'améliorer la métrique CLS pour qu'elle soit plus neutre par rapport au temps passé sur une page.
Il est important que la métrique se concentre sur l'expérience utilisateur tout au long de la durée de vie de la page, car nous avons constaté que les utilisateurs ont souvent une expérience négative après le chargement, lors du défilement ou de la navigation entre les pages. Toutefois, nous avons entendu des inquiétudes concernant l'impact de cette mesure sur les pages persistantes, c'est-à-dire celles que l'utilisateur laisse généralement ouvertes pendant longtemps. Il existe plusieurs types de pages qui ont tendance à rester ouvertes plus longtemps. Parmi les plus courantes, on trouve les applications de réseaux sociaux avec défilement infini et les applications monopages.
Une analyse interne de pages de longue durée présentant des scores CLS élevés a révélé que la plupart des problèmes étaient dus aux tendances suivantes:
- Défilement infini qui déplace le contenu lorsque l'utilisateur fait défiler la page.
- Les gestionnaires d'entrée qui mettent plus de 500 ms à mettre à jour l'UI en réponse à une interaction utilisateur, sans aucun type d'espace réservé ni de modèle de squelette.
Nous encourageons les développeurs à améliorer ces expériences utilisateur, mais nous nous efforçons également d'améliorer la métrique et nous recherchons des commentaires sur les approches possibles.
Comment déterminer si une nouvelle métrique est meilleure ?
Avant de nous lancer dans la conception de métriques, nous voulions nous assurer d'avoir évalué nos idées sur un large éventail de pages Web et de cas d'utilisation concrets. Pour commencer, nous avons conçu une petite étude utilisateur.
Tout d'abord, nous avons enregistré des vidéos et des traces Chrome de 34 parcours utilisateur sur différents sites Web. Lors de la sélection des parcours utilisateur, nous avons eu plusieurs objectifs :
- Divers types de sites, comme les sites d'actualités et d'e-commerce
- Divers parcours utilisateur, tels que le chargement initial de la page, le défilement, la navigation dans une application à page unique et les interactions utilisateur.
- Variété du nombre et de l'intensité des décalages de mise en page individuels sur les sites.
- Peu d'expériences négatives sur les sites, à l'exception des changements de mise en page.
Nous avons demandé à 41 de nos collègues de regarder deux vidéos à la fois et d'évaluer laquelle des deux était la meilleure en termes de décalage de mise en page. À partir de ces notes, nous avons créé un classement idéal des sites. Les résultats du classement des utilisateurs ont confirmé notre point de vue selon lequel nos collègues, comme la plupart des utilisateurs, sont très frustrés par les décalages de mise en page après le chargement, en particulier lors du défilement et de la navigation sur une seule page dans l'application. Nous avons constaté que certains sites offrent une bien meilleure expérience utilisateur que d'autres lors de ces activités.
Comme nous avons enregistré des traces Chrome avec les vidéos, nous disposions de tous les détails des changements de mise en page individuels dans chaque parcours utilisateur. Nous les avons utilisés pour calculer des valeurs de métriques pour chaque idée et chaque parcours utilisateur. Cela nous a permis de voir comment chaque variante de métrique classait les parcours utilisateur et dans quelle mesure chacune d'elles différait du classement idéal.
Quelles idées de métriques avons-nous testées ?
Stratégies de fenêtrage
Les pages comportent souvent plusieurs changements de mise en page regroupés, car les éléments peuvent changer plusieurs fois à mesure que de nouveaux contenus sont ajoutés. Nous avons donc essayé des techniques de regroupement des quarts. Pour ce faire, nous avons examiné trois approches de création de fenêtres :
- Tumbling windows
- Fenêtres coulissantes
- Fenêtres de sessions
Dans chacun de ces exemples, la mise en page de la page change au fil du temps, avec des degrés de gravité différents. Chaque barre bleue représente un seul décalage de mise en page, et sa longueur représente le score de ce décalage. Les images illustrent comment différentes stratégies de fenêtrage regroupent les décalages de mise en page au fil du temps.
Tumbling windows
La méthode la plus simple consiste simplement à diviser la page en fenêtres de fragments de taille égale. Il s'agit des "tumbling windows". Vous remarquerez ci-dessus que la quatrième barre semble devoir être regroupée dans la deuxième fenêtre défilante, mais comme les fenêtres ont toutes une taille fixe, elle se trouve dans la première fenêtre. S'il existe de légères différences au niveau du temps de chargement ou des interactions des utilisateurs sur la page, les mêmes décalages de mise en page peuvent se produire de différents côtés des limites de la fenêtre bascule.
Fenêtres coulissantes
Pour voir plus de regroupements possibles de la même longueur, nous pouvons mettre à jour en continu la fenêtre potentielle au fil du temps. L'image ci-dessus montre une fenêtre glissante à la fois, mais nous pouvons examiner toutes les fenêtres glissantes possibles ou un sous-ensemble d'entre elles pour créer une métrique.
Fenêtres de sessions
Si nous voulons nous concentrer sur l'identification des zones de la page avec des décalages de mise en page en rafale, nous pourrions démarrer chaque fenêtre par décalage et continuer à l'agrandir jusqu'à ce que nous trouvions un écart d'une taille donnée entre les décalages de mise en page. Cette approche regroupe les changements de mise en page et ignore la majeure partie de l'expérience utilisateur non modifiée. S'il n'y a pas d'écarts au niveau des décalages de mise en page, une métrique basée sur les fenêtres de session pourrait se développer de manière illimitée, tout comme la métrique CLS actuelle. Nous avons donc essayé cela avec une taille de fenêtre maximale.
Tailles de fenêtre
La métrique peut donner des résultats très différents en fonction de la taille réelle des fenêtres. Nous avons donc essayé plusieurs tailles de fenêtre:
- Chaque quart de travail est associé à sa propre fenêtre (pas de fenêtres)
- 100 ms
- 300 ms
- 1 seconde
- 5 secondes
Synthèse
Nous avons essayé plusieurs façons de résumer les différentes fenêtres.
Centiles
Nous avons examiné la valeur de période maximale, ainsi que le 95e centile, le 75e centile et la médiane.
Moyen
Nous avons examiné la valeur de fenêtre moyenne.
Budgets
Nous nous sommes demandé s'il existait un score minimal de décalage de mise en page que les utilisateurs ne remarqueraient pas, et nous pourrions simplement compter les décalages de mise en page au-delà de ce "budget" dans la note. Nous avons donc examiné le pourcentage de quarts au-dessus du budget et le score total des quarts au-dessus du budget pour différentes valeurs potentielles de "budget".
Autres stratégies
Nous avons également examiné de nombreuses stratégies qui n'impliquent pas de fenêtres, comme le décalage de mise en page total divisé par le temps passé sur la page et la moyenne des N pires décalages individuels.
Résultats initiaux
Au total, nous avons testé 145 différentes définitions de métriques en fonction des permutations des idées ci-dessus. Pour chaque métrique, nous avons classé tous les parcours utilisateur en fonction de leur score, puis nous avons classé les métriques en fonction de leur proximité avec le classement idéal.
Pour obtenir une référence, nous avons également classé tous les sites en fonction de leur score CLS actuel. CLS s'est classé 32e, à égalité avec 13 autres stratégies, ce qui était supérieur à la plupart des permutations des stratégies ci-dessus. Pour nous assurer que les résultats étaient pertinents, nous avons également ajouté trois triages aléatoires. Comme prévu, les ordres aléatoires ont obtenu des résultats inférieurs à toutes les stratégies testées.
Pour comprendre si nous risquons de trop adapter l'ensemble de données, après notre analyse, nous avons enregistré de nouvelles vidéos et traces de changement de mise en page, les avons classées manuellement et avons constaté que les classements des métriques étaient très similaires pour le nouvel ensemble de données et l'ensemble d'origine.
Plusieurs stratégies sont ressorties du classement.
Meilleures stratégies
Lorsque nous avons classé les stratégies, nous avons constaté que trois types de stratégies étaient en tête de liste. Les performances de chacun d'eux étaient à peu près les mêmes. Nous prévoyons donc d'effectuer une analyse plus approfondie des trois. Nous aimerions également connaître l'avis des développeurs afin de savoir si des facteurs en dehors de l'expérience utilisateur doivent être pris en compte au moment de faire leur choix. (Découvrez ci-dessous comment envoyer des commentaires.)
Percentiles élevés de fenêtres longues
Quelques stratégies de fenêtrage ont bien fonctionné avec des fenêtres de grande taille:
- Fenêtres glissantes d'une seconde
- Fenêtres de session limitées à cinq secondes avec un intervalle d'une seconde
- Fenêtres de session sans limite avec un intervalle de 1 seconde
Ils se sont tous classés très bien au 95e percentile et au maximum.
Toutefois, pour des tailles de fenêtre aussi importantes, nous nous sommes interrogés sur l'utilisation du 95e percentile. Nous n'examinions souvent que quatre à six fenêtres, et le 95e percentile de ces fenêtres représente beaucoup d'interpolation. Il n'est pas clair ce que fait l'interpolation en termes de valeur de la métrique. La valeur maximale est beaucoup plus claire. Nous avons donc décidé de vérifier la valeur maximale.
Moyenne des fenêtres de session avec de longs intervalles
La moyenne des scores de toutes les périodes de session non limitées avec un intervalle de cinq secondes a donné de très bons résultats. Cette stratégie présente quelques caractéristiques intéressantes:
- Si la page ne présente pas d'écarts entre les décalages de mise en page, elle devient une longue fenêtre de session avec exactement le même score que le CLS actuel.
- Cette métrique ne tenait pas directement compte du temps d'inactivité. Elle ne prenait en compte que les changements qui se produisaient sur la page, et non les moments où la page ne changeait pas.
Percentiles élevés pour les périodes courtes
La fenêtre glissante maximale de 300 ms a obtenu un score très élevé, ainsi que le 95e centile. Pour la taille de fenêtre plus courte, l'interpolation des percentiles est moins importante que pour les tailles de fenêtre plus grandes. Nous nous sommes également préoccupés des fenêtres glissantes "répétées" : si un ensemble de décalages de mise en page se produit sur deux frames, plusieurs fenêtres de 300 ms les incluent. Il est beaucoup plus clair et plus simple de prendre la valeur maximale que la méthode du 95e centile. Nous avons donc décidé de vérifier le maximum.
Stratégies qui n'ont pas fonctionné
Les stratégies qui ont essayé d'examiner l'expérience "moyenne" du temps passé sans changement de mise en page et avec changement de mise en page ont très mal fonctionné. Aucun des résumés de la médiane ou du 75e centile de l'une des stratégies de fenêtre n'a permis de classer les sites de manière satisfaisante. La somme des décalages de mise en page au fil du temps n'a pas non plus changé.
Nous avons évalué plusieurs "budgets" différents pour les décalages de mise en page acceptables :
- Pourcentage de modifications de mise en page dépassant un certain budget. Pour différents budgets, ces campagnes ont toutes été classées assez mal.
- Décalage de mise en page moyen au-dessus d'un certain excès. La plupart des variantes de cette stratégie ont donné de mauvais résultats, mais l'excédent moyen sur une longue session avec un long intervalle a presque atteint la moyenne des fenêtres de session avec de longs intervalles. Nous avons décidé de ne poursuivre que la seconde, car elle est plus simple.
Étapes suivantes
Analyse à plus grande échelle
Nous avons implémenté les principales stratégies listées ci-dessus dans Chrome afin de pouvoir obtenir des données sur l'utilisation réelle d'un ensemble beaucoup plus important de sites Web. Nous prévoyons d'utiliser une approche similaire pour classer les sites en fonction de leurs scores de métriques afin d'effectuer une analyse à plus grande échelle :
- Classez tous les sites par CLS et par chaque nouvelle métrique candidate.
- Quels sites sont classés le plus différemment selon le CLS et chaque candidat ? Y a-t-il quelque chose d'inattendu lorsque nous examinons ces sites ?
- Quelles sont les principales différences entre les nouvelles métriques candidates ? L'une des différences se distingue-t-elle par les avantages ou les inconvénients d'un candidat spécifique ?
- Répétez l'analyse ci-dessus, mais en regroupant les données par temps passé sur chaque chargement de page. Constatons-nous une amélioration attendue pour les chargements de pages de longue durée avec un décalage de mise en page acceptable ? Y a-t-il des résultats inattendus pour les pages éphémères ?
Commentaires sur notre approche
Nous aimerions connaître l'avis des développeurs Web sur ces approches. Voici quelques points à retenir lorsque vous examinez les nouvelles approches :
Ce qui ne change pas
Nous tenons à préciser que de nombreux éléments ne changeront pas avec cette nouvelle approche :
- Aucune de nos idées de métriques ne modifie la façon dont les scores de décalage de mise en page sont calculés pour les images individuelles. Seul le fait de synthétiser plusieurs images est modifié. Cela signifie que l'API JavaScript pour les décalages de mise en page restera la même, et que les événements sous-jacents dans les traces Chrome utilisées par les outils pour les développeurs le seront également. Les rectangles de décalage de mise en page dans des outils tels que WebPageTest et les outils pour les développeurs Chrome continueront donc de fonctionner de la même manière.
- Nous allons continuer à faire tout notre possible pour que les développeurs puissent facilement adopter ces métriques, en les incluant dans la bibliothèque web-vitals, en les documentant sur web.dev et en les rapportant dans nos outils de développement tels que Lighthouse.
Compromis entre les métriques
L'une des principales stratégies résume les fenêtres de décalage de mise en page en moyenne, et les autres indiquent la fenêtre maximale. Pour les pages ouvertes très longtemps, la valeur moyenne est probablement plus représentative. Toutefois, en général, il est plus facile pour les développeurs d'agir sur une seule fenêtre. Ils peuvent consigner le moment où cela s'est produit, les éléments qui ont été déplacés, etc. N'hésitez pas à nous faire part de vos commentaires sur l'option la plus importante pour les développeurs.
Trouvez-vous les fenêtres glissantes ou de session plus faciles à comprendre ? Ces différences sont-elles importantes pour vous ?
Comment envoyer des commentaires
Vous pouvez tester les nouvelles métriques de décalage de mise en page sur n'importe quel site à l'aide de nos exemples d'implémentations JavaScript ou de notre fork de l'extension Core Web Vitals.
Veuillez envoyer vos commentaires par e-mail à notre groupe Google web-vitals-feedback, en indiquant "[Layout Shift Metrics]" dans l'objet. Nous avons hâte de connaître votre avis.