Évolution du Cumulative Layout Shift dans les outils Web

À compter d'aujourd'hui, une modification de la fonctionnalité CLS a été déployée sur plusieurs surfaces d'outils Web de Chrome, y compris Lighthouse, PageSpeed Insights et le rapport d'expérience utilisateur Chrome.

Addy Osmani

Elizabeth Sweeny

Aujourd'hui, nous souhaitons vous expliquer comment la mesure des performances Cumulative Layout Shift (CLS) sur plusieurs surfaces d'outils Web de Chrome. Pour les développeurs, ces modifications refléteront mieux l'expérience utilisateur pages de longue durée (comme les applications à défilement infini ou à page unique). Ces mises à jour du CLS seront déployées dans des outils tels que Lighthouse, PageSpeed Insights et Chrome UX Report.

Nous aimerions tous voir moins de décalages de mise en page sur le Web. C'est là que la métrique CLS s'est avérée utile pour mesurer la stabilité visuelle d'une page Web. Cela permet d'encourager les sites à mieux définir les dimensions du contenu, comme des images ou des annonces, ce qui peut entraîner des sauts de contenu surprenants pour les utilisateurs.

La métrique est nommée "cumulée". car le score de chaque changement individuel est additionné tout au long de la durée de vie d'une page. Si tous les décalages de mise en page sur le Web nuisent à l'expérience utilisateur, les pages de longue durée telles que les applications monopages (SPA) ou les applications à défilement infini accumulent naturellement plus de CLS au fil du temps. En limitant l'agrégation à la pire "fenêtre" d'ajustements, Le CLS peut désormais être mesuré de manière plus cohérente, quelle que soit la durée de la session.

Comme nous l'avons annoncé dans l'article Faire évoluer la métrique CLS, nous ajustons la métrique CLS fenêtre de session maximale avec un intervalle d'une seconde, limitée à cinq secondes, cette mise à jour reflète mieux l'expérience utilisateur sur les pages de longue durée. Avec ce changement en place, 70% des origines ne doivent pas s'attendre à une variation du CLS au 75e centile, et les 30% d'origines restantes présentent une amélioration.

Déploiement de l'ajustement du fenêtrage pour le CLS

Nous avons parlé de la définition CLS mise à jour étant une fenêtre de session maximale avec un intervalle d’une seconde, est limitée à cinq secondes. Qu'est-ce que cela signifie pour les outils ?

À partir d'aujourd'hui, ce changement de CLS a été déployé sur plusieurs surfaces d'outils Web de Chrome, y compris Lighthouse, PageSpeed Insights et Chrome UX Report. Vous trouverez ci-dessous un résumé du déploiement de l'ajustement de fenêtrage CLS. et les outils qui offrent encore la possibilité d'effectuer une analyse comparative par rapport à l'implémentation d'origine.

Les outils pour les développeurs Chrome seront également mis à jour prochainement afin de prendre en charge l'ajustement du fenêtrage. La mise à jour du CLS a également été effectuée dans la Search Console et sera appliquée à partir du 1er juin 2021.

Pour la plupart des développeurs, ce changement devrait se dérouler de manière transparente, sans qu'aucune action ne soit requise pour tirer parti des données du correctif.

"Ancien" CLS

Pour rappel, l'"ancien" Le CLS mesure le décalage de mise en page pendant toute la durée de vie de la page. Certains développeurs voudront peut-être surveiller l'ancienne définition du CLS en plus de l'ajustement du fenêtrage. nous avons une bonne nouvelle à vous annoncer: nous présentons l'"ancien CLS" dans Lighthouse et CrUX.

Dans Lighthouse v8, elle est disponible dans le fichier JSON sous la forme audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift

Vous le trouverez comme experimental_uncapped_cumulative_layout_shift dans l'API CrUX, experimental.uncapped_cumulative_layout_shift dans BigQuery en CrUX.

Après le 1er juin, les requêtes API CrUX renverront l'"ancien CLS" statistique:

{
  "origin": "https://web.dev",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

Après le 8 juin, les éléments suivants : BigQuery CrUX comparera l'ancien et le nouveau CLS:

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

Vous pourrez continuer à compter sur la présence de ces données pendant une période pouvant aller jusqu'à six mois. avec "ancien CLS" sera supprimé le 14 décembre 2021.

Mettre à jour la pondération CLS dans Lighthouse

Lorsque le CLS a été introduit pour la première fois dans Lighthouse, il s'agissait d'une toute nouvelle métrique étincelante. Ainsi, pour s'assurer que les développeurs avaient le temps d'effectuer des tests, des analyses comparatives, et l'optimiser, le CLS a été moins pesé dans le score de performance.

Après avoir passé un certain temps entre les mains de développeurs, le score Lighthouse a fait passer le poids du CLS de 5% à 15%, compatible avec la méthodologie des métriques Core Web Vitals seront les métriques les plus pondérées dans le score Lighthouse.

La nouvelle pondération des métriques dans Lighthouse v8 est disponible dans la calculateur de scores.

L'implémentation CLS de Lighthouse 8.0 inclut à la fois le fenêtrage et la contribution CLS des sous-cadres. Avant la version 8.0, le CLS dans Lighthouse n'incluait pas les sous-cadres CLS dans le calcul de la métrique, mais c'est désormais le cas. Et pour confirmation, le CLS de champ mesuré par CrUX gère également le fenêtrage et les sous-cadres de la même manière.

Toutefois, la principale différence entre la CLS de l'atelier et la CLS de terrain est que la fenêtre d'observation de la CLS de l'atelier se termine à l'état "entièrement chargé". (comme déterminé dans des conditions expérimentales), alors que sur le terrain, la période d'observation s'étend à toute la durée de vie de la page, y compris l'activité post-chargement. Cela dit, l'ajustement du fenêtrage atténue considérablement cette différence.

Mesures sur le terrain

Si vous voulez mesurer la dernière implémentation CLS, Vous pouvez également enregistrer ceci pour vos données de champ via RUM à l'aide de l'extrait PerformanceObserver suivant.

Vous pouvez aussi vous appuyer directement bibliothèque JavaScript Web Vitals qui a également été mis à jour avec ce changement.

Informations supplémentaires

En dehors des mises à jour de Cumulative Layout Shift, Les mises à jour suivantes concernant les métriques ont également été apportées à nos outils Web:

• Nous mettons à jour vers la définition la plus récente de la métrique Largest Contentful Paint. Les API CrUX, PSI, PSI et Search Console seront mises à jour le 1er juin 2021. BigQuery CrUX sera mis à jour le 8 juin 2021.
• Dans CrUX, les seuils de tri-binning First Contentful Paint ont été mis à jour pour être : Bonne: [0-1,8 s], Amélioration nécessaire: (1,8 s-3 s), Faible: [3 s à ∞]

Conclusions

Ce changement devrait se dérouler en douceur pour la plupart des sites. Nous vous invitons à consulter Web Vitals et Optimiser le CLS pour obtenir des conseils et des astuces sur la façon de mesurer et d'optimiser les décalages de mise en page. Comme toujours, n'hésitez pas à nous contacter via groupe web-vitals-feedback pour obtenir des commentaires sur les métriques et sur nos forums de commentaires dédiés aux outils Lighthouse Rapport d'expérience utilisateur Chrome en cas de problème d'outil. Santé !

Merci à Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose et Paul Ireland pour leurs commentaires.

Image héros de Barn Images / @barnimages sur Unsplash