Plan d'amélioration de la métrique CLS pour plus d'équité envers les pages de longue durée.
Nous (l'équipe Chrome Speed Metrics) avons récemment présenté notre première recherche sur les options permettant d'améliorer l'équité de la métrique CLS pour les pages ouvertes depuis longtemps. Nous avons reçu de nombreux commentaires très utiles et, après avoir terminé l'analyse à grande échelle, nous avons finalisé la modification que nous prévoyons d'apporter à la métrique: fenêtre maximale de session avec un écart d'une seconde, limitée à cinq 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 en avons pris en compte.
Nous avons également implémenté les principales options dans Chrome et effectué une analyse des métriques à grande échelle sur des millions de pages Web. Nous avons comparé les types de sites améliorés par chaque option et comparé les différentes options, en particulier les sites dont le score était différent selon les options. Dans l'ensemble, voici ce que nous avons découvert:
- Toutes ces 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 des options n'a entraîné de moins bonne note pour n'importe quelle page. Il n'est donc pas nécessaire de s'inquiéter que cette modification aggrave les scores de votre site.
Points de décision
Pourquoi une fenêtre de session ?
Dans notre article précédent, nous avons abordé plusieurs stratégies de fenêtrage permettant de regrouper les décalages de mise en page tout en veillant à ce que le score n'augmente pas de façon illimitée. Les commentaires que nous avons reçus des développeurs ont largement contribué à la stratégie de fenêtre de session, car elle regroupe les décalages de mise en page de manière plus intuitive.
Voici un exemple pour examiner les fenêtres de session:
Dans l'exemple ci-dessus, de nombreux décalages de mise en page se produisent au fil du temps lorsque l'utilisateur consulte la page. Chacune d'entre elles 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 se développer jusqu'à ce qu'il y ait un écart sans décalage de mise en page. Lorsque le prochain décalage de mise en page se produit, une nouvelle fenêtre de session démarre. Étant donné qu'il y a trois lacs sans décalage de mise en page, il y a trois fenêtres de session dans cet exemple. 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 soit la somme de ses différents décalages de mise en page.
Sur la base de la recherche initiale, nous avons choisi un intervalle d'une seconde entre les fenêtres de session, et cet écart a bien fonctionné dans notre analyse à grande échelle. Ainsi, l'intervalle de sessions indiqué dans l'exemple ci-dessus est d'une seconde.
Pourquoi la fenêtre maximale de session ?
Dans notre recherche initiale, nous avons réduit les stratégies de synthèse à deux options:
- Score moyen de toutes les fenêtres de session, pour les fenêtres de session très longues (fenêtres non plafonnées avec des intervalles de cinq secondes entre elles).
- Score maximal de toutes les fenêtres de session, pour les fenêtres de session plus petites (limité à cinq secondes, avec des intervalles 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. Cette analyse à grande échelle nous a permis de trouver un grand nombre d'URL présentant des modèles de décalage de mise en page comme celui-ci:
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 petit décalage de mise en page ? Ensuite, le score n'est calculé que pour la fenêtre de session 1, ce qui signifie que le score de la page double presque. Il serait vraiment déroutant et décourageant pour les développeurs d'améliorer leurs décalages de mise en page pour constater une dégradation du score. Supprimer ce petit décalage de mise en page est évidemment un peu mieux pour l'expérience utilisateur. Cela ne devrait donc pas dégrader le score.
En raison de ce problème lié aux moyennes, nous avons décidé d'opter pour des fenêtres maximales plus petites et plafonnées. Ainsi, 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 enregistré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 page plus lents et des réponses plus lentes aux interactions des utilisateurs peuvent répartir les décalages 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 décalages de mise en page. Par exemple, une page de résultats sportifs qui change légèrement à chaque mise à jour de résultats. Ces changements sont ennuyeux, mais ils ne deviennent pas plus ennuyeux au fil du temps. Nous voulions donc nous assurer que la fenêtre était plafonnée pour ces types de décalages de mise en page.
En comparant différentes tailles de fenêtre sur de nombreuses pages Web réelles, nous avons conclu qu'une durée de cinq secondes serait une bonne limite de taille de la fenêtre.
Quel sera l'impact sur le score CLS de ma page ?
Étant donné que cette mise à jour limite le CLS d'une page, aucune page ne présentera de score inférieur à la suite de ce changement.
D'après notre analyse, 55% des origines ne constateront aucun changement du CLS au 75e centile. En effet, soit leurs pages n'ont actuellement aucun décalage de mise en page, soit les décalages qu'ils ont sont déjà confinés à une seule fenêtre de session.
Pour les autres origines, les scores seront améliorés au 75e centile avec cette modification. La plupart ne constateront qu'une légère amélioration, mais environ 3% constateront une amélioration de leurs scores, passant d'une note "nécessaire à une amélioration" ou "mauvaise" à une note "bonne". Ces pages ont tendance à utiliser des défilements infinis ou à subir de nombreuses mises à jour lentes de l'interface utilisateur, comme décrit dans notre article précédent.
Comment puis-je l'essayer ?
Nous mettrons bientôt à jour nos outils afin qu'ils utilisent la nouvelle définition des métriques. En attendant, vous pouvez essayer la version mise à jour du CLS sur n'importe quel site à l'aide des exemples d'implémentations JavaScript ou de la duplication de l'extension Web Vitals.
Merci à tous ceux qui ont pris le temps de lire le post précédent et de donner leur avis !