Plan d'amélioration de la métrique CLS pour qu'elle soit plus juste vis-à-vis des pages de longue durée
Nous (l'équipe des métriques de vitesse de Chrome) a récemment présenté nos recherches initiales sur options permettant de rendre la métrique CLS plus juste vis-à-vis des pages ouvertes pendant une longue période heure. Nous avons reçu de nombreuses commentaires utiles. Après avoir terminé l'analyse à grande échelle, nous avons finalisé la modification que nous prévoyons d'apporter à la métrique: fenêtre de session maximale d'une seconde d'intervalle, limité à 5 secondes.
Lisez la suite pour en savoir plus.
Comment avons-nous évalué les options ?
Nous avons examiné tous les commentaires de la communauté des développeurs en compte.
Nous avons également implémenté le top d'assistance dans Chrome et a analysé les métriques à grande échelle sur des millions de pages Web. Mer nous avons vérifié quels types de sites chaque option s'améliore et comment les options se sont comparées, en particulier ceux qui ont reçu des avis différents options. 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 des options proposées n'a entraîné un score inférieur pour toutes les pages. Il n'y a donc pas craignez que ce changement n'entraîne une dégradation des scores de votre site.
Points de décision
Pourquoi une fenêtre de session ?
Dans un article précédent, nous avons abordé différents fenêtrages stratégies pour regrouper les décalages de mise en page tout en veillant à ce que le score n'augmente pas illimitées. Les commentaires que nous avons reçus des développeurs ont largement car elle regroupe les décalages de mise en page intuitivement.
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 voit . Chacune est représentée par une barre bleue. Vous remarquerez que les barres bleues ont des hauteurs différentes ; représentent le score de chaque décalage de mise en page individuel. 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 blanc sans décalage de mise en page. Lors de la prochaine un décalage de mise en page se produit, une nouvelle fenêtre de session s'ouvre. Puisqu'il y a trois lacunes avec aucun décalage de mise en page, il y a trois fenêtres de session dans l'exemple. Semblable à la section définition actuelle du CLS, les scores de chaque équipe sont additionnés, de sorte que chaque le score de la fenêtre est la somme de ses décalages de mise en page individuels.
Sur la base de l'initiale de l'étude, nous avons choisi un intervalle d'une seconde entre les fenêtres de session. Cet écart a bien fonctionné l'analyse à grande échelle. L'écart de session dans l'exemple ci-dessus est 1 seconde.
Pourquoi la fenêtre de session maximale ?
Nous avons réduit la résumé stratégies jusqu'à deux options dans notre recherche initiale:
- Score moyen de toutes les fenêtres de session pour une session très volumineuse (fenêtres non délimitées avec des intervalles de 5 secondes entre elles).
- Score maximal de toutes les fenêtres de session (pour les fenêtres de session plus petites) (5 secondes maximum, avec un intervalle d'une seconde).
Après les recherches initiales, nous avons ajouté chaque métrique à Chrome afin de analyser à grande échelle des millions d'URL. Dans l'analyse à grande échelle, nous trouvé de nombreuses URL avec 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 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 ? Dans ce cas, est calculé uniquement lors de la fenêtre de session 1, ce qui signifie que le score de la page soit presque le double. Ce serait vraiment déroutant et décourageant pour les développeurs pour améliorer leurs décalages de mise en page et constater que le score a empiré. Et la suppression de ce petit décalage de mise en page est évidemment un peu plus bénéfique pour l'utilisateur et ne devrait donc pas aggraver votre score.
En raison de ce problème avec les moyennes, nous avons décidé d'utiliser des fenêtres maximales plus petites et plafonnées. Dans l'exemple ci-dessus, la fenêtre de session 2 serait ignoré, et seule la somme des décalages de mise en page dans la fenêtre de session 1 serait être signalé.
Pourquoi 5 secondes ?
Nous avons évalué plusieurs tailles de fenêtre et avons constaté deux choses:
- Pour les fenêtres courtes, le chargement des pages et les réponses aux interactions des utilisateurs sont plus lents pourrait diviser les décalages de mise en page en plusieurs fenêtres et améliorer le score. Mer 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. Pour par exemple, une page de résultats sportifs qui change légèrement à chaque mise à jour des scores. Ces les changements d’équipes sont ennuyeux, mais ils ne deviennent pas plus agaçants au fil du temps. Nous voulait s'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, comparer différentes tailles de fenêtre sur de nombreux pages Web réelles, nous avons conclu qu'une limite de cinq secondes la 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 n'enregistrera de score plus faible suite à ce changement.
D'après nos analyses, 55% des origines ne constateront aucun changement au niveau du CLS. au 75e centile. En effet, leurs pages ne disposent pas encore les décalages de mise en page sont déjà limités une seule fenêtre de session.
Pour les autres origines, les scores s'amélioreront au 75e centile, ce changement. La plupart des éditeurs ne constateront qu'une légère amélioration, mais environ 3% d'entre eux constateront leurs scores s’améliorent par rapport à un « besoin d’amélioration » ou "médiocre" note de avoir un « bon » évaluation. Ces pages ont tendance à utiliser des défilements infinis les mises à jour lentes de l'interface utilisateur, comme décrit dans notre post.
Comment puis-je l'essayer ?
Nous mettrons bientôt à jour nos outils pour utiliser la nouvelle définition des métriques. En attendant, vous pouvez tester la version mise à jour du CLS sur n'importe quel site en utilisant l'exemple JavaScript implémentations ou la copie du rapport Core Web Vitals .
Merci à tous ceux qui ont pris le temps de lire le message précédent et de commentaires !