Découvrez nos projets d'amélioration de la métrique "Cumulative Layout Shift" et faites-nous part de 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é tout au long de la durée de vie de la page.
Bien que tous les décalages de mise en page soient une mauvaise 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 décidé d'améliorer la métrique CLS afin d'être plus neutre vis-à-vis du temps passé sur une page.
Il est important que la métrique se concentre sur l'expérience utilisateur sur toute la durée de vie de la page. En effet, nous avons constaté que les utilisateurs subissent souvent une expérience négative après le chargement, lorsqu'ils font défiler les pages ou les parcourent. Toutefois, certains utilisateurs nous ont fait part de leurs inquiétudes quant à leur impact sur les pages de longue durée, c'est-à-dire celles que l'utilisateur a généralement ouvertes depuis longtemps. Il existe différents types de pages qui restent ouvertes plus longtemps. Parmi les plus courantes, citons 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:
- L'utilisateur fait défiler le contenu à l'infini
- Les gestionnaires d'entrée mettent plus de 500 ms à mettre à jour l'interface utilisateur en réponse à une interaction de l'utilisateur, sans aucun type d'espace réservé ni de schéma de squelette.
Nous encourageons les développeurs à améliorer ces expériences utilisateur, mais nous cherchons également à améliorer cette métrique et à recueillir des commentaires sur les approches possibles.
Comment décider si une nouvelle métrique est meilleure ?
Avant de nous plonger dans la conception des métriques, nous voulions nous assurer d'évaluer nos idées sur une grande variété 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. Pour sélectionner les parcours utilisateur, nous nous sommes intéressés à plusieurs éléments:
- Il existe différents types de sites, tels que des sites d'actualités et de vente en ligne.
- Divers parcours utilisateur, tels que le chargement initial de la page, le défilement, la navigation sur une seule page dans une application et les interactions utilisateur.
- Une variété de nombres et d'intensités de décalages de mise en page individuels sur les sites.
- Peu d'expériences négatives sur le site, en dehors des décalages 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 évaluations, nous avons créé un ordre de classement idéalisé 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 avions tous les détails des décalages de mise en page individuels à 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 comprendre comment chaque variante de métrique classe les parcours utilisateur et en quoi chacune d'entre elles était différente du classement idéal.
Quelles idées de métriques avons-nous testées ?
Stratégies de fenêtrage
Les pages présentent souvent plusieurs décalages de mise en page rapprochés, car les éléments peuvent être décalés plusieurs fois à mesure que le nouveau contenu est ajouté petit à petit. Cela nous a amenés à tester des techniques pour regrouper les équipes. Pour ce faire, nous avons étudié trois approches de fenêtrage:
- Tumbling windows (Fenêtres de bascule)
- Fenêtres coulissantes
- Fenêtres de sessions
Dans chacun de ces exemples, la page présente des décalages de mise en page de gravité variable au fil du temps. Chaque barre bleue représente un seul décalage de mise en page, et la 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 (Fenêtres de bascule)
L'approche la plus simple consiste simplement à diviser la page en fenêtres composées de fragments de taille égale. C'est ce qu'on appelle les fenêtres bascules. Vous remarquerez ci-dessus que la quatrième barre semble vraiment être regroupée dans la deuxième fenêtre bascule, mais comme les fenêtres sont toutes de taille fixe, elles se trouvent dans la première fenêtre. S'il existe de légères différences de temps de chargement ou d'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 même durée, une approche qui consiste à mettre à jour continuellement 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 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 décalages de mise en page et ignore la plupart des éléments de l'expérience utilisateur qui ne changent pas. 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é ceci 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 décalage est une fenêtre distincte (aucune fenêtre)
- 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. Pour différentes valeurs de "budget" potentielles, nous avons donc examiné le pourcentage de variations par rapport au budget et le score total du décalage par rapport au budget.
Autres stratégies
Nous avons également examiné de nombreuses stratégies qui n'impliquaient pas de fenêtres, comme le décalage total de mise en page divisé par le temps passé sur la page et la moyenne des N changements individuels les pires.
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 dans 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, soit plus que 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 commandes aléatoires ont été moins efficaces que toutes les stratégies testées.
Pour déterminer si l'ensemble de données pouvait entraîner un surapprentissage, nous avons enregistré de nouvelles vidéos et traces avec changement de mise en page, les avons classés manuellement et constaté que les classements des métriques étaient très similaires pour le nouvel ensemble de données et celui 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. Chacune d'entre elles enregistrait à peu près les mêmes performances. Nous prévoyons donc de procéder à une analyse plus approfondie de ces trois éléments. 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. Pour savoir comment envoyer des commentaires, consultez la section ci-dessous.
Centiles é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 plafonnées à 5 secondes avec un intervalle d'une seconde
- Fenêtres de session non plafonnées avec un intervalle d'une seconde
Elles se sont toutes bien classées au 95e centile et au maximum.
Toutefois, pour des fenêtres aussi grandes, nous étions préoccupés par l'utilisation du 95e centile : souvent, nous n'examinons que 4 à 6 fenêtres, et le 95e centile constitue une grande interpolation. Ce que fait l'interpolation concernant 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 entre elles a donné d'excellents 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 tenait compte que des changements intervenus sur la page, et non à des moments où elle ne l'était pas.
Centiles élevés de fenêtres courtes
La fenêtre glissante maximale de 300 ms est très bien classée, ainsi que le 95e centile. Pour la taille de fenêtre plus courte, l'interpolation des centiles est inférieure à celle des tailles de fenêtre plus grandes, mais 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 images, elles sont incluses dans plusieurs fenêtres de 300 ms. 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.
Des stratégies qui n'ont pas fonctionné
Les stratégies qui tentaient d'examiner l'expérience "moyenne" du temps passé à la fois sans décalages de mise en page et avec ces changements ont été très mauvais. Aucun des résumés de la médiane ou du 75e centile d'une stratégie de fenêtrage n'a permis de bien classer les sites. Il en va de même pour la somme des décalages de mise en page au fil du temps.
Nous avons évalué différents "budgets" afin de déterminer les décalages de mise en page acceptables:
- Pourcentage de décalages de mise en page au-dessus d'un certain budget. Pour différents budgets, ils se sont tous mal classés.
- Décalage de mise en page moyen au-dessus d'un certain excès. La plupart des variantes de cette stratégie ont enregistré des résultats médiocres, mais l'excès moyen sur une session longue avec un écart important a enregistré des résultats presque aussi satisfaisants que la moyenne des fenêtres de session avec de longs intervalles. Nous avons décidé de n'utiliser que cette dernière option, car elle est plus simple.
Étapes suivantes
Analyse à plus grande échelle
Nous avons mis en œuvre les principales stratégies listées 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 afin d'effectuer une analyse à plus grande échelle:
- Classez tous les sites par CLS et en fonction de chaque nouvelle métrique candidate.
- Quels sites sont classés le plus différemment selon le CLS et chaque candidat ? Constaterons-nous quelque chose d'inattendu en consultant 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 fonction du temps passé à chaque chargement de page. Constatez-vous une amélioration attendue pour les chargements de pages de longue durée avec un décalage de mise en page acceptable ? Constatez-vous des résultats inattendus pour les pages de courte durée ?
Commentaires sur notre approche
Nous aimerions connaître votre avis sur ces approches de la part des développeurs Web. Voici quelques éléments à garder à l'esprit lorsque vous envisagez ces nouvelles approches:
Ce qui ne change pas
Nous tenons à préciser que de nombreux éléments ne changeront pas dans le cadre d'une 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 les événements sous-jacents dans les traces Chrome utilisés par les outils de développement resteront identiques. Dans les outils comme WebPageTest et les outils pour les développeurs Chrome, les rectangles de décalage de mise en page continueront de fonctionner de la même manière.
- Nous continuerons à tout mettre en œuvre pour faciliter l'adoption de ces métriques par les développeurs, en les incluant dans la bibliothèque web-vitals, en les documentant sur web.dev et en les signalant 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 comme une moyenne, et les autres indiquent la fenêtre maximale. Pour les pages 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 quand cela s'est produit, les éléments qui se sont décalés, etc. Nous aimerions connaître votre avis sur ce qui est le plus important pour les développeurs.
Trouvez-vous les fenêtres glissantes ou de session plus faciles à comprendre ? Les différences sont-elles importantes pour vous ?
Comment envoyer des commentaires
Vous pouvez tester les nouvelles métriques de décalage de la mise en page sur n'importe quel site à l'aide de nos exemples d'implémentations JavaScript ou de notre 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.