Nouveautés de Lighthouse 6.0

New metrics, PerformanceEn el caso de las webs, el término Performance o rendimiento, se refiere a la velocidad de carga o a la potencia de cálculo de un servidor, es decir, a la velocidad a la que se transmiten los datos del servidor al cliente. Razones para una buena performance Una web que se carga lentamente, puede animar a los clientes potenciales a abandonar la página. Para asegurar una interacción fluida, se tiene Suite 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). Il alimente de nombreux Google
services, y compris web.dev/measure et 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 httpsHTTPS (protocolo de Transferencia de Hiper-Texto) es un protocolo que permite determinar una conexión segura entre el servidor y el cliente, que no puede ser interceptada por personas no autorizadas. En resumidas cuentas, es la versión segura de el http (Hyper Text Transfer Protocol) Cómo funciona Una conexión HTTP estándar en Internet puede ser fácilmente secuestrada por partes no autorizadas. El propósito de una conexión HTTPS es evitar esto: encriptar Suite://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 IndiceUn index o índice es generalmente un directorio en un orden específico que se usa con fines de orientación. En términos de motores de búsqueda, un índice es la lista de páginas web que es emitido por el motor de búsqueda en respuesta a una solicitud de búsqueda del usuario. Información general La lista que se muestra posteriormente de introducir una solicitud de búsqueda específica se llama SERPs (Search Engine Suite (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
• bugLos bugs son errores en los programas de PC que hacen que el software no funcione como debería. Por lo general, los bugs son causados por un error en el código que usualmente sólo es descubierto por los usuarios cuando usan el programa. Información general El nombre bug viene de la época en que se desarrollaron los primeros ordenadores. Las enormes máquinas calculadoras trabajaban con grandes circuitos, relés y items Suite 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é JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Suite

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 HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las Suite 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 bordConcepto de Dashboard¿Qué es un Dashboard?Un Dashboard, término inglés que se traduce normalmente como panel de instrumentos o salpicadero, es una gráfica que enseña los indicadores fundamentales implicados al momento de obtener una serie de objetivos determinados en un negocio. Su uso está orientado a ayudar al momento de realizar decisiones con las que mejorar la estrategia empresarial, poniendo de manifiesto datos útiles.Su elaboración es un tema que requiere de Suite 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 APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Suite, 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 scriptsConcepto de Scripts¿Qué son los Scripts?Los Scripts son fragmentos de código que se usan para dar forma a herramientas tanto en Internet como en el sector de la informática en general. Son una parte crucial del software, puesto que se trata exactamente del código que conforma a una aplicación en su totalidad o a una de sus funciones, como además el que puedes hallar explorando cómo está hecha una web.Desde Suite, images, or cssConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a Suite) 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 &ampConcepto de AMP¿Qué es el AMP o Accelerated Mobile Pages?El AMP, abreviatura de Accelerated Mobile Pages, es una propuesta que empezó a tomar forma en el año 2016 con la finalidad de mejorar la usabilidad, lectura y, en general, la experiencia de los usuarios de teléfono celular dentro de cualquier página web. Emprendida por Google con un aperturismo total (es de código abierto), lleva en activo desde entonces para facilitar Suite;& 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.