Lighthouse est un outil d'audit de site Web qui fournit aux développeurs des opportunités et des diagnostics permettant d'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. Il sera disponible dans la version stable de Chrome 112 et dans PageSpeed Insights dans les semaines à venir.
Changements de notation
La métrique historique Délai avant interactivité (TTI) est supprimée dans Lighthouse 10, ce qui conclut le processus d'abandon lancé dans Lighthouse 8. La pondération du score de 10% de TTI passe à CLS (Cumulative Layout Shift), qui représente désormais 25% du score de performances globales.
Le TTI marque un moment précis, mais sa définition le rend trop sensible aux requêtes réseau aberrantes et aux longues tâches. Le Largest Contentful Paint (LCP) et l'Speed Index proposent généralement de meilleures méthodes heuristiques pour traiter le contenu d'une page chargé que le nombre de requêtes réseau actives. En revanche, le temps de blocage total 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 à mieux correspondre aux métriques Core Web Vitals mesurées sur le terrain.
L'augmentation de la pondération du CLS est liée à la suppression du TTI, mais elle reflète mieux son importance en tant que Core Web Vitals et, dans l'idéal, augmentera la priorité pour les sites qui effectuent encore des décalages de mise en page inutiles.
Nous nous attendons à ce que cela améliore les scores de performances de la plupart des pages, car elles obtiennent généralement de meilleurs résultats au CLS qu'au TTI. D'après une analyse de 13 millions de chargements de pages lors de la dernière exécution de HTTP Archive, 90% de ces pages constateraient une amélioration de leur score de performances Lighthouse, et 50% d'entre elles constateraient une amélioration des performances de plus de 5 points.
Si, pour une raison quelconque, vous avez toujours besoin de la valeur TTI Lighthouse (dans une assertion CI, par exemple), elle reste disponible telle quelle dans la sortie JSON Lighthouse, mais avec une pondération de 0 et est masquée dans le rapport HTML. Tout accès scripté à la valeur JSON devrait continuer à fonctionner sans modification.
Nouveaux audits
Lighthouse 10 apporte un tout nouvel audit de performance et un changement significatif par rapport à un autre.
Cache amélioré
Le cache amélioré est l'un des outils les plus puissants pour améliorer les performances d'une page pour les utilisateurs réels. Au-delà du cache normal du navigateur, une page chargée depuis le cache amélioré restaure la mise en page et l'état d'exécution presque instantanément. La plupart des chargements de page sont ignorés, et votre page est immédiatement présentée aux utilisateurs lorsqu'ils parcourent l'historique.
Cependant, une page peut empêcher le navigateur de la restaurer à partir du cache amélioré de plusieurs façons. Ce nouvel audit Lighthouse quitte la page de test et y accède de nouveau pour vérifier s'il peut être mis en cache (bfcache) et indique les raisons de l'échec.
Pour en savoir plus, consultez la documentation sur l'audit de cache amélioré.
Entrées empêchant le collage
L'ancien audit des bonnes pratiques "Autoriser les utilisateurs à coller du contenu dans des champs de mot de passe" a été développé pour vérifier que le collage fonctionne dans n'importe quel champ de saisie (non en lecture seule). Pour la plupart des sites, empêcher le collage de données nuit à l'expérience utilisateur et empêche les workflows légitimes de sécurité et d'accessibilité.
Le nouvel audit s'intitule désormais "Permet aux utilisateurs de coller du contenu dans les champs de saisie" (paste-preventing-inputs).
Utilisateurs du nœud
Si vous utilisez Lighthouse en tant que bibliothèque de nœuds, vous devrez peut-être prendre en compte quelques modifications importantes par programmation dans cette version. Pour en savoir plus, consultez le journal des modifications de la version 10.0.
Lighthouse 10 est également livré avec des déclarations de type TypeScript complètes. Tout élément importé depuis lighthouse doit maintenant être saisi, ce qui est particulièrement utile si vous rédigez des scripts de flux utilisateur Lighthouse.
Essayez les différents types et n'hésitez pas à nous contacter si vous rencontrez des problèmes.
Phare en cours d'exécution
Lighthouse est disponible dans les outils pour les développeurs Chrome, npm (en tant que module de nœud et outil CLI) et en tant qu'extension de navigateur (dans Chrome et Firefox). Ce service alimente également plusieurs services Google, dont PageSpeed Insights.
Pour tester la CLI du nœud Lighthouse, exécutez 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 de Lighthouse 10 ou de toute autre question liée à Lighthouse:
- Signalez un problème ou envoyez des commentaires dans l'outil de suivi des problèmes GitHub Lighthouse.
- Posez vos questions sur les forums de discussion GitHub Lighthouse.
- Contactez l'équipe Lighthouse sur Twitter (@____lighthouse).