Plans visant à améliorer la métrique CLS pour qu'elle soit plus juste pour les pages à durée de vie longue.
Publié le 7 avril 2021
Nous (l'équipe des métriques de vitesse Chrome) avons récemment décrit nos recherches initiales sur les options permettant de rendre la métrique CLS plus équitable pour les pages ouvertes pendant une longue période. Nous avons reçu de nombreux commentaires très utiles et après avoir terminé l'analyse à grande échelle, nous avons finalisé le changement que nous prévoyons d'apporter à la métrique: fenêtre de session maximale avec un intervalle d'une seconde, plafonnée à 5 secondes.
Lisez la suite pour en savoir plus.
Comment avons-nous évalué les options ?
Nous avons examiné tous les commentaires reçus de la communauté des développeurs et les avons pris en compte.
Nous avons également implémenté les meilleures options dans Chrome et effectué une analyse à grande échelle des métriques sur des millions de pages Web. Nous avons vérifié les types de sites améliorés par chaque option et les performances de chaque option, en particulier en examinant les sites qui ont reçu des scores différents. Globalement, nous avons constaté que:
- Toutes les options ont réduit la corrélation entre le temps passé sur la page et le score de décalage de mise en page.
- Aucune de ces options n'a entraîné un score inférieur pour une page. Vous n'avez donc pas à craindre que ce changement ne dégrade les scores de votre site.
Points de décision
Pourquoi une fenêtre de session ?
Dans notre article précédent, nous avons abordé quelques stratégies de fenêtrage différentes permettant de regrouper les décalages de mise en page tout en veillant à ce que le score ne augmente pas sans limite. Les commentaires que nous avons reçus des développeurs ont majoritairement favorisé la stratégie de fenêtre de session, car elle regroupe les changements de mise en page de la manière la plus intuitive.
Voici un exemple pour examiner les fenêtres de session:
Dans l'exemple ci-dessus, de nombreux changements de mise en page se produisent au fil du temps lorsque l'utilisateur consulte la page. Chacune est représentée par une barre bleue. Vous remarquerez ci-dessus que les barres bleues ont des hauteurs différentes. Elles représentent le score de chaque décalage de mise en page. Une fenêtre de session commence par le premier décalage de mise en page et continue de s'étendre jusqu'à ce qu'il y ait un écart sans décalage de mise en page. Lors du prochain changement de mise en page, une nouvelle fenêtre de session démarre. Étant donné qu'il existe trois intervalles sans décalage de mise en page, cet exemple comprend trois fenêtres de session. Comme pour la définition actuelle du CLS, les scores de chaque décalage sont additionnés, de sorte que le score de chaque fenêtre correspond à la somme de ses décalages de mise en page individuels.
Sur la base de la recherche initiale, nous avons choisi un écart de 1 seconde entre les fenêtres de session. Cet écart a bien fonctionné dans notre analyse à grande échelle. Par conséquent, l'intervalle de session indiqué dans l'exemple ci-dessus est de 1 seconde.
Pourquoi la fenêtre de session maximale ?
Dans notre recherche initiale, nous avons réduit les stratégies de résumé à deux options:
- Score moyen de toutes les fenêtres de session, pour les fenêtres de session très longues (fenêtres non limitées avec un intervalle de cinq secondes entre elles).
- Score maximal de toutes les fenêtres de session, pour les fenêtres de session plus courtes (limitées à cinq secondes, avec un intervalle d'une seconde entre elles).
Après la recherche initiale, nous avons ajouté chaque métrique à Chrome afin de pouvoir effectuer une analyse à grande échelle sur des millions d'URL. Dans cette analyse à grande échelle, nous avons trouvé de nombreuses URL présentant des schémas de décalage de mise en page comme suit:
En bas à droite, vous pouvez voir qu'il n'y a qu'un seul petit décalage de mise en page dans la fenêtre de session 2, ce qui lui donne un score très faible. Cela signifie que le score moyen est assez faible. Mais que se passe-t-il si le développeur corrige ce léger décalage de mise en page ? Le score est ensuite calculé uniquement sur la fenêtre de session 1, ce qui signifie que le score de la page double presque. Il serait très déroutant et décourageant pour les développeurs d'améliorer leurs changements de mise en page pour constater que le score s'est aggravé. Supprimer ce petit décalage de mise en page est évidemment légèrement meilleur pour l'expérience utilisateur. Il ne devrait donc pas aggraver le score.
En raison de ce problème avec les moyennes, nous avons décidé de définir des fenêtres maximales plus petites et plafonnées. Par conséquent, dans l'exemple ci-dessus, la fenêtre de session 2 serait ignorée et seule la somme des décalages de mise en page dans la fenêtre de session 1 serait indiquée.
Pourquoi 5 secondes ?
Nous avons évalué plusieurs tailles de fenêtre et avons constaté deux choses:
- Pour les fenêtres courtes, des chargements de pages et des réponses aux interactions utilisateur plus lents peuvent entraîner des changements de mise en page dans plusieurs fenêtres et améliorer le score. Nous voulions que la fenêtre soit suffisamment grande pour ne pas récompenser les ralentissements.
- Certaines pages présentent un flux continu de petits changements de mise en page. Par exemple, une page de résultats sportifs qui change un peu à chaque mise à jour du score. Ces changements sont gênants, mais ils ne le deviennent pas davantage avec le temps. Nous voulions donc nous assurer que la fenêtre était limitée pour ces types de décalages de mise en page.
En gardant ces deux points à l'esprit, et en comparant différentes tailles de fenêtre sur de nombreuses pages Web réelles, nous avons conclu que cinq secondes constituaient une bonne limite pour la taille de la fenêtre.
Quel impact cela aura-t-il sur le score CLS de ma page ?
Étant donné que cette mise à jour limite le CLS d'une page, aucune page ne générera de score plus faible à la suite de cette modification.
D'après notre analyse, 55% des origines ne verront aucune modification du CLS au 75e percentile. En effet, leurs pages ne comportent actuellement aucun décalage de mise en page ou les décalages qu'elles comportent sont déjà limités à une seule fenêtre de session.
Les autres origines verront leurs scores au 75e centile améliorés avec ce changement. La plupart ne verront qu'une légère amélioration, mais environ 3% verront leur note passer de "Amélioration nécessaire" ou "Médiocre" à "Bon". Ces pages ont tendance à utiliser des défilements infinis ou à effectuer de nombreuses mises à jour lentes de l'interface utilisateur, comme décrit dans notre post précédent.
Comment puis-je l'essayer ?
Nous allons bientôt mettre à jour nos outils pour utiliser la nouvelle définition de la métrique. En attendant, vous pouvez tester la version mise à jour de la CLS sur n'importe quel site à l'aide des exemples d'implémentations JavaScript ou de la fourche de l'extension Web Vitals.
Merci à tous ceux qui ont pris le temps de lire le post précédent et de nous faire part de leurs commentaires !