Lighthouse est un outil d'audit de site Web qui aide les développeurs à bénéficier d'opportunités et de diagnostics pour améliorer l'expérience utilisateur sur leurs sites.
Lighthouse 10 est disponible immédiatement sur la ligne de commande via npm et dans Chrome Canary. Elle sera disponible dans la version stable de Chrome dans Chrome 112 et dans PageSpeed Insights dans les semaines à venir.
Modifications des scores
La métrique historique Délai avant interactivité (TTI) est en cours de suppression dans Lighthouse 10, ce qui met fin au processus d'abandon lancé dans Lighthouse 8. La pondération de 10% du score TTI va passer au CLS (Cumulative Layout Shift), qui représentera désormais 25% du score de performance global.
Le TTI marque un moment précis, mais la façon dont il est défini le rend trop sensible aux requêtes réseau aberrantes et aux longues tâches. Le LCP (Largest Contentful Paint) et l'indice de vitesse offrent généralement de meilleures méthodes heuristiques que le nombre de requêtes réseau actives pour que le contenu d'une page soit chargé. En revanche, le Temps de blocage total (TBT) gère plus efficacement les tâches longues et la disponibilité du thread principal. Bien qu'il ne s'agisse pas d'un proxy direct, il a tendance à être plus corrélé avec les métriques Core Web Vitals telles que mesurées sur le terrain.
L'augmentation de la pondération du CLS est indirecte de la suppression de TTI, mais reflète mieux son importance en tant que métrique Core Web Vitals. Dans l'idéal, elle attirera davantage l'attention sur les sites qui continuent d'effectuer des décalages de mise en page inutiles.
Cela devrait améliorer l'expérience de la plupart des pages de performances, car la plupart des pages obtiennent généralement de meilleurs résultats avec le CLS qu'avec le TTI. Une analyse de 13 millions de pages chargées lors de la dernière exécution de l'archive HTTP a révélé une amélioration de leur score de performances Lighthouse sur 90% de ces pages. 50% d'entre elles ont constaté une amélioration de plus de 5 points.
Si, pour une raison quelconque, vous avez toujours besoin de la valeur du TTI Lighthouse (dans une assertion CI, par exemple), elle reste disponible telle quelle dans la sortie JSON Lighthouse, avec une pondération de score de 0 et est masquée dans le rapport HTML. Tout accès via un script de la valeur JSON devrait continuer à fonctionner sans modification.
Nouveaux audits
Lighthouse 10 apporte un tout nouvel audit de performances et un changement significatif.
Cache amélioré
Le cache amélioré (bfcache) est l'un des outils les plus puissants permettant d'améliorer les performances d'une page pour les utilisateurs réels. Au-delà du cache normal du navigateur, une page chargée à partir du cache amélioré restaure presque instantanément l'état de la mise en page et de l'exécution, ignorant largement toute activité de chargement de page et présenter votre page immédiatement aux utilisateurs lorsqu'ils parcourent leur historique.
Toutefois, une page peut empêcher le navigateur de la restaurer à partir du cache amélioré. Ce nouvel audit Lighthouse permet de quitter la page de test, puis de revenir en arrière pour vérifier s'il est possible de mettre le cache en cache amélioré. Il indique également les raisons de l'échec de l'opération.
Pour en savoir plus, consultez la documentation sur l'audit bfcache.
Empêcher le collage des entrées
Ancien audit des bonnes pratiques "Autoriser les utilisateurs à coller dans les champs de mot de passe" a été développé pour vérifier qu'il est possible de le coller dans un champ de saisie (non en lecture seule). Pour la plupart des sites, empêcher le collage est une expérience utilisateur net-négative et empêche les workflows légitimes de sécurité et d'accessibilité.
Le nouvel audit s'intitule désormais "Autoriser les utilisateurs à coller des éléments dans les champs de saisie" (paste-preventing-inputs).
Utilisateurs du nœud
Si vous utilisez Lighthouse comme bibliothèque de nœuds, vous devrez peut-être tenir compte de quelques modifications importantes par programmation dans cette version. Pour en savoir plus, consultez le journal des modifications 10.0.
Lighthouse 10 est également fourni avec des déclarations de type TypeScript complètes. Tout élément importé à partir de lighthouse doit maintenant être saisi, ce qui est particulièrement utile si vous créez des scripts pour les flux utilisateur Lighthouse.
Essayez-les et n'hésitez pas à nous contacter si vous rencontrez des problèmes lors de leur utilisation.
Lighthouse en cours d'exécution
Lighthouse est disponible dans les Outils pour les développeurs Chrome, npm (en tant que module Node et outil CLI) et en tant qu'extension de navigateur (dans Chrome et Firefox). Il est également à la base de plusieurs services Google, y compris PageSpeed Insights.
Pour essayer la CLI du nœud 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 à Lighthouse 10 ou de tout autre sujet lié à Lighthouse:
- Signalez un problème ou envoyez vos commentaires dans l'outil de suivi des problèmes GitHub de Lighthouse.
- Posez vos questions dans les forums de discussion GitHub Lighthouse.
- Contactez l'équipe Lighthouse sur Twitter (@____lighthouse).