Nouveautés de Lighthouse 9.0

Brendan Kenny
Brendan Kenny

Lighthouse est un outil d'audit de sites Web qui aide les développeurs à identifier des opportunités et des diagnostics pour améliorer l'expérience utilisateur sur leurs sites.

Lighthouse 9.0 est disponible immédiatement dans la ligne de commande, dans Chrome Canary et dans PageSpeed Insights. Elle sera disponible dans Chrome stable dans Chrome 98.

Modifications apportées à l'API

La plupart des utilisateurs ne devraient pas rencontrer de modifications qui perturbent leur workflow avec cette version. Si vous exécutez des audits Lighthouse personnalisés ou utilisez des outils qui dépendent de détails profonds dans le fichier JSON du rapport Lighthouse, vous devez être conscient de certaines modifications non compatibles de la version 9.0.

Pour obtenir la liste complète des modifications, consultez le journal des modifications de la version 9.0.

Lighthouse pour les parcours utilisateur

Lighthouse propose une nouvelle API de parcours utilisateur qui permet de réaliser des tests en laboratoire à tout moment de la durée de vie d'une page.

Puppeteer permet de créer des scripts de chargement de pages et de déclencher des interactions utilisateur synthétiques. Lighthouse peut être appelé de plusieurs manières pour capturer des insights clés lors de ces interactions. Cela signifie que les performances peuvent être mesurées pendant le chargement de la page et pendant les interactions avec la page.

Un rapport sur le parcours utilisateur Lighthouse, qui inclut plusieurs étapes de chargement et d'interaction avec un site Web, ainsi que les résultats de l'audit Lighthouse pour chaque étape

Pour en savoir plus, consultez le tutoriel et les exemples de code sur les parcours utilisateur Lighthouse.

Actualisation des rapports

Le rapport Lighthouse a été actualisé pour améliorer la lisibilité et clarifier la source du rapport et la manière dont il a été exécuté.

Une dernière capture d'écran a été intégrée en haut du rapport pour que vous puissiez voir d'un coup d'œil si la page testée s'est chargée correctement et si elle est au format attendu.

Un rapport Lighthouse 9.0 qui liste les principales métriques de performances de manière plus visible et intègre une capture d'écran de l'apparence finale de la page dans le rapport sur les performances

Les informations récapitulatives au bas du rapport ont également été repensées pour mieux expliquer comment Lighthouse a été exécuté et comment le rapport a été collecté.

La section "Paramètres" du rapport Lighthouse a été mise à jour. Elle contient désormais des récapitulatifs sur des éléments tels que la date et l'heure de capture de la page, le type d'émulation de page utilisé et la version de Chrome dans laquelle le test a été exécuté.

Pour voir le nouveau rapport en action, essayez Lighthouse 9.0 ou consultez cet exemple de rapport.

Un problème d'accessibilité courant se produit lorsque des éléments censés être uniques sur une page ne le sont pas, par exemple si l'ID référencé dans un attribut aria-labelledby est utilisé sur plusieurs éléments.

Lighthouse a toujours averti de cette situation, mais ne listait que la première instance d'un élément avec un ID répété, ce qui provoquait souvent de la confusion, car certains utilisateurs pensaient que tous les éléments problématiques étaient affichés. Étant donné que Lighthouse n'affiche qu'un seul élément, il suppose que c'est un bug qui fait que cet élément est signalé comme dupliqué.

Dans Lighthouse 9.0, tous les éléments partageant cet ID sont désormais listés:

Audit Lighthouse pour "Tous les éléments sélectionnables doivent avoir un identifiant unique", montrant deux éléments, tous deux avec le même identifiant

Cette fonctionnalité "nœuds associés" est fournie par axe-core. Elle peut donc également apparaître dans d'autres audits d'accessibilité.

Pour en savoir plus, consultez le problème de collecte des rapports utilisateur et la demande d'extraction d'implémentation.

Exécuter Lighthouse

Lighthouse est disponible dans les outils pour les développeurs Chrome, npm (en tant que module Node et CLI) et en tant qu'extension de navigateur (dans Chrome et Firefox). Il alimente de nombreux services Google, y compris web.dev/measure et PageSpeed Insights.

Pour essayer la CLI Node Lighthouse, utilisez les commandes suivantes:

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

Contacter l'équipe Lighthouse

Pour discuter des nouvelles fonctionnalités, des modifications apportées à la version 9.0 ou de tout autre élément lié à Lighthouse: