Évolution des outils de vitesse: temps forts du Chrome Developer Summit 2019

Nouvelles métriques de performances, mises à jour de PageSpeed Insights et du rapport sur l'expérience utilisateur de Chrome (CrUX), etc.

Elizabeth Sweeny
Elizabeth Sweeny

Lors du Chrome Developer Summit, Paul Irish et moi-même avons annoncé des mises à jour de Lighthouse, y compris la validation continue Lighthouse, une nouvelle formule de score de performances et plus encore. En plus des grandes nouveautés de Lighthouse, nous avons présenté des développements d'outils de performances passionnants, y compris 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 l'Almanach Web.

Nouvelles métriques de performances

Mesurer les nuances de l'expérience d'un utilisateur est essentiel pour quantifier son impact sur votre résultat net et suivre les améliorations et les régressions. Au fil du temps, de nouvelles métriques ont évolué pour capturer ces nuances et combler les lacunes dans la mesure de l'expérience utilisateur. Deux métriques sur le terrain (LCP (Largest Contentful Paint) et CLS (Cumulative Layout Shift)) sont en cours d'incubation dans le groupe de travail sur les performances Web du W3C, et une nouvelle métrique de laboratoire (TBT (Total Blocking Time)) vient d'être ajoutée.

Largest Contentful Paint (LCP)

La métrique Largest Contentful Paint (LCP) indique le moment où le plus grand élément de contenu devient visible dans la fenêtre d'affichage.

Avant Largest Contentful Paint, First Meaningful Paint (FMP) et Speed Index (SI) permettaient de capturer l'expérience de chargement après le premier rendu, mais ces métriques sont complexes et n'identifient souvent pas quand le contenu principal de la page a été chargé. Des recherches ont montré qu'il est plus pertinent de regarder simplement le moment où le plus grand élément de la page est affiché pour déterminer le moment où le contenu principal d'une page est chargé.

La nouvelle métrique LCP (Largest Contentful Paint) sera bientôt disponible dans les rapports Lighthouse. En attendant, vous pouvez mesurer le LCP en JavaScript.

Total Blocking Time (TBT)

La métrique Total Blocking Time (TBT) mesure la durée totale entre le First Contentful Paint (FCP) et le Time to Interactive (TTI), où 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. Chaque milliseconde au-delà est comptabilisée dans le temps de blocage de cette tâche.

Diagramme représentant une tâche de 150 millisecondes avec un temps de blocage de 100 millisecondes.

Le temps de blocage total d'une page correspond à la somme des temps de blocage de toutes les tâches longues qui se sont produites entre le FCP et le TTI.

Diagramme représentant cinq tâches avec 60 millisecondes de temps de blocage total sur 270 millisecondes de temps de thread principal.

Bien que le temps de chargement interactif soit efficace pour identifier le moment où le thread principal se calme plus tard lors de la charge, la durée de blocage totale vise à quantifier la tension du thread principal tout au long de la charge. De cette façon, le TTI et le TBT se complètent et offrent un équilibre.

Cumulative Layout Shift (CLS)

Le CLS (Cumulative Layout Shift) mesure la stabilité visuelle d'une page et quantifie la fréquence à laquelle les utilisateurs rencontrent des changements de mise en page inattendus. Le déplacement inattendu de contenus 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.

Enregistreur d'écran illustrant les effets négatifs potentiels d'une mise en page instable sur les utilisateurs.

Consultez le guide détaillé sur le décalage de mise en page cumulé pour découvrir comment il est calculé et comment le mesurer.

La nouvelle formule du score de performances Lighthouse mettra bientôt moins l'accent sur le FMP et le FCI, et inclura les trois nouvelles métriques (LCP, TBT et CLS), car elles permettent de mieux déterminer quand une page est utilisable.

Dans Lighthouse v6, First Contentful Paint, Speed Index et Largest Contentful Paint sont les principales métriques de performances de chargement. Time To Interactive, First Input Delay, Max Potential First Input Delay et Total Blocking Time sont les principales métriques d'interactivité. Cumulative Layout Shift est la principale métrique de prévisibilité.

Pour en savoir plus, consultez la page Évaluation des performances Lighthouse et la nouvelle collection de métriques web.dev.

Ajustement des seuils des données de champ (CrUX) dans PageSpeed Insights

Au cours de l'année écoulée, nous avons analysé les performances Web sur le terrain à l'aide des données du rapport d'expérience utilisateur Chrome (CrUX). Grâce aux insights issus de ces données, nous avons réexaminé les seuils que nous utilisons pour classer un site Web comme "lent", "modéré" ou "rapide" en termes de performances sur le terrain.

Deux graphiques à barres montrant la distribution des vitesses lente, rapide et modérée pour FCP et FID.

Pour obtenir une évaluation globale d'un site, PageSpeed Insights (PSI) utilise un certain centile de la distribution totale des données sur le terrain comme nombre d'or pour ce site. Les seuils précédents utilisés étaient le 90e centile pour le premier rendu de contenu et le 95e centile pour le délai de première entrée (FID).

Par exemple, si la distribution du FCP d'un site est de 50% rapide, 30% modérée et 20 % lente, le FCP du 90e centile se trouve dans la section "Lent", ce qui rend le score global du champ pour le site lent.

Ce paramètre a été ajusté pour obtenir une meilleure répartition globale sur les sites Web. Voici la nouvelle répartition:

Métrique Centile global Rapide (ms) Modérée (ms) Lent (ms)
FCP 75e centile 1000 1000-3000 Plus de 3 000
FID 95e centile 100 100 à 300 plus de 300

Par exemple, si un site présente une distribution FCP de 50% rapide, 30% modérée et 20% lente, le FCP du 75e centile se situe dans la section "modéré", ce qui fait que le score global du champ pour le site est modéré.

Redirections d'URL canoniques dans PageSpeed Insights

Pour vous permettre de mesurer l'expérience utilisateur aussi précisément que possible, l'équipe PageSpeed Insights a ajouté une invite de réanalyse à PSI. Pour les sites redirigés vers une nouvelle URL, vous êtes invité à relancer le rapport sur l'URL de destination afin d'obtenir une vue plus complète de vos performances réelles.

Interface utilisateur de PSI affichant la redirection d'URL et le bouton "Réanalyser"

CrUX dans le nouveau rapport sur la vitesse de chargement des pages 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 à identifier les problèmes potentiels d'expérience utilisateur. Le rapport sur la vitesse de chargement des pages classe automatiquement les groupes d'URL similaires en fonction de leur vitesse : rapide, moyenne ou lente, et aide à prioriser les améliorations de performances pour des problèmes spécifiques.

Rapport sur la vitesse de la Search Console

Almanach Web

Dion Almaer présente Web Almanac lors du CDS 2019.

Lors de la keynote d'ouverture, nous avons annoncé le lancement de l'Almanach Web, un projet annuel qui associe les statistiques et les tendances sur l'état du Web à l'expertise de la communauté Web. 85 contributeurs, composés de développeurs Chrome et de membres de la communauté Web, se sont portés volontaires pour travailler sur ce projet, qui analyse 20 aspects essentiels du Web concernant la façon dont les sites sont créés, diffusés et utilisés. Commencez à explorer l'Almanach 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 de performances du Chrome Developer Summit, regardez la conférence sur l'évolution des outils de vitesse: