Nouvelles métriques de performances, mises à jour de PageSpeed Insights et du rapport sur l'expérience utilisateur Chrome, et plus encore.
Lors du Chrome Developer Summit, Paul Irish et moi avons annoncé la mise à jour de Lighthouse : intégration de Lighthouse CI, nouvelle formule de score de performance, etc.. En plus des grandes nouveautés concernant Lighthouse, nous vous avons présenté les développements intéressants d'outils de performances, tels que de nouvelles métriques de performances, des mises à jour de PageSpeed Insights et du rapport sur l'expérience utilisateur Chrome (CrUX), ainsi que des insights issus de l'analyse de l'écosystème Web par Web Almanac.
Nouvelles métriques de performances
Mesurer les nuances de l'expérience utilisateur est essentiel pour quantifier son impact sur vos résultats, et suivre les améliorations et les régressions. Au fil du temps, les nouvelles métriques ont évolué pour tenir compte de ces nuances et combler les lacunes dans la mesure de l'expérience utilisateur. Les métriques les plus récentes sont les deux métriques de champ, Largest Contentful Paint (LCP) et Cumulative Layout Shift (CLS), qui sont incubées dans le W3C Web Performance Working Group, et une nouvelle métrique d'atelier : Total Blocking Time (TBT).
Largest Contentful Paint (LCP)
La métrique LCP (Largest Contentful Paint) indique le moment où le plus grand élément de contenu devient visible dans la fenêtre d'affichage.
Avant le Largest Contentful Paint, First Meaningful Paint (FMP) et Speed Index (SI) servaient à capturer l'expérience de chargement après le chargement initial. Toutefois, ces métriques sont complexes et ne permettent souvent pas d'identifier le moment où le contenu principal de la page est chargé. Des études ont montré que le simple fait de regarder à quel moment l'élément le plus grand d'une page est rendu représente mieux le moment où le contenu principal d'une page est chargé.
La nouvelle métrique "Largest Contentful Paint" sera bientôt disponible dans les rapports Lighthouse. En attendant, vous pouvez mesurer le LCP en JavaScript.
Temps de blocage total (TBT)
La métrique Total Blocking Time (TBT) mesure la durée totale entre le FCP (First Contentful Paint) et le Délai d'interaction (TTI), pendant lequel le thread principal a été bloqué suffisamment longtemps pour empêcher la réactivité aux entrées.
Une tâche est considérée comme longue si elle s'exécute sur le thread principal pendant plus de 50 millisecondes. Toute milliseconde au-delà est comptabilisée dans le temps de blocage de cette tâche.
Le temps de blocage total d'une page est la somme des temps de blocage de toutes les longues tâches qui se sont produites entre le FCP et le TTI.
Alors que la métrique "Time to Interactive" permet d'identifier quand le thread principal se calmera plus tard lors de la charge, "Total Blocking Time" vise à quantifier la charge du thread principal lors de la charge. De cette façon, le TTI et la technique de navigation à long terme se complètent et offrent un équilibre.
Cumulative Layout Shift (CLS)
Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle d'une page et quantifie la fréquence à laquelle les utilisateurs subissent des décalages de mise en page inattendus. Un déplacement inattendu de contenu peut être très frustrant. Cette nouvelle métrique vous aide à résoudre ce problème en mesurant la fréquence à laquelle il se produit pour vos utilisateurs.
Consultez le guide détaillé sur le Cumulative Layout Shift pour découvrir comment cette métrique est calculée et comment la mesurer.
La nouvelle formule de score de performance Lighthouse cessera bientôt de mettre l'accent sur FMP et FCI, et d'inclure les trois nouvelles métriques (LCP, TB et CLS), car elles permettent de mieux déterminer quand une page est utilisable.
Pour en savoir plus, consultez l'évaluation des performances Lighthouse et la nouvelle collection de métriques web.dev.
Seuils de données réelles (CrUX) ajustés dans PageSpeed Insights
Au cours de l'année écoulée, nous avons analysé les performances Web sur le terrain à l'aide de données de l'expérience utilisateur Chrome (CrUX). Grâce aux insights obtenus à partir de ces données, nous avons réévalué les seuils utilisés pour libeller un site Web comme étant "lent", "modéré" ou "rapide".
Pour obtenir une évaluation globale pour un site, PageSpeed Insights (PSI) utilise un certain centile de la distribution totale des données de champ comme nombre clé pour ce site. Les seuils précédents utilisés étaient le 90e centile pour First Contentful Paint et le 95e centile pour le First Contentful Paint (FID).
Par exemple, si un site présente une distribution FCP rapide de 50 %, modérée ou 20 % lente, le 90e centile du FCP se situe dans la section lente, ce qui ralentit le score global du champ.
Ce paramètre a été ajusté pour offrir une meilleure répartition globale sur les sites Web. La nouvelle répartition est la suivante:
| Métrique | Centile global | Rapide (ms) | Modérée (ms) | Lente (ms) |
| FCP | 75e centile | 1000 | 1000-3000 | 3 000 et plus |
| FID | 95e centile | 100 | 100 à 300 | plus de 300 |
Par exemple, si un site présente une distribution FCP rapide de 50 %, modérée à 30% et 20% lente, le FCP au 75e centile se trouve dans la section modérée, ce qui rend le score global du site modéré.
Redirections d'URL canoniques dans PageSpeed Insights
Pour vous permettre de mesurer l'expérience utilisateur le plus précisément possible, l'équipe PageSpeed Insights a ajouté une invite de nouvelle analyse à PSI. Pour les sites redirigés vers une nouvelle URL, vous êtes invité à générer à nouveau le rapport sur l'URL de destination afin d'obtenir un aperçu plus complet de vos performances réelles.
CrUX dans le nouveau rapport sur la vitesse de la Search Console
La Search Console a déployé son nouveau rapport sur la vitesse une semaine avant le Chrome Dev Summit. Il utilise les données du rapport d'expérience utilisateur Chrome pour aider les propriétaires de sites à détecter d'éventuels problèmes au niveau de l'expérience utilisateur. Le rapport sur la vitesse de chargement des pages répartit automatiquement des groupes d'URL similaires dans les ensembles "Rapide", "Modérée" et "Lente", et permet de hiérarchiser l'amélioration des performances pour des problèmes spécifiques.
Almanach du Web
Dans le discours d'ouverture d'ouverture, nous avons annoncé le lancement de Web Almanac, un projet annuel qui associe les statistiques et les tendances de l'état du Web à l'expertise de la communauté Web. 85 contributeurs, composés de développeurs Chrome et de la communauté Web, se sont portés volontaires pour participer à ce projet, qui analyse 20 aspects clés du Web concernant la conception, la mise à disposition et l'utilisation des sites. Commencez à explorer l'almanac Web pour en savoir plus sur l'état des performances, de JavaScript et du code tiers sur le Web.
En savoir plus
Pour en savoir plus sur les mises à jour des outils d'optimisation des performances du Chrome Developer Summit, regardez cette vidéo sur les évolutions des outils de vitesse: