Nouveautés de Lighthouse 6.0

New metrics, Performance score update, new audits, and more.

19 mai 2020

Aujourd'hui, nous sortons Lighthouse 6.0!

Phare est un outil d'audit de site Web automatisé qui
aide les développeurs avec des opportunités et des diagnostics pour améliorer l'expérience utilisateur de leurs sites.
Il est disponible dans Chrome DevTools, npm (en tant que module Node et CLI) ou en tant qu'extension de navigateur (dans
Chrome et
Firefox). It powers many Google
services, including la toile.dev/measure and PageSpeed
Connaissances.

Lighthouse 6.0 est disponible immédiatement sur NPM et en Chrome
Canari. D'autres services Google qui tirent parti de Lighthouse
obtenez la mise à jour d'ici la fin du mois. Il atterrira dans Chrome Stable dans Chrome 84 (mi-juillet).

Pour essayer l'interface de ligne de commande Lighthouse Node, utilisez les commandes suivantes:

npm installer -g lighthouse
lighthouse https://www.example.com --view

Cette version de Lighthouse s'accompagne d'un grand nombre de modifications
répertorié dans le changelog 6.0. Nous couvrirons
les points forts de cet article.

De nouvelles métriques

Lighthouse 6.0 introduit trois nouvelles mesures dans le rapport. Deux de ces nouvelles mesures - La plus grande
Contentful Paint (LCP) et Cumulative Layout Shift (CLS) - sont des implémentations de laboratoire de Core Web
Vitals.

La plus grande peinture de contenu (LCP)

La plus grande peinture de contenu (LCP) est une mesure de la charge perçue
vivre. Il marque le point lors du chargement de la page lorsque le contenu principal - ou «le plus grand» - a été chargé et
est visible par l'utilisateur. LCP est un complément important à First Contentful Paint (FCP) qui
capture le tout début de l'expérience de chargement. LCP indique aux développeurs comment
rapidement un utilisateur est en mesure de voir le contenu d'une page. Un score LCP inférieur à 2,5 secondes est
considéré comme «bon».

Pour plus d'informations, regardez cette plongée approfondie sur LCP par Paul Irish.

Décalage cumulatif de la disposition (CLS)

Le décalage de mise en page cumulatif (CLS) est une mesure de la stabilité visuelle. Article
quantifie à quel point le contenu d'une page se déplace visuellement. Un score CLS faible est un signal
les développeurs que leurs utilisateurs ne subissent pas de changements de contenu indus; un score CLS inférieur à 0,10 est
considéré comme «bon».

CLS dans un environnement de laboratoire est mesuré jusqu'à la fin du chargement de la page. Alors que sur le terrain, vous pouvez
mesurer CLS jusqu'à la première interaction de l'utilisateur ou en incluant toutes les entrées de l'utilisateur.

Pour plus d'informations, regardez cette plongée approfondie sur CLS par Annie Sullivan.

Temps de blocage total (TBT)

Le temps de blocage total (TBT) quantifie la réactivité de la charge, en mesurant
durée totale pendant laquelle le thread principal a été bloqué suffisamment longtemps pour empêcher la réactivité des entrées.
TBT mesure le temps total entre First Contentful Paint (FCP) et Time to Interactive
(TTI). Il s'agit d'une métrique compagnon du TTI et apporte plus de nuance à la quantification de l'activité principale des threads
qui bloque la capacité d'un utilisateur à interagir avec votre page.

De plus, TBT est bien corrélé avec la métrique de terrain First Input Delay
(FID), qui est un Core Web Vital.

Mise à jour du score de performance

Le score de performance dans Lighthouse est calculé à partir d'un
mélange pondéré de plusieurs mesures pour résumer la vitesse d'une page. La formule de score de performance 6.0
suit.

Phase	Nom de la métrique	Poids métrique
Tôt (15%)	First Contentful Paint (FCP)	15%
Milieu (40%)	Speed Indice (SI)	15%
	La plus grande peinture de contenu (LCP)	25%
Tardif (15%)	Time To Interactive (TTI)	15%
Filetage principal (25%)	Temps de blocage total (TBT)	25%
Prévisibilité (5%)	Décalage cumulatif de la disposition (CLS)	5%

Alors que trois nouvelles métriques ont été ajoutées, trois anciennes ont été supprimées: Première peinture significative,
Premier processeur inactif et FID potentiel maximal. Les pondérations des statistiques restantes ont été modifiées pour
mettre l'accent sur l'interactivité principale des threads et la prévisibilité de la mise en page.

