Lighthouse est un outil automatisé permettant d'améliorer la qualité de votre site. Vous lui attribuez une URL, et elle fournit une liste de recommandations sur la façon d'améliorer les performances des pages, de les rendre plus accessibles, de respecter les bonnes pratiques, etc. Vous pouvez l'exécuter à partir des outils pour les développeurs Chrome, en tant qu'extension Chrome ou même en tant que module de nœud, ce qui est utile pour l'intégration continue.
Lighthouse fournit depuis un certain temps déjà de nombreux conseils pour améliorer les performances de chargement des pages, tels que l'activation de la compression de texte ou la réduction des scripts bloquant l'affichage. L'équipe Lighthouse continue de proposer de nouveaux audits pour vous donner encore plus de conseils utiles pour rendre vos sites plus rapides. Cet article récapitule des audits de performances utiles dont vous n'avez peut-être pas connaissance, par exemple:
- Répartition des tâches du thread principal
- Précharger les requêtes de clé
- Le temps de démarrage JavaScript est élevé
- Évite les redirections de page
- Code JavaScript inutilisé
- Utilise une règle de cache inefficace sur les éléments statiques
- Éviter les allers-retours multiples et coûteux vers n'importe quelle origine
- Utiliser des formats vidéo pour des contenus animés
- Tout le texte reste visible pendant le chargement des polices Web
- CSS et JavaScript sans taille réduite
- Règles CSS inutilisées
Répartition des tâches du thread principal
Si vous avez déjà utilisé le panneau des performances dans les outils de développement, vous savez qu'il peut être fastidieux d'obtenir la répartition du temps CPU passé à charger une page. Nous sommes heureux d'annoncer que ces informations sont désormais facilement accessibles via la nouvelle répartition du travail du thread principal.
Ce nouveau diagnostic évalue le nombre et le type d'activité qui se produisent lors du chargement de la page, ce qui vous permet de gérer les problèmes de performances de chargement liés à la mise en page, à l'évaluation du script, à l'analyse et à d'autres activités.
Précharger les requêtes de clé
Lorsque les navigateurs récupèrent des ressources, ils le font lorsqu'ils trouvent des références à celles-ci dans le document et ses sous-ressources. Cette approche peut parfois s'avérer non optimale, car certaines ressources critiques sont découvertes plutôt tard dans le processus de chargement de la page. Heureusement, rel=preload permet aux développeurs d'indiquer aux navigateurs conformes les ressources à récupérer dès que possible. Le nouvel audit des requêtes de clé de préchargement permet aux développeurs de savoir quelles ressources gagneraient à être chargées plus tôt par rel=preload.
Il est très important de tester et de comparer les changements de performances avec et sans rel=preload, car cela peut affecter les performances de chargement d'une manière inattendue. Par exemple, le préchargement d'une grande image peut retarder l'affichage initial, mais en contrepartie, l'image préchargée apparaîtra plus tôt dans la mise en page.
Assurez-vous toujours que les résultats vous plaisent !
Le temps de démarrage JavaScript est élevé
Lorsqu'une trop grande quantité de code JavaScript est chargée, la page peut ne plus répondre lorsque le navigateur l'analyse, la compile et l'exécute. Les publicités et scripts tiers sont une source particulière d'activité de script excessive, qui peut bloquer même les appareils puissants. Le nouvel audit Temps de démarrage JavaScript est élevé indique le temps CPU utilisé par chaque script d'une page et indique son URL:
Lorsque vous exécutez cet audit, vous pouvez également activer les badges tiers dans le panneau réseau et filtrer la liste pour identifier les ressources de script tierces. Les données de cet audit vous permettront de détecter les sources d'activité JavaScript excessive qui transforment les pages rapidement en lenteur. Pour les scripts propres à votre application, vous pouvez utiliser des techniques telles que la scission du code et le séchage d'arborescence afin de limiter la quantité de code JavaScript sur chaque page de votre site.
Évite les redirections de page
Parfois, lorsqu'un navigateur demande une URL, le serveur peut répondre avec un code d'état de niveau 300. Le navigateur redirige alors les utilisateurs vers une autre URL. Bien que les redirections soient nécessaires pour le SEO et le caractère pratique, elles ajoutent de la latence aux requêtes. Cela est particulièrement vrai si elles redirigent les utilisateurs vers d'autres origines, ce qui peut entraîner un temps supplémentaire de résolution DNS et de négociation connexion/TLS.
Il est déconseillé d'utiliser des redirections pour les pages de destination de votre site. Pour vous aider à réduire la latence et à améliorer les performances de chargement, Lighthouse propose désormais l'audit Évite les redirections de page, qui vous indique quand une navigation déclenche des redirections.
Notez qu'il est difficile de déclencher cet audit dans la version DevTools de Lighthouse, car il analyse l'URL actuelle dans la barre d'adresse de la page, qui reflète la résolution de toutes les redirections. Il est probable que cet audit soit renseigné dans la CLI du nœud.
Code JavaScript inutilisé
Le code mort peut poser problème dans les applications utilisant beaucoup JavaScript. Bien qu'elle n'entraîne pas de coûts d'exécution, car elle n'est jamais appelée, elle entraîne d'autres effets indésirables. Le code mort est toujours téléchargé, analysé et compilé par le navigateur. Cela affecte les performances de chargement et le temps de démarrage de JavaScript. Comme le panneau de couverture dans les outils de développement, l'audit JavaScript inutilisé indique le code JavaScript téléchargé par la page actuelle, mais n'est jamais utilisé.
Cet audit vous permet d'identifier le code mort dans vos applications et de le supprimer pour améliorer les performances de chargement et réduire l'utilisation des ressources système. Conseil de pro: Vous pouvez également utiliser le panneau de couverture de code des outils de développement Chrome pour trouver ces informations.
Utilise une règle de cache inefficace sur les éléments statiques
Bien que les conseils en matière d'amélioration des performances tendent à améliorer la vitesse d'un site Web pour les nouveaux utilisateurs, il est également important d'utiliser la mise en cache pour améliorer les performances de chargement pour les utilisateurs connus. L'audit Utilisation d'une règle de cache inefficace sur les éléments statiques inspecte les en-têtes de mise en cache des ressources réseau et vous indique si les règles de cache pour les ressources statiques ne sont pas standards.
Cet audit vous permettra d'identifier et de résoudre facilement les problèmes liés à votre stratégie de cache actuelle. Cela améliorera considérablement les performances pour les utilisateurs connus, qui apprécieront cette vitesse supplémentaire.
Éviter les allers-retours multiples et coûteux vers toutes les points de départ
Lorsque les navigateurs récupèrent les ressources d'un serveur, la résolution DNS et la connexion à un serveur peuvent prendre un certain temps.
rel=preconnect permet aux développeurs de masquer cette latence en établissant des connexions à d'autres serveurs avant que le navigateur ne le fasse en temps voulu. L'audit Éviter les allers-retours coûteux vers n'importe quelle origine vous aidera à découvrir des opportunités d'utiliser rel=preconnect.
rel=preconnect dans Lighthouse.Lorsque la latence des éléments multi-origines est réduite, les utilisateurs perçoivent que les choses avancent un peu plus rapidement. Grâce à ce nouvel audit Lighthouse, vous découvrirez de nouvelles opportunités d'utiliser rel=preconnect à cette fin.
Utiliser des formats vidéo pour des contenus animés
Les GIF animés sont énormes et consomment souvent au moins plusieurs centaines de kilo-octets, voire plusieurs mégaoctets de données. Si vous vous souciez des performances de chargement, convertissez ces GIF en vidéos. Heureusement, l'audit Utiliser les formats vidéo pour le contenu animé est là pour vous aider.
Si votre site contient des GIF de plus de 100 Ko, cet audit les signalera automatiquement et vous redirigera vers des conseils sur la manière de les convertir en fichiers vidéo et de les intégrer. Des sites comme Imgur ont considérablement amélioré les performances de chargement en convertissant leurs GIF en vidéos. De plus, si votre site fait l'objet d'un forfait d'hébergement avec une bande passante mesurée, les économies potentielles devraient suffire à vous convaincre !
Tout le texte reste visible lors du chargement des polices Web
Lorsque nous chargeons des polices Web pour des pages, les navigateurs affichent souvent le texte invisible jusqu'au chargement de la police. Ce phénomène, appelé Flash of Invisible Text (FOIT), peut vous être préférable du point de vue de la conception, mais il s'agit en réalité d'un problème. Le texte bloqué ne peut pas être lu tant qu'il n'est pas rendu et ne devient pas visible. Pour les connexions à latence et/ou bande passante élevée, cela signifie qu'une partie essentielle de l'expérience utilisateur est manquante. Il peut également s'agir d'une sorte de problème de performances perceptives dans la mesure où la page n'affiche pas un contenu pertinent aussi rapidement qu'il le pourrait autrement. Heureusement, l'audit Tout le texte reste visible pendant le chargement des polices Web vous aide à trouver des moyens de résoudre ce problème sur votre site.
Si Lighthouse détecte des polices Web dans votre application qui retardent l'affichage du texte, il existe plusieurs solutions. Vous pouvez contrôler le rendu du texte à l'aide de la propriété CSS font-display et/ou de l'API Font Load.
Si vous souhaitez approfondir le sujet, n'hésitez pas à lire A Comprehensive Guide to Font Load Strategies (Guide complet sur les stratégies de chargement des polices). Il s'agit d'un excellent guide rédigé par Zach Warmman et qui constitue une excellente ressource pour un chargement optimal des polices.
CSS et JavaScript non minimisés
La minimisation est une technique suggérée, car les performances Web sont primordiales, et ce pour une bonne raison. Elle réduit considérablement la taille des ressources textuelles, ce qui est bon pour les performances de chargement. Cependant, il est facile de négliger cette optimisation, en particulier si les processus de compilation ne s'en chargent pas à votre place. Les audits Minify CSS (Minifier CSS) et Minify JavaScript (Minifier le code JavaScript) compilent une liste de ressources non réduites qu'ils trouvent sur la page actuelle. À partir de là, vous pouvez agir en réduisant la taille de ces fichiers manuellement ou en améliorant votre système de compilation afin qu'il le fasse à votre place.
Règles CSS inutilisées
Lorsqu'un site devient un peu long, il est inévitable que les éléments superflus résultant de la refactorisation commencent à s'accumuler. L'une de ces sources d'erreurs consiste en des règles CSS inutilisées qui ne sont plus nécessaires au fonctionnement du site, mais qui consomment toujours de la bande passante. Pour plus de commodité, l'audit Règles CSS inutilisées indique les ressources CSS de la page qui contiennent des CSS inutilisés.
Si Lighthouse détecte du code CSS inutilisé sur la page, il existe des moyens de le supprimer. UnCSS est l'un de ces utilitaires qui effectue cette opération automatiquement (bien qu'il doive être utilisé avec précaution). Une méthode plus manuelle implique l'utilisation du panneau de couverture de code dans les outils de développement. Toutefois, n'oubliez pas que ce code CSS inutilisé sur une page peut être nécessaire sur une autre. Vous pouvez également diviser votre CSS en fichiers spécifiques au modèle, qui ne sont chargés que si nécessaire. Quelle que soit votre décision, Lighthouse sera là pour vous indiquer si votre code CSS devient trop lourd.
Essayez Lighthouse !
Si ces nouveaux audits vous intéressent, mettez à jour Lighthouse et essayez-les !
- L'extension Chrome Lighthouse devrait se mettre à jour automatiquement, mais vous pouvez la mettre à jour manuellement via
chrome://extensions. - Dans les outils de développement, vous pouvez exécuter Lighthouse dans le panneau des audits. Une nouvelle version de Chrome est mise à jour toutes les six semaines environ. Il est donc possible que certains audits plus récents ne soient pas disponibles. Si vous souhaitez utiliser les derniers audits disponibles, vous pouvez exécuter le code le plus récent de Chrome en téléchargeant Chrome Canary.
- Pour les utilisateurs de nœuds: exécutez
npm update lighthouseounpm update lighthouse -gsi vous avez installé Lighthouse de manière globale.
Nous remercions Kayce Basques, Patrick Hulce, Addy Osmani et Vinamrata Singal pour leurs précieux commentaires, qui ont considérablement amélioré la qualité de cet article.