Évolution du Cumulative Layout Shift dans les outils Web

À partir d'aujourd'hui, un changement a été apporté au CLS sur un certain nombre de surfaces d'outils Web de Chrome, y compris Lighthouse, PageSpeed Insights et le rapport d'expérience utilisateur Chrome.

Addy Osmani

Elizabeth Sweeny

Publié le 2 juin 2021

Aujourd'hui, nous souhaitons vous expliquer comment nous faisons évoluer la mesure de la métrique Déplacement cumulé de la mise en page (CLS) sur un certain nombre de surfaces d'outils Web de Chrome. Pour les développeurs, ces modifications reflèteront mieux l'expérience utilisateur pour les pages de longue durée (telles que celles avec défilement infini ou les applications monopages). Ces mises à jour du CLS seront déployées dans des outils tels que Lighthouse, PageSpeed Insights et le rapport d'expérience utilisateur Chrome.

Nous aimerions tous que les changements de mise en page soient moins fréquents sur le Web. C'est là que la métrique CLS s'est révélée utile pour mesurer la stabilité visuelle d'une page Web. Il permet d'encourager les sites à mieux définir les dimensions des contenus, tels que les images ou les annonces, qui peuvent contribuer à des sauts de contenu surprenants pour leurs utilisateurs.

La métrique est appelée "cumulative", car le score de chaque décalage individuel est additionné tout au long de la durée de vie d'une page. Bien que 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" de décalages, le CLS peut désormais être mesuré de manière plus cohérente, quelle que soit la durée de la session.

Comme annoncé dans Évolution de la métrique CLS, nous ajustons la métrique CLS à un intervalle maximal entre les sessions d'une seconde, limité à cinq secondes. Cette mise à jour reflète mieux l'expérience utilisateur pour les pages à durée de vie longue. Une fois ce changement en place, 70% des origines ne devraient pas s'attendre à une modification du CLS au 75e centile, et les 30% d'origines restants constateront une amélioration.

Déploiement de l'ajustement de la fenêtre dans CLS

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

À partir d'aujourd'hui, ce changement du CLS a été déployé sur un certain nombre de surfaces d'outils Web de Chrome, y compris Lighthouse, PageSpeed Insights et le rapport d'expérience utilisateur Chrome. Vous trouverez ci-dessous un résumé du déploiement de l'ajustement de fenêtrage CLS, ainsi que les outils qui permettent encore d'effectuer une analyse comparative par rapport à l'implémentation d'origine.

Les outils de développement Chrome seront également mis à jour pour prendre en charge l'ajustement de la fenêtre sous peu. La mise à jour de la CLS a également été appliquée à la Search Console et sera visible à partir du 1er juin 2021.

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

CLS "ancienne"

Pour rappel, l'ancien CLS mesure le décalage de mise en page sur toute la durée de vie de la page. Étant donné que certains développeurs souhaitent 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 affichons l'"ancien CLS" dans Lighthouse et CrUX.

Dans Lighthouse v8, elle est disponible au format JSON en tant que audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.

Vous le trouverez sous la forme experimental_uncapped_cumulative_layout_shift dans l'API CrUX et experimental.uncapped_cumulative_layout_shift dans CrUX BigQuery.

Après le 1er juin, les requêtes de l'API CrUX renverront l'ancienne métrique CLS:

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

Après le 8 juin, les commandes BigQuery CRUX suivantes compareront l'ancienne et la nouvelle 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 à vous appuyer sur ces données pendant une période maximale de six mois. L'ancienne CLS sera abandonnée 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 métrique toute neuve. Par conséquent, pour s'assurer que les développeurs avaient le temps de tester, de comparer et d'optimiser leur application en fonction de ce critère, le CLS a été moins pondéré dans le score de performances.

Maintenant, après avoir été utilisé par les développeurs pendant un certain temps, le score Lighthouse a augmenté le poids du CLS de 5% à 15%, conformément à la méthodologie consistant à faire des Core Web Vitals les métriques les plus pondérées dans le score Lighthouse.

Vous trouverez les pondérations mises à jour des métriques dans Lighthouse v8 dans le calculateur de score.

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 le CLS des sous-cadres dans le calcul de la métrique. C'est désormais le cas. Juste pour confirmation, le CLS de champ mesuré par CrUX gère également les fenêtres et les sous-cadres de la même manière.

Toutefois, la principale différence entre le CLS en laboratoire et le CLS sur le terrain est que la période d'observation du CLS en laboratoire se termine à "complètement chargé", comme déterminé dans des conditions de laboratoire, tandis 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. Toutefois, l'ajustement de la fenêtre atténue considérablement cette différence.

Mesures sur le terrain

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

Vous pouvez également vous appuyer directement sur la bibliothèque JavaScript Web Vitals, qui a également été mise à jour avec ce changement.

Mises à jour supplémentaires

Outre les mises à jour apportées à Cumulative Layout Shift, les mises à jour suivantes liées aux 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. L'API CrUX, PSI, l'API PSI et la Search Console seront mises à jour le 1er juin 2021. CrUX BigQuery sera mis à jour le 8 juin 2021.
• Dans CrUX, les seuils de tri par binning de la première peinture avec contenu ont été mis à jour comme suit : Bon : [0-1,8 s], Amélioration nécessaire : (1,8 s-3 s), Médiocre : [3 s-∞]

Conclusions

Nous nous attendons à ce que cette modification se traduise par une transition fluide pour la plupart des sites. Nous vous invitons à consulter Web Vitals et Optimiser le CLS pour obtenir des conseils sur la façon de mesurer et d'optimiser les changements de mise en page. Comme toujours, n'hésitez pas à nous contacter sur le groupe de commentaires sur les Web Vitals pour nous faire part de vos commentaires sur les métriques et sur nos forums de commentaires spécifiques aux outils pour Lighthouse et le rapport d'expérience utilisateur Chrome en cas de problème avec les outils. Santé !

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

Image principale par Barn Images / @barnimages sur Unsplash