À titre de comparaison, voici le score de la version 5:

Phase	Nom de la métrique	Poids
Tôt (23%)	First Contentful Paint (FCP)	23%
Milieu (34%)	Indice de vitesse (SI)	27%
	Première peinture significative (FMP)	7%
Terminé (46%)	Temps d'interactivité (TTI)	33%
	Premier processeur inactif (FCI)	13%
Fil principal	FID potentiel maximum	0%

Quelques faits saillants des changements de score entre les versions 5 et 6 de Lighthouse:

• Le poids du TTI a été réduit de 33% à 15%. C'était en réponse directe à l'utilisateur
  des commentaires sur la variabilité TTI, ainsi que sur les incohérences dans les optimisations métriques conduisant à
  améliorations de l'expérience utilisateur. TTI est toujours un signal utile lorsqu'une page est entièrement
  interactif, mais avec le TBT comme
  complément-la variabilité est réduite.
  Avec ce changement de score, nous espérons que les développeurs seront plus efficacement encouragés à optimiser pour
  l'interactivité de l'utilisateur.
• Le poids du FCP a été réduit de 23% à 15%. Mesure uniquement lorsque le premier pixel est
  peint (FCP) ne nous a pas donné une image complète. Combiner cela avec la mesure lorsque les utilisateurs sont capables
  pour voir ce qui les intéresse le plus (LCP) reflète mieux l'expérience de chargement.
• FID potentiel maximum est obsolète. Il n'apparaît plus dans le rapport, mais est
  toujours disponible dans le JSON. Il est maintenant recommandé de se pencher sur le TBT pour quantifier votre interactivité
  au lieu de mpFID.
• La première peinture significative est obsolète. Cette métrique était trop variable et n'était pas viable
  chemin vers la normalisation car la mise en œuvre est spécifique aux internes de rendu Chrome. Pendant que
  certaines équipes trouvent que le timing FMP en vaut la peine sur leur site, la métrique ne recevra pas
  améliorations supplémentaires.
• Le premier processeur inactif est obsolète car ce n'est pas assez distinct du TTI. TBT et TTI
  sont désormais les indicateurs incontournables de l'interactivité.
• Le poids de CLS est relativement faible, même si nous prévoyons de l'augmenter dans une future version majeure.

Changements dans les scores

Comment ces changements affectent-ils les scores des sites réels? Nous avons publié un
Analyse
des changements de score à l'aide de deux ensembles de données: a ensemble général de
des sites et un
ensemble de sites statiques
construit avec Onze. En résumé, ~ 20% des sites voient nettement plus
scores, ~ 30% n'ont pratiquement aucun changement, et ~ 50% voient une diminution d'au moins cinq points.

Les changements de score peuvent être décomposés en trois éléments principaux:

• noter les changements de poids
• bug fixes to underlying metric implementations
• changements de la courbe de score individuelle

Les changements de poids du score et l'introduction de trois nouvelles mesures ont généré une majorité du score global
changements. De nouvelles mesures que les développeurs n'ont pas encore optimisées pour avoir un poids significatif dans la version 6
score de performance. Alors que le score de performance moyen du corpus de test dans la version 5 était d'environ 50, les scores moyens sur les nouvelles métriques Temps de blocage total et la plus grande peinture de contenu étaient d'environ 30. Ensemble, ces deux métriques représentent 50% du poids dans les performances de la version 6 de Lighthouse. score, donc naturellement un grand pourcentage de sites a vu des baisses.

Les corrections de bogues au calcul de la métrique sous-jacente peuvent entraîner des scores différents. Cela affecte
relativement peu de sites mais peuvent avoir un impact considérable dans certaines situations. Au total, environ 8% de sites
ont connu une amélioration du score en raison des changements d'implémentation des métriques et environ 4% de sites ont vu un score
diminution en raison des changements de mise en œuvre des mesures. Environ 88% de sites n'ont pas été affectés par ces correctifs.

Les changements de la courbe de score individuel ont également eu un impact sur les changements de score globaux, bien que très légèrement. Nous
s'assurer périodiquement que la courbe de score s'aligne avec les métriques observées dans le HTTPArchive
base de données. À l'exclusion des sites affectés par des changements majeurs de mise en œuvre, mineurs
les ajustements de la courbe de score pour les mesures individuelles ont amélioré les scores d'environ 3% des sites et
diminué les scores d'environ 4% des sites. Environ 93% de sites n'ont pas été affectés par ce changement.

Calculateur de score

