Qu’est-ce que Google Lighthouse et comment l’utiliser ?

C’est quoi Google Lighthouse?

Google Lighthouse est un outil gratuit et open source qui peut vous aider à améliorer la vitesse, les performances et l’expérience globale de votre site Web. La génération de rapports Lighthouse facilite l’amélioration de la qualité de vos pages Web.

Vous pouvez utiliser l’outil de différentes manières. Vous pouvez l’exécuter via :

• Outils de développement Chrome
• Une extension Chrome
• Un module Nœud
• Une interface utilisateur Web (UI)

Une fois que vous avez soumis une URL à l’outil automatisé, il exécutera plusieurs audits de page et créera un rapport détaillant les performances de la page. Vous pouvez ensuite utiliser les suggestions des résultats pour améliorer votre site Web.

Lighthouse n’est pas seulement pour les développeurs. L’outil convient à tout propriétaire de site souhaitant en savoir plus sur les performances de son site Web et sur les mesures concrètes pour l’optimiser.

Comment Lighthouse vérifie les pages

L’objectif principal des audits Lighthouse est le Core Web Vitals de Google. Si vous n’êtes pas familier, ce sont les mesures essentielles que Google utilise pour mesurer la vitesse des pages Web et l’expérience utilisateur globale (UX). Ils se composent de la plus grande peinture à contenu (LCP), du délai de première entrée (FID) et du décalage de mise en page cumulatif (CLS).

En d’autres termes, l’utilisation de Lighthouse vous aide à voir votre site Web de la même manière que Google. Vous pouvez utiliser les informations exploitables qu’il fournit pour optimiser vos pages et obtenir de meilleurs résultats de classement dans les moteurs de recherche.

Les rapports Lighthouse se composent de cinq catégories :

• Performance
• Accessibilité
• Référencement
• Les meilleures pratiques
• Application Web progressive

Il utilise également un système de notation de 1 à 100 et teste les sites par rapport à une connexion 3G simulée. Cependant, les scores peuvent varier dans le temps car Google met souvent à jour ses critères de classement. Par conséquent, vous voudrez probablement rester au courant de toutes les mises à jour de Lighthouse.

De plus, bien que quelque peu similaire à PageSpeed Insights, Lighthouse n’est pas le même. Lighthouse offre une image plus globale que les performances de la page (comme le fait PageSpeed Insights).

How to Use Google Lighthouse

Comme nous l’avons mentionné, vous pouvez utiliser une poignée de workflows pour Lighthouse. Si vous ne souhaitez pas installer d’extension ou exécuter des commandes, vous pouvez utiliser web.dev ou DevTools. Ci-dessous, nous vous expliquerons les instructions étape par étape pour chaque option.

Comment exécuter Google Lighthouse avec Chrome DevTools

Pour commencer, vous devez d’abord télécharger Google Chrome (si ce n’est déjà fait). Une fois installé, vous pouvez ouvrir un nouvel onglet de navigateur dans Chrome et accéder à la page Web que vous souhaitez auditer.

Ensuite, faites un clic droit sur la page et sélectionnez Inspecter. Vous pouvez également cliquer sur les trois points verticaux dans le coin supérieur droit du navigateur, puis accéder à Plus d’outils > Outils de développement.

Cela ouvrira le panneau DevTools à droite ou en haut de la page. Depuis la barre d’outils, (1) cliquez sur Lighthouse :

Notez que si vous ne voyez pas l’option Phare dans la barre d’outils, vous devrez peut-être cliquer sur les deux flèches à la fin. Une fois l’outil Lighthouse ouvert, assurez-vous que les cinq catégories sont sélectionnées, puis (2) choisissez Générer un rapport.

Une fois que Lighthouse a terminé l’audit, il vous amènera à l’écran des résultats. Ce rapport ressemblera à ceci :

Vous trouverez une partition et une section pour chaque catégorie. Vous pouvez en savoir plus sur chacun en cliquant sur les scores en haut de la page.

Un bon score est considéré comme quelque chose entre 50 et 89. Un excellent score est entre 90 et 100. L’objectif est de marquer quelque part entre 90 et 100 pour chaque catégorie.

Comment utiliser Google Lighthouse avec web.dev

Un autre moyen rapide et facile d’auditer une page Web avec Lighthouse consiste à utiliser web.dev. Accédez à cette page, puis saisissez l’URL de la page que vous souhaitez auditer :

Ensuite, cliquez sur le bouton Exécuter l’audit. Après une minute ou deux, Lighthouse terminera l’analyse du site et vous amènera au rapport. Ici, vous pouvez en savoir plus sur votre score et les possibilités d’amélioration dans chaque catégorie :

Vous pouvez cliquer sur chaque section réduite pour la développer et en savoir plus. Vous pouvez également accéder à des informations détaillées sur chaque catégorie en sélectionnant le nom de la catégorie et le score en haut du rapport

Conclusion

Auditer régulièrement votre site est essentiel pour offrir une bonne expérience aux visiteurs et aux moteurs de recherche. Grâce à des outils tels que Google Lighthouse, vous pouvez évaluer rapidement les performances, le référencement et l’accessibilité de votre site en quelques étapes simples.

Comme nous en avons discuté dans cet article, Lighthouse est un outil gratuit et automatisé permettant d’obtenir des informations précieuses sur les performances et l’expérience globale de vos pages Web. Vous pouvez l’utiliser en installant une extension Chrome ou en utilisant DevTools directement dans votre navigateur. Ensuite, vous pouvez utiliser les rapports pour apprendre comment améliorer votre site.

Avez-vous des questions sur l’utilisation de Google Lighthouse ? Faites-nous savoir dans la section commentaires ci-dessous!