Google Lighthouse est un outil Google gratuit qui vous aide à améliorer la qualité des pages Web de votre site Web. L’outil audite vos pages en termes de performances, d’accessibilité, de référencement, etc. Et propose des suggestions pour vous permettre d’améliorer ces aspects. Il s’agit d’un logiciel open source que tout le monde peut utiliser sur n’importe quelle page Web. Que vous soyez un développeur Web, un référenceur ou un propriétaire de site Web, Google Lighthouse peut vous aider à améliorer l’expérience globale de votre site Web et performance. Dans cet article, nous expliquerons comment fonctionne Google Lighthouse et comment vous pouvez l’utiliser pour auditer vos pages Web. Allons-y.
Comment fonctionne Google Lighthouse ?
Google Lighthouse fonctionne en effectuant des audits pour cinq catégories principales d’optimisation de site Web.
Performances
Dans cet audit, Lighthouse mesure la vitesse de chargement d’un site Web et la rapidité avec laquelle les utilisateurs peuvent y accéder. Il rend compte de vos performances pour cinq mesures de vitesse, chacune mesurant un aspect de la vitesse de la page :
- Première peinture de contenu (FCP) : Mesure le temps auquel le premier texte ou image devient visible pour les utilisateurs
- La plus grande peinture de contenu (LCP) : Calcule le temps qu’une page prend pour charger son plus grand élément pour les utilisateurs
- Temps de blocage total (TBT) : Mesure le temps pendant lequel une page est bloquée pour réagir aux entrées de l’utilisateur, comme un clic de souris
- Décalage de mise en page cumulé (CLS) : Mesure les changements de mise en page qui se produisent lorsque les utilisateurs accèdent à une page
- Indice de vitesse (SI) : Montre à quelle vitesse le contenu d’une page est chargé
Lighthouse attribue un score de performance global à une page en fonction des performances de votre page pour toutes ces mesures. Le score peut être compris entre 0 et 100. Si votre score est compris entre 90 et 100, cela indique que votre page est bien optimisée pour l’expérience utilisateur. Tout ce qui est inférieur à 90 signifie qu’un nombre important de ressources sur votre page ralentissent les choses, affectant le expérience globale de la page. Lighthouse propose également des suggestions. Que vous pouvez mettre en œuvre pour améliorer vos performances.
Accessibilité
Le test d’accessibilité de Lighthouse analyse dans quelle mesure les personnes qui utilisent des technologies d’assistance peuvent utiliser votre site Web. Plus précisément, il examine des éléments tels que des boutons et des liens pour voir s’ils sont bien décrits. Il analyse également les images pour voir si le texte alternatif est spécifié. Ainsi, lorsque les utilisateurs malvoyants ou non voyants utilisent des lecteurs d’écran, ils comprennent de quoi parle l’image. Semblable à un rapport d’audit de performance, le rapport d’accessibilité vous attribue une note sur 100. Plus la note est élevée, mieux c’est. L’outil met en évidence les possibilités d’améliorer votre accessibilité globale.
Meilleures pratiques
L’audit des meilleures pratiques de Lighthouse vérifie si votre page est construite sur les normes modernes de développement Web. Lighthouse examine si :
- Les ressources se chargent à partir de serveurs sécurisés avec HTTPS
- Toutes les images apparaissent avec le rapport d’aspect correct et dans la résolution appropriée
- Toutes les bibliothèques JavaScript sont sûres et exemptes de toute vulnérabilité
- La page a le doctype HTML
- La politique de sécurité du contenu (CSP) est efficace contre les attaques de script intersite (XSS)
- La page est exempte de toutes les erreurs de navigateur
- La page est exempte de frameworks et d’API obsolètes
- La page contient des cartes sources valides
- La page est exempte de problèmes apparaissant dans le panneau Chrome DevTools, tels que des échecs de requête réseau, des mesures de sécurité insuffisantes et d’autres problèmes de navigateur
- L’encodage des caractères de la page est défini avec la balise meta charset
- La page permet aux utilisateurs de coller le mot de passe dans le champ du mot de passe
- La page crée une bonne expérience utilisateur en bloquant les demandes d’autorisation de géolocalisation et de notification lors du chargement de la page
Tous ces facteurs déterminent votre score sur 100. Le rapport Lighthouse sur les meilleures pratiques met également en évidence des éléments spécifiques qui nécessitent votre attention. Ce qui peut améliorer votre score.
Référencement
Lighthouse exécute un test pour analyser votre page Web pour certains aspects techniques du référencement. Plus précisément, il vérifie si :
- Votre page Web est adaptée aux mobiles
- La page contient des données structurées valides
- Les liens internes sont explorables
- La page a un attribut hreflang valide
- Les balises de titre et de méta description sont définies
- La page est indexable
- Robots.txt est valide
- La page renvoie le code de réponse d’état HTTP 200 (OK)
- La page contient un jeu de balises « rel=canonical » valide
- Le contenu de la page est indépendant des plugins
- Les liens sur une page sont introduits avec un texte descriptif
- Les images sur une page ont des textes alternatifs d’image spécifiés
- La page comporte une balise Meta de fenêtre d’affichage avec une largeur ou un ensemble d’échelles initiales
Et attribue ensuite une note sur 100.Il met également en évidence les problèmes de référencement détectés lors de l’exécution d’un audit.Mais l’outil ne vous donne pas une image complète de votre référencement.Si vous voulez que votre site Web soit mieux classé dans Google, vous avez besoin pour s’assurer qu’il est optimisé pour tous les aspects du référencement. Assurez-vous qu’aucun problème n’affecte votre classement. C’est là que les outils de Semrush peuvent être utiles. Par exemple, Site Audit vérifie votre site Web pour plus de 140 aspects du référencement. Comme le contenu dupliqué, les redirections, les liens internes, la structure d’URL, etc. Pour utiliser l’outil, configurez un projet et exécutez votre audit. Une fois l’audit terminé, vous obtiendrez un aperçu de haut niveau de la santé SEO de votre site Web. Vous pouvez également voir les problèmes spécifiques qui affectent vos performances. Allez simplement au « Questions” onglet.Pour chaque problème détecté, l’outil propose des conseils sur la façon de le résoudre.Résolvez chaque problème détecté par l’outil pour votre site. Ainsi, le référencement de votre site Web reste dans un état sain.
Application Web progressive (PWA)
L’audit PWA dans Lighthouse valide si votre application Web utilise des fonctionnalités Web modernes pour offrir une expérience utilisateur optimale. Il vérifie si votre application Web est :
- Rapide et fiable sur les réseaux mobiles et offre des fonctionnalités hors ligne
- Installable sur plusieurs types d’appareils et dispose de fonctionnalités telles que la fonctionnalité hors ligne et les notifications push
- Optimisé pour PWA en redirigeant le trafic HTTP vers HTTPS, en configurant un écran de démarrage personnalisé, en dimensionnant le contenu de la page Web pour l’adapter aux écrans mobiles et en mettant en œuvre toutes les autres bonnes pratiques répertoriées par Lighthouse
Le test exécute votre application Web par rapport à ces facteurs et attribue l’un des badges PWA. (Source de l’image : Github) Cela signifie que, contrairement aux quatre premiers rapports, vous êtes affecté un badge (pas un score de 100) lorsque vous exécutez un audit PWA dans Lighthouse. Comme ceci : le rapport d’audit fournira également des suggestions pour améliorer les performances globales de votre PWA. Y compris les problèmes spécifiques qui doivent être résolus.
Comment utiliser Google Lighthouse
Maintenant que vous savez ce qu’est Google Lighthouse et comment il fonctionne, examinons les différentes façons dont vous pouvez l’utiliser pour auditer vos pages.
Utilisation de Lighthouse avec Chrome DevTools
Vous la verrez là « Ensuite, l’outil générera un rapport pour vous. Vous trouverez vos scores d’audit pour chaque catégorie en haut. Vous pouvez cliquer sur une catégorie spécifique pour en savoir plus. Dans cet exemple, nous avons cliqué sur « Performance » Audit.Note : Vous remarquerez que Lighthouse mesure vos performances pour six mesures de vitesse (au lieu de cinq) lorsque vous exécutez un audit de performance avec DevTools. Cette mesure supplémentaire est Temps d’interactivité (ITT). Ce qui calcule le temps qu’il faut pour qu’une page devienne entièrement interactive pour les utilisateurs. Cette métrique est l’une de leurs métriques retirées. On ne sait pas pourquoi il est toujours pris en compte lorsque vous exécutez des audits Lighthouse dans DevTools.
Utilisation de Lighthouse avec l’extension Chrome
Lighthouse dispose d’une extension Chrome qui peut effectuer des audits pour vous.Sur votre navigateur Chrome, installez l’extension Lighthouse Chrome.Visitez la page Web que vous souhaitez tester.Ensuite, ouvrez le menu de l’extension Chrome et sélectionnez « Phare. » Cliquez ensuite sur l’icône de la roue dentée. Vous verrez des paramètres dans lesquels vous pouvez sélectionner ou désélectionner des catégories spécifiques en fonction des rapports que vous souhaitez générer. Ensuite, démarrez l’audit en cliquant sur le bouton « Générer un rapport ». Lighthouse générera un rapport pour vous dans un nouvel onglet.
Utilisation de Lighthouse dans PageSpeed Insights
« L’outil générera des rapports pour toutes les catégories, à l’exception des PWA. PageSpeed Insights n’effectue pas d’audits PWA.
Utilisation de Google Lighthouse via le module Node
lighthouse (Vous devez remplacer « url » par l’adresse Web de la page que vous souhaitez tester.)
FAQ
En quoi Lighthouse est-il différent de PageSpeed Insights ?
Lighthouse est différent de PageSpeed Insights dans la mesure où Lighthouse utilise uniquement des données de laboratoire pour mesurer les performances de vos pages. Tandis que PageSpeed Insights utilise les deux données de laboratoire et de terrain. Les données de laboratoire reflètent la façon dont les utilisateurs hypothétiques peut éprouver votre site. En revanche, les données de terrain reflètent la façon dont les utilisateurs réels expérimenté votre site web.
Pourquoi mes scores sont-ils différents à chaque test ?
Les scores que vous voyez dans Lighthouse peuvent varier à chaque fois que vous exécutez le test. Les conditions du réseau, les extensions de navigateur qui modifient les demandes de réseau et les publicités affichées sur la page spécifique affectent votre score à chaque fois que vous effectuez le test.
Les rapports Lighthouse incluent-ils les métriques Web Vitals de base ?
Oui. L’audit de performance dans Lighthouse analyse votre site Web pour les métriques Core Web Vitals suivantes :