Nous avons publié un calculatrice de score aider
vous explorez la notation des performances. Le calculateur vous donne également une comparaison entre la version 5 de Lighthouse et
6 scores. Lorsque vous exécutez un audit avec Lighthouse 6.0, le rapport est accompagné d'un lien vers la calculatrice
avec vos résultats renseignés.

Nouveaux audits

Inutilisé JavaScript

Nous tirons parti Code DevTools
couverture dans un nouvel audit: Inutilisé
JavaScript.

Cet audit n'est pas entièrement nouveau: c'était ajouté dans
mi-2017, mais
en raison de la surcharge de performance, il a été désactivé par défaut pour que le phare reste aussi rapide que
possible. La collecte de ces données de couverture est maintenant beaucoup plus efficace, nous nous sentons donc à l'aise d'activer
par défaut.

Audits d'accessibilité

Lighthouse utilise le merveilleux noyau de hache bibliothèque pour alimenter le
catégorie d'accessibilité. Dans Lighthouse 6.0, nous avons ajouté les audits suivants:

Icône masquable

Icônes masquables est un nouveau format d'icône qui crée des icônes pour votre PWA
ont fière allure sur tous les types d'appareils. Pour que votre PWA soit aussi belle que possible, nous avons introduit
un nouvel audit pour vérifier si votre manifest.json prend en charge ce nouveau format.

Déclaration du jeu de caractères

L'élément meta charset déclare quel encodage de caractères doit être utilisé
to interpret an HTML document. If this element is missing, or if it is declared late in the
document, les navigateurs utilisent un certain nombre d'heuristiques pour deviner quel encodage doit être utilisé. Si un
le navigateur ne devine pas correctement, et un élément meta charset tardif est trouvé, l'analyseur lance généralement
tout le travail effectué jusqu'à présent et recommence, conduisant à de mauvaises expériences pour l'utilisateur. Cette nouvelle
audit vérifie que la page a un encodage de caractères valide et qu'elle est définie au début et au début.

Phare CI

Au CDS en novembre dernier
nous avons annoncé Phare CI, le nœud open source
CLI et serveur qui suit les résultats de Lighthouse à chaque validation dans votre intégration continue
pipeline, et nous avons parcouru un long chemin depuis la sortie alpha. Lighthouse CI a maintenant un support
pour de nombreux fournisseurs de CI, notamment Travis, Circle, GitLab et Github Actions. Prêt à déployer
images de docker faire de la configuration un
breeze, and a comprehensive tableau de bord redesign now reveals trends across every category and metric
dans Lighthouse pour une analyse détaillée.

Commencez à utiliser Lighthouse CI sur votre projet dès aujourd'hui en suivant notre
Guide de Démarrage.

Nous avons renommé le Audits panneau au Phare panneau. Assez dit!

En fonction de la taille de votre fenêtre DevTools, le panneau se trouve probablement derrière le » bouton. Vous pouvez faire glisser
l'onglet pour modifier l'ordre.

Pour révéler rapidement le panneau avec le Commander
menu:

1. presse Ctrl + Maj + J (ou alors Commande + Option + J sur Mac) pour ouvrir DevTools.
2. presse Contrôle + Maj + P (ou alors Commande + Maj + P sur Mac) à
   Ouvrez le Commander menu.
3. Commencez à taper «Phare».
4. presse Entrer.

Émulation mobile

Lighthouse suit un état d'esprit axé sur le mobile. Les problèmes de performances sont plus apparents sous
conditions mobiles, mais les développeurs ne testent souvent pas dans ces conditions. C'est pourquoi la valeur par défaut
La configuration dans Lighthouse applique une émulation mobile. L'émulation se compose de:

• Conditions de réseau et CPU lentes simulées (via un moteur de simulation appelé
  Lanterne).
• Émulation d'écran de l'appareil (la même que celle trouvée dans Chrome DevTools).

Depuis le début, Lighthouse utilise le Nexus 5X comme appareil de référence. Ces dernières années, la plupart
les ingénieurs de performance utilisent le Moto G4 à des fins de test. Maintenant Lighthouse emboîte le pas
et a changé son appareil de référence en Moto G4. En pratique, ce changement n'est pas très perceptible,
mais voici tous les changements détectables par une page Web:

• La taille de l'écran passe de 412 × 660 px à 360 × 640 px.
• La chaîne de l'agent utilisateur est légèrement modifiée, la partie de l'appareil qui était auparavant Nexus 5 Build / MRA58N
  sera maintenant Moto G (4).

