Améliorer le Web avec Lighthouse

Depuis la conférence Google I/O, nous avons travaillé dur pour que Lighthouse soit l'outil idéal pour créer des progressive web apps de qualité:

Aujourd'hui, nous sommes heureux d'annoncer le lancement de la version 1.3 de Lighthouse. Lighthouse 1.3 comprend un grand nombre de nouvelles fonctionnalités et d'audits importants, ainsi que les corrections de bugs habituelles. Vous pouvez l'installer à partir de npm (npm i -g lighthouse) ou télécharger l'extension à partir du Chrome Web Store.

Quoi de neuf ?

Nouvelle interface

Si vous avez utilisé une version antérieure de Lighthouse, vous avez peut-être remarqué que le logo est nouveau. Le rapport HTML et l'extension Chrome ont également été entièrement actualisés, avec une présentation plus claire de l'évaluation et une plus grande cohérence des résultats d'audit. Nous avons également ajouté des informations de débogage utiles lorsque vous échouez à un test, ainsi que des pointeurs vers les solutions de contournement recommandées.

Rapport Lighthouse

Nouvelles bonnes pratiques

À ce jour, Lighthouse s'est concentré sur les métriques de performances et la qualité des PWA. Cependant, l'un des objectifs fondamentaux du projet est de fournir un guide pour tout le développement Web. Cela inclut des conseils sur les bonnes pratiques générales, des conseils sur les performances et l'accessibilité, ainsi qu'une aide de bout en bout pour créer des applications de qualité.

"Do Better Web" est une initiative du projet Lighthouse visant à aider les développeurs à améliorer leurs performances sur le Web. En d'autres termes, aidez-les à moderniser et optimiser leurs applications Web. Souvent, les développeurs Web utilisent des pratiques obsolètes, des anti-modèles ou rencontrent des problèmes de performances connus sans s'en rendre compte. Par exemple, il est largement connu que les animations basées sur JavaScript doivent être effectuées avec requestAnimationFrame() au lieu de setInterval(). Toutefois, si le développeur ne connaît pas la nouvelle API, son application Web en pâtit inutilement.

Lighthouse 1.3 comprend plus de 20 nouvelles bonnes pratiques, allant des conseils pour moderniser les fonctionnalités CSS et JavaScript à des recommandations d'amélioration des performances telles que "Réduire le nombre d'éléments qui bloquent l'affichage" et "Utiliser des écouteurs d'événements passifs pour améliorer les performances de défilement".

Appliquez de meilleures bonnes pratiques sur le Web.

Nous ajouterons d'autres recommandations au fil du temps. Si vous avez des suggestions de bonnes pratiques ou souhaitez nous aider à rédiger un audit, signalez un problème sur GitHub.

Visionneuse de rapports

Enfin, nous sommes heureux d'annoncer le lancement d'une nouvelle visionneuse Web pour les résultats Lighthouse. Accédez à googlechrome.github.io/lighthouse/viewer, glissez-déposez la sortie d'une exécution Lighthouse (ou cliquez pour importer votre fichier), et le tour est joué. dans le rapport HTML Lighthouse "Insta".

Lecteur de rapports.
Lecteur de rapports

Le lecteur Lighthouse vous permet également de partager des rapports avec d'autres utilisateurs. Cliquez sur l'icône de partage pour vous connecter à GitHub. Les rapports sont conservés sous forme secrète dans votre compte afin que vous puissiez facilement les supprimer ou les mettre à jour ultérieurement. L'utilisation de GitHub pour le stockage de données vous permet également de contrôler les versions sans frais.

Architecture du lecteur
Architecture du lecteur

Le lecteur Lighthouse peut actualiser les rapports existants en ajoutant ?gist=GIST_ID à l'URL:

Architecture du lecteur 2.
Architecture du lecteur 2

Pour en savoir plus sur les dernières nouveautés de Lighthouse, consultez les notes de version complètes sur GitHub. Comme toujours, contactez-nous pour signaler des bugs, nous envoyer des demandes de fonctionnalités ou réfléchir à des idées sur ce que vous aimeriez voir ensuite.