Découvrez nos projets d'amélioration de la métrique "Cumulative Layout Shift" et faites-nous part de vos commentaires.
La métrique Cumulative Layout Shift (CLS) mesure la stabilité visuelle d'une page Web. Cette métrique est appelée "Changement de mise en page cumulatif", car le score de chaque décalage individuel est additionné tout au long de la durée de vie de la page.
Bien que tous les décalages de mise en page nuisent à l'expérience utilisateur, ils s'accumulent davantage sur les pages ouvertes plus longtemps. C'est pourquoi l'équipe des métriques de vitesse de Chrome a entrepris d'améliorer la métrique CLS afin de réduire le temps passé sur une page.
Il est important que cette 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 subissent souvent des expériences négatives après le chargement, lorsqu'ils font défiler les pages ou les parcourent. Cependant, certains utilisateurs nous ont fait part de leur inquiétude concernant l'impact de cette fonctionnalité sur les pages de très longue durée, celles que l'utilisateur a généralement ouvertes depuis longtemps. Il existe différents types de pages qui ont tendance à rester ouvertes plus longtemps. Les plus courantes sont les applications de réseaux sociaux à défilement infini et les applications monopages.
Une analyse interne des pages de longue durée avec des scores CLS élevés a révélé que la plupart des problèmes étaient causés par les schémas suivants:
- Les défileurs infinis déplacent le contenu à mesure que l'utilisateur fait défiler la page.
- Les gestionnaires d'entrée mettent plus de 500 ms à mettre à jour l'UI en réponse à une interaction de l'utilisateur, sans aucun espace réservé ni schéma squelette.
Bien que nous encouragions les développeurs à améliorer l'expérience utilisateur, nous nous efforçons également d'améliorer cette métrique et nous demandons des commentaires sur les approches possibles.
Comment pouvons-nous décider si une nouvelle métrique est meilleure ?
Avant d'étudier la conception des métriques, nous voulons nous assurer d'avoir évalué nos idées sur une grande variété de pages Web et de cas d'utilisation réels. 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. En sélectionnant les parcours utilisateur, nous nous sommes concentrés sur quelques éléments:
- une multitude de types de sites, tels que des sites d'actualités ou de vente ;
- Divers parcours utilisateur, tels que le chargement initial de la page, le défilement, la navigation sur une seule page dans l'application et les interactions utilisateur.
- Diversité 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 en dehors des décalages de mise en page
Nous avons demandé à 41 de nos collègues de regarder deux vidéos à la fois, afin d'identifier le plus performant en termes de décalage de mise en page. À partir de ces évaluations, nous avons créé un ordre de classement idéalisé des sites. Les résultats du classement des utilisateurs confirment notre doute selon lequel nos collègues, comme la plupart des utilisateurs, sont vraiment 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 de l'application. Nous avons constaté que certains sites offrent une bien meilleure expérience utilisateur lors de ces activités.
Depuis que nous avons enregistré les traces de Chrome avec les vidéos, nous avions tous les détails des changements de mise en page individuels dans chaque parcours utilisateur. Nous les avons utilisés afin de calculer les valeurs des métriques pour chaque idée et chaque parcours utilisateur. Nous avons ainsi pu voir comment chaque variante de métrique classait les parcours utilisateur et dans quelle mesure chacune était différente du classement idéal.
Quelles idées de métriques avons-nous testées ?
Stratégies de fenêtrage
Les pages ont souvent plusieurs décalages de mise en page rapprochés, car les éléments peuvent changer plusieurs fois à mesure que le nouveau contenu arrive petit à petit. Cela nous a incités à tester des techniques pour regrouper les horaires. Pour ce faire, nous avons examiné trois approches de fenêtrage:
- Tumbling windows (Fenêtres de bascule)
- Fenêtres coulissantes
- Fenêtres de session
Dans chacun de ces exemples, la page présente des décalages de mise en page plus ou moins importants au fil du temps. Chaque barre bleue représente un seul décalage de mise en page, et sa longueur correspond au score de ce décalage. Les images montrent comment différentes stratégies de fenêtrage regroupent les décalages de mise en page au fil du temps.
Tumbling windows (Fenêtres de bascule)
L'approche la plus simple consiste simplement à diviser la page en fenêtres de blocs de taille égale. C'est ce qu'on appelle des fenêtres Tumbling. Vous remarquerez ci-dessus que la quatrième barre semble vraiment être regroupée dans la deuxième fenêtre Tumbling, mais comme les fenêtres ont toutes une taille fixe, elle se trouve dans la première fenêtre à la place. S'il existe de légères différences au niveau du timing des chargements 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 Tumbling.
Fenêtres coulissantes
Une approche qui nous permet de voir plus de regroupements possibles de la même durée consiste à mettre à jour en permanence la fenêtre potentielle au fil du temps. L'image ci-dessus montre une fenêtre glissante à la fois, mais nous pourrions examiner toutes les fenêtres glissantes possibles ou un sous-ensemble de ces fenêtres pour créer une métrique.
Fenêtres de session
Si nous voulions nous concentrer sur l'identification des zones de la page avec des rafales de décalages de mise en page, nous pourrions démarrer chaque fenêtre avec une décalage et continuer à l'agrandir jusqu'à ce que nous rencontrions un écart d'une taille donnée entre les décalages de mise en page. Cette approche regroupe les décalages de mise en page et ignore la plupart de l'expérience utilisateur non modifiée. Un problème potentiel est que s'il n'y a pas d'écarts dans les décalages de mise en page, une métrique basée sur les fenêtres de session peut être illimitée, tout comme la métrique CLS actuelle. Nous avons donc essayé cette opération avec une taille de fenêtre maximale.
Dimensions des fenêtres
Cette métrique peut donner des résultats très différents selon la taille réelle des fenêtres. Nous avons donc essayé plusieurs tailles de fenêtre différentes:
- Chaque décalage dans sa propre fenêtre (pas de fenêtre)
- 100 ms
- 300 ms
- 1 seconde
- 5 secondes
Synthèse
Nous avons essayé de nombreuses façons de résumer les différentes fenêtres.
Centiles
Nous avons examiné la valeur maximale de la fenêtre, ainsi que les 95e et 75e centiles, ainsi que la médiane.
Moyen
Nous avons examiné la valeur moyenne de la fenêtre.
Budgets
Nous nous sommes demandé s'il y avait 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 le score. Ainsi, pour différentes valeurs "budget" potentielles, nous avons examiné le pourcentage de variations par rapport au budget et le score total des variations par rapport au budget.
Autres stratégies
Nous avons également examiné de nombreuses stratégies qui n'impliquaient pas de fenêtres, telles que le décalage de mise en page total divisé par le temps passé sur la page et la moyenne des N ajustements individuels les plus mauvais.
Les premiers résultats
Au total, nous avons testé 145 définitions de métriques différentes sur la base 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 position par rapport au classement idéal.
Pour établir une référence, nous avons également classé tous les sites en fonction de leur score CLS actuel. Le CLS s'est classé à la 32e place, à égalité avec 13 autres stratégies. Il était donc préférable à la plupart des permutations des stratégies ci-dessus. Pour nous assurer que les résultats étaient significatifs, nous avons également ajouté trois ordres aléatoires. Comme prévu, les ordres aléatoires ont été moins bons que toutes les stratégies testées.
Pour savoir si l'ensemble de données peut être en surapprentissage, nous avons enregistré de nouvelles vidéos et traces sur le décalage de mise en page. Nous les avons classées manuellement, et nous avons constaté que les classements des métriques étaient très similaires pour le nouvel ensemble de données et l'original.
Différentes stratégies se sont distinguées dans le 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. Chacun d'entre eux a enregistré à peu près les mêmes performances, c'est pourquoi nous prévoyons de procéder à une analyse plus approfondie pour chacun d'entre eux. Nous aimerions également connaître les commentaires des développeurs afin de savoir s'il existe des facteurs en dehors de l'expérience utilisateur dont nous devons tenir compte au moment de faire le choix de l'un. Reportez-vous à la section ci-dessous pour savoir comment envoyer des commentaires.
Grands centiles de fenêtres longues
Quelques stratégies de fenêtrage ont bien fonctionné pour les fenêtres de grande taille:
- Fenêtres glissantes de 1 seconde
- Fenêtres de session plafonnées à 5 secondes avec un intervalle d'une seconde
- Périodes de session non plafonnées avec un intervalle d'une seconde
Elles sont toutes très bien classées au 95e centile et au maximum.
Toutefois, pour des fenêtres aussi grandes, nous craignions d'utiliser le 95e centile : nous n'avons souvent étudié que 4 à 6 fenêtres, et le 95e centile représente une grande interpolation. Ce que fait l'interpolation en ce qui concerne la valeur de la métrique n'est pas clair. La valeur maximale étant beaucoup plus claire, nous avons décidé de vérifier la valeur maximale.
Moyenne des fenêtres de sessions avec de longs intervalles
La moyenne des scores de toutes les fenêtres de session non plafonnées avec des intervalles de 5 secondes a très bien fonctionné. Cette stratégie présente quelques caractéristiques intéressantes:
- Si la page n'a pas d'écarts entre les décalages de mise en page, elle finit par être 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 variations qui se produisaient sur la page, et non les moments où cette dernière ne se produisait pas.
Grands centiles de fenêtres courtes
La fenêtre glissante de 300 ms maximale est très bien classée, de même que le 95e centile. Pour la taille de fenêtre plus courte, l'interpolation de centile est moins importante que les tailles de fenêtre plus grandes. Toutefois, nous étions également préoccupés par les fenêtres glissantes "répéter" : si un ensemble de décalages de mise en page se produit sur deux cadres, plusieurs fenêtres de 300 ms les incluent. Prendre le maximum est beaucoup plus clair et plus simple que celui du 95e centile. Nous avons donc décidé de vérifier le maximum.
Stratégies qui n'ont pas fonctionné
Les stratégies qui tentaient d'analyser l'expérience "moyenne" sur le temps passé à la fois sans et avec les décalages de mise en page ont très peu fonctionné. Aucun des résumés médians ou au 75e centile des stratégies de fenêtrage n'a bien classé les sites. La somme des décalages de mise en page n'a pas non plus évolué au fil du temps.
Nous avons évalué un certain nombre de "budgets" différents pour déterminer si des décalages de mise en page étaient acceptables:
- Pourcentage de décalages de mise en page dépassant une partie du budget. Elles n'ont pas été correctement classées pour différents budgets.
- Décalage de mise en page moyen au-dessus d'un excès. La plupart des variantes de cette stratégie ont donné de mauvais résultats, mais l'excès moyen sur une longue session avec un écart important a presque atteint la même valeur que la moyenne des fenêtres de session avec de longs écarts. Nous avons choisi de n'utiliser que la dernière option, car c'est plus simple.
Étapes suivantes
Analyse à plus grande échelle
Nous avons mis en œuvre les principales stratégies décrites ci-dessus dans Chrome, afin d'obtenir des données sur l'utilisation réelle d'un plus grand nombre 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 l'analyse à plus grande échelle:
- Classez tous les sites en fonction du CLS et de chaque nouvelle métrique candidate.
- Quels sites sont classés le plus différemment selon le CLS et chaque candidat ? Avons-nous quelque chose d'inattendu lorsque nous consultons ces sites ?
- Quelles sont les principales différences entre les nouvelles métriques candidates ? Certaines des différences se distinguent-elles par des avantages ou des inconvénients d’un candidat spécifique ?
- Répétez l'analyse ci-dessus, mais en les classant par temps passé à chaque chargement de page. Avons-nous une amélioration attendue pour les chargements de page de longue durée avec un décalage de mise en page acceptable ? Des résultats inattendus s'affichent-ils 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 à garder à l'esprit lorsque vous envisagez ces nouvelles approches:
Ce qui ne change pas
Nous tenons à préciser que de nombreux aspects ne seront pas concernés par cette nouvelle approche:
- Aucune de nos idées de métriques ne modifie la façon dont le score de décalage de mise en page est calculé pour les images individuelles, mais seulement la façon dont nous résumons plusieurs images. 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 des traces Chrome utilisés par les outils pour les développeurs resteront les mêmes. Par conséquent, les rectangles de décalage de mise en page dans des outils tels que WebPageTest et les outils pour les développeurs Chrome continueront de fonctionner de la même manière.
- Nous allons continuer à faciliter l'adoption des métriques par les développeurs, y compris dans la bibliothèque web-vitals, à la documentation sur web.dev et à la création de rapports dans nos outils pour les développeurs 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 tant que moyenne, tandis que les autres indiquent la fenêtre maximale. Pour les pages qui sont ouvertes très longtemps, la moyenne indiquera probablement une valeur plus représentative, mais en général, il est plus facile pour les développeurs d'agir sur une seule fenêtre : ils peuvent consigner l'heure à laquelle elle s'est produite, les éléments qui se sont déplacés, etc. Nous aimerions savoir ce qui est le plus important pour les développeurs.
Trouvez-vous que les fenêtres glissantes ou de session sont plus faciles à comprendre ? Les différences sont-elles importantes pour vous ?
Comment envoyer des commentaires
Vous pouvez essayer les nouvelles métriques "Changement de mise en page" sur n'importe quel site à l'aide de nos exemples d'implémentation de JavaScript ou de notre duplication 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.