À partir d'aujourd'hui, un changement a été apporté au CLS sur un certain nombre d'outils Web de Chrome, y compris Lighthouse, PageSpeed Insights et le rapport d'expérience utilisateur Chrome.
Aujourd'hui, nous souhaitons vous expliquer comment nous faisons évoluer les mesures de la métrique Cumulative Layout Shift (CLS) sur plusieurs plates-formes 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 (comme celles avec un 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 UX Chrome.
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 (images ou annonces, par exemple) qui peuvent entraîner des sauts de contenu surprenants pour les utilisateurs.
Cette métrique est appelée "cumulé", car le score de chaque période de travail 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 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 nous l'avons annoncé dans l'article Faire évoluer la métrique CLS, nous ajustons la métrique CLS à une fenêtre de session maximale avec un intervalle d'une seconde limité à cinq secondes. Cette mise à jour reflète mieux l'expérience utilisateur pour les pages de longue durée. Une fois ce changement en place, 70% des origines ne devraient pas s'attendre à voir le CLS au 75e centile, et les 30% restants constateront une amélioration.
Déployer l'ajustement du fenêtrage pour le CLS
Nous avons vu que la définition du CLS mise à jour correspond à une fenêtre de session maximale avec un intervalle d'une seconde, limité à cinq secondes. Qu'est-ce que cela signifie pour les outils ?
À compter d'aujourd'hui, cette modification du CLS a été déployée sur un certain nombre 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 du fenêtrage CLS, ainsi que les outils permettant encore d'effectuer des analyses comparatives par rapport à l'implémentation d'origine.
| Outil | Ajustement du fenêtrage CLS "Live" | Disponibilité CLS "Ancienne" |
|---|---|---|
| Panneau des outils de développement Lighthouse | Version Canary, 2 juin 2021 | N/A |
| CLI Lighthouse | v8, sortie le 1er juin 2021 | Disponible en tant que totalCumulativeLayoutShift dans Lighthouse v8 |
| CI Lighthouse | v0.7.3, 3 juin 2021 | N/A |
| PageSpeed Insights (PSI) | 1er juin 2021 | NA |
| API PSI | 1er juin 2021 | Disponible dans lighthouseResult en tant que totalCumulativeLayoutShift. Non disponible dans les données du champ "loadingExperience" |
| Rapport UX Chrome (CrUX) – BigQuery | Ensemble de données 202105, publié le 8 juin 2021 | Disponible en tant que experimental.uncapped_cumulative_layout_shift jusqu'en 202111 |
| Rapport UX Chrome (CrUX) - API | 1er juin 2021 | Après le 1er juin 2021, disponible le experimental_uncapped_cumulative_layout_shift14 décembre 2021 |
Les outils pour les développeurs Chrome seront également mis à jour prochainement pour permettre l'ajustement du fenêtrage. La mise à jour du CLS a également été appliquée à la Search Console. Cette mise à jour prendra effet le 1er juin 2021.
Pour la plupart des développeurs, ce changement devrait se faire facilement sans qu'aucune action ne soit requise pour tirer parti des données issues du correctif.
"Ancien" CLS
Pour rappel, l'"ancien" CLS mesure le décalage de mise en page sur toute la durée de vie de la page. Certains développeurs souhaitent peut-être surveiller l'ancienne définition du CLS en même temps que l'ajustement des fenêtres. Nous avons donc une bonne nouvelle à vous annoncer: nous présentons l'"ancien CLS" dans Lighthouse et CrUX.
Dans Lighthouse v8, il est disponible dans le fichier JSON sous la forme 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 API CrUX renverront l'ancienne métrique CLS:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
Après le 8 juin, l'outil CrUX BigQuery suivant 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 ces données pour une période allant jusqu'à six mois, et l'"ancien CLS" sera supprimé le 14 décembre 2021.
Mettre à jour la pondération CLS dans Lighthouse
Lorsque le CLS a été introduit dans Lighthouse, il s'agissait d'une toute nouvelle métrique étincelante. Ainsi, afin que les développeurs aient le temps de les tester, de les comparer et de les optimiser, le CLS a été moins important dans le score de performances.
Maintenant, après avoir eu un certain temps entre les mains des développeurs, le score Lighthouse a fait passer la pondération du CLS de 5% à 15%, conformément à la méthodologie qui consiste à faire en sorte que les Core Web Vitals soient les métriques les plus pondérées du score Lighthouse.
Les pondérations mises à jour des métriques dans Lighthouse v8 sont disponibles dans le calculateur de notes.
L'implémentation du CLS de Lighthouse 8.0 inclut le fenêtrage et la contribution au CLS des sous-cadres. Avant la version 8.0, le CLS de Lighthouse n'incluait pas le CLS des sous-cadres dans le calcul des métriques, mais c'est désormais le cas. Juste pour confirmation, le CLS du champ mesuré par CrUX gère également le fenêtrage et les sous-cadres de la même manière.
Cependant, la principale différence entre le CLS de l'atelier et le CLS de champ est que la fenêtre d'observation du CLS de l'atelier se termine à "entièrement chargé" comme déterminé dans les conditions de l'atelier, alors que sur le terrain, la fenêtre d'observation s'étend sur la durée de vie de la page, en incluant l'activité post-chargement. Cela dit, l'ajustement du fenêtrage 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 PerformanceObserver suivant.
Vous pouvez aussi utiliser directement la bibliothèque JavaScript Web Vitals, qui a également été mise à jour avec ce changement.
Autres mises à jour
En plus des mises à jour de Cumulative Layout Shift, les mises à jour suivantes liées aux métriques ont également été apportées à nos outils Web:
- Nous mettons à jour 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. CrUX BigQuery sera mis à jour le 8 juin 2021.
- Dans CrUX, les seuils de tri de binning de First Contentful Paint ont été redéfinis sur : Bon : [0-1,8 s], Amélioration nécessaire : (1,8 s-3 s), Médiocre : [3 s-∞]
Conclusions
Ce changement devrait permettre une transition en douceur pour la plupart des sites. Nous vous encourageons à consulter les métriques Signaux Web et Optimiser le CLS pour obtenir des conseils et astuces sur la façon de mesurer et d'optimiser vos changements de mise en page. Comme toujours, n'hésitez pas à contacter le groupe web-vitals-feedback pour nous faire part de vos commentaires sur les métriques, ainsi que nos forums de commentaires dédiés aux outils pour Lighthouse et le rapport d'expérience utilisateur Chrome pour les problèmes liés aux outils. Santé !
Nous remercions Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose et Paul Ireland pour leurs commentaires.
Image héros par Barn Images / @barnimages sur Unsplash