Lighthouse est un outil automatisé Open Source permettant d'améliorer la qualité de vos applications Web. Vous pouvez l'installer en tant qu'extension Chrome ou l'exécuter en tant qu'outil de ligne de commande Node. Lorsque vous fournissez une URL à Lighthouse, il exécute une série de tests sur la page, puis génère un rapport expliquant ses performances et indiquant les points à améliorer.
Aujourd'hui, nous sommes heureux d'annoncer la version 1.5 de Lighthouse, une version très importante qui compte plus de 128 publications. Lighthouse 1.5 inclut de nombreuses nouvelles fonctionnalités importantes, des audits et 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.
Nouveaux audits
L'audit d'utilisation CSS indique le nombre de règles de style inutilisées dans votre page et les économies de temps et de coûts qu'entraîne leur suppression:
L'audit des images optimisées signale les images non optimisées et les économies de temps et de coûts qu'apporte leur optimisation:
L'audit des images responsives signale les images trop grandes et les économies de temps et de coûts qu'il est possible de réaliser en les dimensionnant correctement pour l'appareil donné:
L'audit relatif aux abandons et aux interventions répertorie les avertissements de la console de Chrome si votre page utilise des API ou des fonctionnalités obsolètes qui ont subi des interventions:
Signaler des changements
Comme vous l'avez vu, nous nous sommes efforcés de rendre le rapport moins encombré visuellement en ajoutant des données tabulaires, en masquant le texte d'aide superflu et en ajoutant de nouvelles fonctionnalités pour faciliter la navigation dans les données.
Paramètres d'émulation
Il est facile d'oublier quels paramètres de limitation et d'émulation ont été utilisés pour une exécution particulière de Lighthouse. Les rapports Lighthouse incluent désormais les paramètres d'émulation d'exécution utilisés pour créer le rapport, une demande de fonctionnalité de longue durée:
Données de trace plus utiles
Les métriques Lighthouse telles que le premier significatif peint, le délai avant interactivité, etc. sont simulées à mesure que le temps utilisateur est mesurée et injectées dans les données de trace enregistrées avec l'indicateur --save-assets.
Si vous utilisez l'indicateur --save-assets, vous pouvez maintenant déposer la trace dans les outils de développement ou l'ouvrir dans la visionneuse de la chronologie des outils de développement.
Vous pourrez voir vos métriques clés en contexte avec la trace complète du chargement de la page.
Lecteur Lighthouse
Dans les rapports HTML, vous remarquerez un nouveau bouton avec des options permettant d'exporter le rapport dans différents formats. L'une de ces options est "Ouvrir dans le lecteur". Cliquez sur ce bouton pour envoyer le rapport au lecteur en ligne, où vous pouvez le partager davantage avec les utilisateurs de GitHub.
En arrière-plan, le rôle "Lecteur" obtient votre autorisation via OAuth pour créer un gist gist GitHub et y enregistre le rapport. Comme il s'agit d'un Gist, vous conservez un contrôle total sur le partage du rapport et pouvez le supprimer à tout moment. Vous pouvez révoquer l'autorisation du lecteur à créer des informations générales dans vos paramètres GitHub.
Test de performances
La première version du projet de test de performance arrive dans la version 1.5.0. Cela vous permet de tester les performances de chargement de vos pages, en testant de manière interactive les effets du blocage ou du retard des éléments dans votre chemin critique pendant le développement.
Lorsque Lighthouse est exécuté avec l'indicateur --interactive, un rapport spécial est généré. Il permet la sélection interactive de ressources de page coûteuses. Le serveur de test réexécute ensuite Lighthouse sur cette page en bloquant ces ressources.
En savoir plus sur les tests de performances dans Lighthouse.
Nouvelle documentation
Enfin, nous avons modernisé la documentation disponible à l'adresse developers.google.com/web/tools/lighthouse/ et ajouté de nouvelles références d'audit.
C'est tout pour le moment !
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, soumettre des demandes de fonctionnalités ou réfléchir à des idées sur ce que vous aimeriez voir ensuite.