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 10 est disponible immédiatement sur la ligne de commande via npm et dans Chrome Canary. Elle sera disponible dans Chrome 112 et dans PageSpeed Insights dans les semaines à venir.
Modifications apportées au scoring
La métrique Time To Interactive (TTI) est supprimée dans Lighthouse 10, ce qui met fin au processus d'abandon lancé dans Lighthouse 8. Le poids de 10% attribué au TTI est transféré au CLS (Cumulative Layout Shift), qui représentera désormais 25% du score global de performances.
Le TTI marque un point dans le temps, mais la façon dont il est défini le rend trop sensible aux requêtes réseau atypiques et aux tâches longues. Largest Contentful Paint (LCP) et Speed Index sont généralement de meilleures heuristiques pour déterminer si le contenu d'une page est chargé que le nombre de requêtes réseau actives. Le temps de blocage total (TBT, Total Blocking Time), quant à lui, gère les tâches longues et la disponibilité du thread principal de manière plus robuste. Bien qu'il ne soit pas un proxy direct, il tend à mieux correspondre aux Core Web Vitals mesurés sur le terrain.
L'augmentation de la pondération du CLS est liée à la suppression du TTI, mais reflète mieux son importance en tant que métrique Core Web Vital. Elle devrait idéalement améliorer la concentration pour les sites qui effectuent encore des changements de mise en page inutiles.
Nous nous attendons à ce que cela améliore les scores de performances de la plupart des pages, car la plupart des pages ont tendance à obtenir un meilleur score CLS que TTI. Dans une analyse de 13 millions de chargements de pages lors de la dernière exécution de l'outil HTTP Archive, 90% de ces pages ont vu leur score de performances Lighthouse s'améliorer, et 50% d'entre elles ont vu leurs performances s'améliorer de plus de cinq points.
Si, pour une raison quelconque, vous avez toujours besoin de la valeur TTI de Lighthouse (dans une assertion de CI, par exemple), elle est toujours disponible dans la sortie JSON de Lighthouse, mais avec un poids de score de 0 et masquée dans le rapport HTML. Tout accès par script à la valeur JSON devrait continuer à fonctionner sans modification.
Nouveaux audits
Lighthouse 10 introduit un nouvel audit des performances et modifie un autre audit de manière significative.
Cache amélioré
Le cache avant/arrière (bfcache) est l'un des outils les plus puissants disponibles pour améliorer les performances d'une page pour les utilisateurs réels. En plus du cache du navigateur normal, une page chargée à partir du bfcache restaure la mise en page et l'état d'exécution de la page presque instantanément, en ignorant en grande partie toute activité de chargement de la page et en affichant immédiatement votre page devant vos utilisateurs lorsqu'ils naviguent dans leur historique.
Toutefois, une page peut empêcher le navigateur de la restaurer à partir du bfcache de plusieurs façons. Ce nouvel audit Lighthouse quitte la page de test, puis y revient pour vérifier si elle peut être mise en cache amélioré, et indique les raisons en cas d'échec.
Pour en savoir plus, consultez la documentation sur l'audit bfcache.
Entrées empêchant le collage
L'ancien audit des bonnes pratiques "Autoriser les utilisateurs à copier un contenu dans les champs de mot de passe" a été étendu 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 est une expérience utilisateur négative et empêche les workflows légitimes de sécurité et d'accessibilité.
Le nouvel audit est désormais "Permet aux utilisateurs de coller du texte dans les champs de saisie" (paste-preventing-inputs).
Utilisateurs de nœuds
Si vous utilisez Lighthouse en tant que bibliothèque Node, vous devrez peut-être tenir compte de quelques modifications de rupture programmatiques dans cette version. Pour en savoir plus, consultez le journal des modifications de la version 10.0.
Lighthouse 10 est également fourni avec des déclarations de type TypeScript complètes. Tout élément importé depuis lighthouse doit désormais être saisi, ce qui devrait s'avérer particulièrement utile si vous créez des flux utilisateur Lighthouse.
Essayez les types et dites-nous si vous rencontrez des problèmes.
Exécuter Lighthouse
Lighthouse est disponible dans les outils pour les développeurs Chrome, npm (en tant que module Node et outil de ligne de commande) et en tant qu'extension de navigateur (dans Chrome et Firefox). Il alimente également plusieurs services Google, y compris 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 10 de Lighthouse ou de tout autre sujet lié à Lighthouse:
- Signalez un problème ou envoyez des commentaires dans l'outil de suivi des problèmes Lighthouse sur GitHub.
- Posez vos questions sur les forums de discussion GitHub de Lighthouse.
- Contactez l'équipe Lighthouse sur Twitter : @____lighthouse.