À partir de Chrome 81, Moto G4 est également disponible dans la liste d'émulation d'appareils Chrome DevTools.

Extension de navigateur

le
Extension Chrome pour Lighthouse
a été un moyen pratique de gérer Lighthouse localement. Malheureusement, c'était compliqué à supporter.
Nous l'avons ressenti parce que Chrome DevTools Phare panel est une meilleure expérience (le rapport
s'intègre avec d'autres panneaux), nous pourrions réduire nos frais généraux d'ingénierie en simplifiant Chrome
extension.

Au lieu d'exécuter Lighthouse localement, l'extension utilise désormais le PageSpeed Insights
API. Nous reconnaissons que ce sera
ne suffira pas à remplacer certains de nos utilisateurs. Voici les principales différences:

• PageSpeed Insights ne peut pas auditer les sites Web non publics, car il est exécuté via une télécommande
  serveur et non votre instance Chrome locale. Si vous devez auditer un site Web non public, utilisez
  les DevTools Phare panneau ou l'interface de ligne de commande Node.
• Il n'est pas garanti que PageSpeed Insights utilise la dernière version de Lighthouse. Si vous souhaitez utiliser
  la dernière version, utilisez le Node CLI. L'extension de navigateur recevra la mise à jour environ 1 à 2 semaines après la publication.
• PageSpeed Insights is a Google API, using it constitutes accepting the Google API Terms of
  Un service. Si vous ne souhaitez pas ou ne pouvez pas accepter les conditions d'utilisation, utilisez les DevTools Phare panneau,
  ou le Node CLI.

La bonne nouvelle est que la simplification de l'histoire du produit nous a permis de nous concentrer sur d'autres techniques
problèmes. En conséquence, nous avons publié le Phare Firefox
extension!

Les budgets

Lighthouse 5.0 a introduit des budgets de performance qui
prise en charge de l'ajout de seuils pour
combien de chaque type de ressource
(such as scripts, images, or css) a page can serve.

Lighthouse 6.0 ajoute
prise en charge des mesures de budgétisation,
vous pouvez maintenant définir des seuils pour des métriques spécifiques telles que FCP. Pour l'instant, les budgets ne sont disponibles que
au Node CLI et Lighthouse CI.

Liens d'emplacement source

Certains des problèmes que Lighthouse trouve sur une page peuvent être attribués à une ligne spécifique de
le code source et le rapport indiqueront le fichier et la ligne exacts qui sont pertinents. Pour rendre cela facile
explorer dans DevTools, cliquer sur les emplacements spécifiés dans le rapport ouvrira les fichiers concernés
dans le Sources panneau.

Sur l'horizon

Lighthouse a commencé à expérimenter la collecte de cartes sources pour alimenter de nouvelles fonctionnalités, telles que:

• Détecter les modules en double dans les bundles JavaScript.
• Détecter les polyfills excessifs ou les transformations dans le code envoyé aux navigateurs modernes.
• Augmenter l'audit JavaScript inutilisé pour fournir une granularité au niveau du module.
• Visualisations de Treemap mettant en évidence les modules qui nécessitent une action.
• Affichage du code source d'origine pour les éléments de rapport avec un "emplacement source".

Ces fonctionnalités seront activées par défaut dans une future version de Lighthouse. Pour l'instant, vous pouvez voir
Audits expérimentaux de Lighthouse avec l'indicateur CLI suivant:

phare https://web.dev --view --preset expérimental

Merci!

Nous vous remercions d'utiliser Lighthouse et de nous faire part de vos commentaires. Vos commentaires nous aident à améliorer Lighthouse
et nous espérons que Lighthouse 6.0 vous permettra d'améliorer plus facilement les performances de votre
sites Internet.

Que pouvez-vous faire ensuite?

• Ouvrez Chrome Canary et donnez au Phare panneau pour aller.
• Utilisez le Node CLI: npm install -g lighthouse && lighthouse https://yoursite.com --view.
• Obtenir Phare CI courir avec
  votre projet.
• Consultez la documentation d'audit de Lighthouse.
• Amusez-vous à améliorer le Web!

Nous sommes passionnés par le Web et nous aimons travailler avec la communauté des développeurs pour créer des outils pour
aider à améliorer le Web. Lighthouse est un projet open source et nous remercions tous les
contributeurs aidant à tout, des corrections de faute de frappe aux refactors de documentation en passant par les tout nouveaux
audits.
Intéressé à contribuer?
Balancer par le Repo GitHub Lighthouse.