Lighthouse est un outil automatisé Open Source qui permet 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 un barrage de tests sur la page, puis génère un rapport expliquant les performances de la page et indiquant les axes d'amélioration.
Aujourd'hui, nous avons le plaisir d'annoncer la version 1.5 de Lighthouse, une version majeure avec plus de 128 PR. Lighthouse 1.5 inclut de nombreuses nouvelles fonctionnalités, 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 sur le Chrome Web Store.
Nouveaux audits
L'audit d'utilisation du CSS indique le nombre de règles de style inutilisées sur votre page et les économies de coûts/temps qu'elles représentent:
L'audit des images optimisées indique les images non optimisées et les économies de coûts/temps qu'elles représentent:
L'audit des images responsives signale les images trop grandes et les économies potentielles en termes de coûts et de temps qu'il est possible de réaliser en les dimensionnant correctement pour l'appareil donné:
L'audit des obsolescences et des interventions liste les avertissements de la console de Chrome si votre page utilise des API ou des fonctionnalités obsolètes qui ont des interventions:
Signaler des changements
Comme vous l'avez vu, nous nous sommes attachés à rendre le rapport moins encombré visuellement en ajoutant des données tabulaires, en masquant le texte d'aide inutile et en ajoutant de nouvelles fonctionnalités pour faciliter la navigation dans les données.
Paramètres d'émulation
Il est facile d'oublier les paramètres de limitation et d'émulation utilisés pour une exécution Lighthouse spécifique. 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 date:
Données de trace plus utiles
Les métriques Lighthouse telles que "First meaningful paint", "Time to Interactive", etc. sont simulées en tant que mesures de timing utilisateur et réinjectées dans les données de trace enregistrées avec l'indicateur --save-assets.
Si vous utilisez l'indicateur --save-assets, vous pouvez désormais placer la trace dans DevTools ou l'ouvrir dans le Visualiseur de chronologie DevTools.
Vous pourrez voir vos métriques clés dans leur contexte avec la trace complète 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 pourrez le partager avec les utilisateurs de GitHub.
En coulisses, le lecteur obtient votre autorisation via OAuth pour créer un gist secret GitHub et y enregistrer le rapport. Comme il s'agit de votre Gist, vous gardez le contrôle total sur le partage du rapport et vous pouvez le supprimer à tout moment. Vous pouvez révoquer l'autorisation du lecteur de créer des gists dans vos paramètres GitHub.
Test de performances
La première version du projet Test de performances est disponible dans la version 1.5.0. Vous pouvez ainsi tester les performances de chargement de votre page, en testant de manière interactive les effets du blocage ou du retard des composants de votre chemin critique pendant le développement.
Lorsque Lighthouse est exécuté avec l'indicateur --interactive, un rapport spécial est généré qui permet de sélectionner de manière interactive les ressources de page coûteuses. Le serveur de test relance ensuite Lighthouse sur cette page avec ces ressources bloquées.
En savoir plus sur le test de performances dans Lighthouse
Nouvelle documentation
Enfin, nous avons modernisé la documentation sur 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, envoyer des demandes de fonctionnalités ou réfléchir à des idées pour de nouvelles fonctionnalités.