Un nouvel outil de Google permet de tester et de vous donner des recommandations pour améliorer les performances, le référencement, la sécurité, les bonnes pratiques et l’accessibilité de votre site web.
Google a récemment lancé Lighthouse, un outil open-source permettant d’auditer votre site web manuellement et automatiquement.

Quels sont les indicateurs testés par Google Lighthouse ?
Google Lighthouse teste plus de 75 paramètres et vous donne une note globale. En tant que propriétaire de site, analyste SEO et webmaster, vous pourriez être intéressé par certaines des mesures les plus courantes.
- Performance – temps d’interactivité, latence, indice de vitesse, optimisation des ressources, TTFB, livraison de ressources, temps d’exécution des scripts, taille du DOM, etc.
- SEO – Mobile friendly, meta, crawling, canonical, structure, etc.
- Meilleures pratiques – Optimisation des images, bibliothèques JS, enregistrement des erreurs du navigateur, accessible via HTTPS, vulnérabilités JS connues, etc
- Accessibilité – éléments de page, langage, attributs ARIA, etc.
- PWA (Progressive Web Application) – redirection HTTP vers HTTPS, code de réponse ok, chargement rapide sur 3G, écran d’accueil, viewport, etc.
C’est un outil fantastique, et vous pouvez l’utiliser de multiples façons.
C’est exact – de multiples façons. Si vous êtes développeur, vous pouvez utiliser Node.js pour exécuter un test de manière programmatique. Il existe déjà sur le marché quelques outils basés sur Lighthouse qui permettent de surveiller en continu les performances d’un site.
Voyons comment exécuter un test Lighthouse sur votre site.
Commencez par le plus simple.
Mesurez avec web.dev
Google a lancé web.dev il y a quelques mois et a gagné en popularité. Le test en ligne est facile.
Allez sur la page Measure et entrez l’URL pour lancer l’audit. Cela prendra quelques secondes, et vous devriez voir un rapport détaillé avec la note globale.

Les résultats indiquent également les mesures de réussite. Testez les audits réussis et travaillez sur ceux qui nécessitent une attention particulière.
Ne passez pas trop de temps à obtenir 100. Même les sites de Google n’obtiennent pas un tel score.
Considérez-les comme des lignes directrices et essayez de les améliorer autant que possible.
Note: web.dev émule un test en utilisant un appareil mobile, et pendant que j’écris, je ne vois pas d’option pour tester en utilisant un ordinateur de bureau.
Chrome
Savez-vous que Lighthouse est disponible dans votre navigateur Chrome ? Et la bonne nouvelle, c’est que vous pouvez choisir de tester avec un appareil mobile ou un ordinateur de bureau, et que cette option est disponible dans les outils pour développeurs.
- Ouvrez le navigateur Chrome
- Accédez au site à tester
- Ouvrez les outils Developer (appuyez sur F12 si vous utilisez Windows) ou faites un clic droit sur la page et cliquez sur Inspecter.
- Allez dans l’onglet “Audits”.

Comme vous pouvez le voir ci-dessus, vous avez la possibilité de choisir ce que vous voulez tester. Cela vous permet de vous concentrer sur votre objectif et d’obtenir les résultats de l’audit plus rapidement.
L’apparence des résultats de Chome et de web.dev est presque similaire.

Mais si vous y regardez de plus près, vous constaterez qu’il existe un groupe de métriques supplémentaire – Progressive Web App. Une raison de plus pour auditer avec Chrome.
Geekflare Lighthouse API
Vous pouvez également obtenir les données de performance web avec l’API Geekflare Lighthouse. Cela permet d’extraire les métriques Lighthouse pour les mobiles ou les ordinateurs de bureau en un seul clic au format HTML, JSON ou CSV.

Vous pouvez également personnaliser le rapport en changeant le format de sortie et/ou en vous concentrant sur une mesure particulière comme le SEO.
{
"parameters" : [
"--output=html",
"--only-categories=seo",
],
"url" : "exemple.com"
}
Heureusement, nous disposons d’un niveau gratuit sans engagement qui comprend 3 000 appels d’API par mois. Cependant, les niveaux payants ajoutent un support multi-localisation, un proxy résidentiel et des taux de requêtes plus élevés, à partir de seulement 5 $ par mois.
Node.js
Lighthouse est disponible en tant que module Node. Vous pouvez l’installer sur votre serveur et l’utiliser par programme ou en ligne de commande. Voyons rapidement comment installer Lighthouse pour effectuer quelques tests.
Installation de Lighthouse sur Ubuntu 18.x
Ce qui suit a été testé sur le serveur DigitalOcean. Lighthouse nécessite Node LTS 8.9 ou plus, et je suppose que vous l’avez déjà installé. Si ce n’est pas le cas, reportez-vous à ce guide d’installation de Node.js.
Vous aurez également besoin d’un navigateur Chrome installé sur le serveur. J’ai couvert les instructions d’installation ici.
L’installation de Lighthouse est simple, comme pour les autres modules.
- Connectez-vous à votre serveur
- Exécutez la commande suivante pour installer
npm install -g lighthouse
J’utilise -g
ici, pour qu’il soit installé en tant que module global.
root@geekflarelab:~# npm install -g lighthouse
/usr/bin/lighthouse -> /usr/lib/node_modules/lighthouse/lighthouse-cli/index.js
/usr/bin/chrome-debug -> /usr/lib/node_modules/lighthouse/lighthouse-core/scripts/manual-chrome-launcher.js
> axe-core@3.1.2 postinstall /usr/lib/node_modules/lighthouse/node_modules/axe-core
> node build/utils/postinstall.js
lighthouse@4.0.0
a ajouté 179 paquets provenant de 119 contributeurs en 10.094s
root@geekflarelab:~#
Une fois installé, exécutez la commande lighthouse
pour vous assurer qu’il a été installé correctement.
root@geekflarelab:~# lighthouse
Veuillez fournir une url
Spécifiez --help pour les options disponibles
root@geekflarelab:~#
Bien, le lighthouse est prêt à exécuter l’audit. Essayons quelques options de test.
Pour exécuter un test à l’aide d’un navigateur sans tête
lighthouse URL --chrome-flags="--headless"
Vous devez fournir une URL absolue, y compris HTTP ou HTTPS.
Ex :
chandan@geekflarelab:~$ lighthouse https://geekflare.com --chrome-flags="--headless"
ChromeLauncher Attente du navigateur. 0ms
ChromeLauncher Attente du navigateur... 1ms
ChromeLauncher En attente du navigateur..... 511ms
ChromeLauncher Waiting for browser.....✓ 2ms
status Connexion au navigateur 176ms
status Réinitialisation de l'état avec <a href="https://geekflare.com/aboutblank-in-chrome-firefox-safari/">about :blank</a> 24ms
status Benchmarking machine 30ms
status Initializing.. 508ms
status Chargement de la page & waiting for onload Scripts, CSSUsage, Viewport, ViewportDimensions, ThemeColor, Manifest, RuntimeExceptions, ChromeConsoleMessages, ImageUsage, Accessibility, LinkElements, AnchorsWithNoRelNoopener, AppCacheManifest, Doctype, DOMStats, JSLibraries, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, MetaDescription, FontSize, CrawlableLinks, MetaRobots, Hreflang, EmbeddedContent, Canonical, RobotsTxt 27ms
status Retrieving in-page : Scripts 2s
status Récupération dans la page : CSSUsage 0ms
status Récupération dans la page : Viewport 0ms
status Récupération dans la page : ViewportDimensions 0ms
status Récupération dans la page : ThemeColor 0ms
status Récupération dans la page : Manifest 0ms
status Récupération dans la page : RuntimeExceptions 0ms
status Récupération dans la page : ChromeConsoleMessages 0ms
status Récupération dans la page : ImageUsage 0ms
status Récupération dans la page : Accessibility 0ms
status Récupération dans la page : LinkElements 0ms
status Récupération dans la page : AnchorsWithNoRelNoopener 1ms
status Récupération dans la page : AppCacheManifest 0ms
status Récupération dans la page : Doctype 0ms
status Récupération dans la page : DOMStats 0ms
status Récupération dans la page : JSLibraries 0ms
status Récupération dans la page : OptimizedImages 0ms
status Récupération dans la page : PasswordInputsWithPreventedPaste 0ms
status Récupération dans la page : ResponseCompression 0ms
status Récupération dans la page : TagsBlockingFirstPaint 0ms
status Récupération dans la page : MetaDescription 0ms
status Récupération dans la page : FontSize 0ms
status Récupération dans la page : CrawlableLinks 0ms
status Récupération dans la page : MetaRobots 0ms
status Récupération dans la page : Hreflang 0ms
status Récupération dans la page : EmbeddedContent 0ms
status Récupération dans la page : Canonical 0ms
status Récupération dans la page : RobotsTxt 0ms
status Récupération de trace 1ms
status Récupération de devtoolsLog & network records 110ms
status Récupération : Scripts 27ms
status Récupération : CSSUsage 53ms
status Récupération : Viewport 192ms
status Récupération : ViewportDimensions 5ms
status Récupération : ThemeColor 13ms
status Récupération : Manifest 2ms
status Récupération : RuntimeExceptions 295ms
status Récupération : ChromeConsoleMessages 1ms
état Récupération : ImageUsage 2ms
status Récupération : Accessibility 22ms
status Récupération : LinkElements 526ms
status Récupération : AnchorsWithNoRelNoopener 10ms
status Récupération : AppCacheManifest 6ms
status Récupération : Doctype 20ms
status Récupération : DOMStats 4ms
status Récupération : JSLibraries 50ms
status Récupération : OptimizedImages 25ms
status Récupération : PasswordInputsWithPreventedPaste 234ms
status Récupération : ResponseCompression 3ms
status Récupération : TagsBlockingFirstPaint 7ms
status Récupération : MetaDescription 6ms
status Récupération : FontSize 7ms
status Récupération : CrawlableLinks 245ms
status Récupération : MetaRobots 6ms
status Récupération : Hreflang 2ms
status Récupération : EmbeddedContent 2ms
status Récupération : Canonical 3ms
status Récupération : RobotsTxt 6ms
status Resetting state with <a href="https://geekflare.com/aboutblank-in-chrome-firefox-safari/">about:blank</a> 19ms
status Loading page & waiting for onload ServiceWorker, Offline, StartUrl 24ms
status Retrieving in-page : ServiceWorker 59ms
état Récupération de la page : Offline 0ms
status Récupération de la page : StartUrl 1ms
status Récupération des enregistrements devtoolsLog & network 0ms
status Récupération : ServiceWorker 2ms
status Récupération : Offline 1ms
status Récupération : StartUrl 1ms
status Resetting state with <a href="https://geekflare.com/aboutblank-in-chrome-firefox-safari/">about:blank</a> 5ms
status Loading page & waiting for onload HTTPRedirect, HTMLWithoutJavaScript 48ms
status Retrieving in-page : HTTPRedirect 260ms
état Récupération dans la page : HTMLWithoutJavaScript 0ms
état Récupération des enregistrements devtoolsLog & réseau 0ms
état Récupération : HTTPRedirect 7ms
status Récupération : HTMLWithoutJavaScript 12ms
status Déconnexion du navigateur... 7ms
status Analyse et exécution des audits... 6ms
status Evaluation : Utilise HTTPS 3ms
status Evalue : Redirection du trafic HTTP vers HTTPS 24ms
status Evaluation : Enregistrement d'un service worker qui contrôle la page et start_url 1ms
status Evaluation : La page actuelle répond avec un 200 lorsqu'elle est hors ligne 0ms
status Evaluating : A une balise `<meta name="viewport">` avec `width` ou `initial-scale` 1ms
status En cours d'évaluation : Contient du contenu lorsque JavaScript n'est pas disponible 1ms
status Evaluating : Première peinture de contenu 6ms
status Evaluating : Première peinture significative 54ms
status Evaluation : Le chargement de la page est suffisamment rapide sur les réseaux mobiles 10ms
status Evaluation : Speed Index 33ms
status Evaluation : Vignettes des captures d'écran 529ms
status Evaluation : Capture d'écran finale 287ms
status Evaluation : Estimation de la latence d'entrée 2ms
status Evaluation : Aucune erreur de navigateur n'a été enregistrée sur la console 16ms
status Evaluation : Les temps de réponse du serveur sont faibles (TTFB) 1ms
status Evaluation : First CPU Idle 1ms
status Evaluating : Temps d'interactivité 30ms
status Evaluation : User Timing marks and measures 0ms
status Evaluation : Minimiser la profondeur des requêtes critiques 2ms
status Évaluer : Éviter les redirections de pages multiples 3ms
status Évaluer : Le manifeste de l'application Web répond aux exigences d'installabilité 2ms
status Evaluer : Configuré pour un écran d'accueil personnalisé 1ms
status Evaluer : Définit une couleur de thème pour la barre d'adresse 0ms
status En cours d'évaluation : Le contenu est correctement dimensionné pour la fenêtre d'affichage 1ms
status Evaluating : Affiche les images avec un rapport d'aspect correct 0ms
status Évaluer : Évite les API obsolètes 1ms
status Évalue : Minimise le travail du fil principal 0ms
status Evalue : Temps d'exécution JavaScript 11ms
status Evaluation : Précharger les demandes de clés 3ms
status Evaluer : Pré-connexion aux origines requises 2ms
status Evaluation : Tout le texte reste visible pendant le chargement des webfonts 2ms
status Evaluation : Requêtes réseau 1ms
status Evaluation : Metrics 2ms
status Evaluating : start_url responds with a 200 when offline 1ms
status Evaluating : Le site fonctionne entre les navigateurs 1ms
status Evaluer : Les transitions de pages ne semblent pas bloquer sur le réseau 0ms
status Evaluating : Chaque page a une URL 0ms
status Evaluating : les attributs `[aria-*]` correspondent à leurs rôles 1ms
status Evaluation : les `[role]` ont tous les attributs `[aria-*]` requis 1ms
status Evaluation : Les éléments avec `[role]` qui requièrent des `[role]` enfants spécifiques sont présents 0ms
status Evaluating : les `[role]` sont contenus par leur élément parent requis 1ms
status Evaluating : les valeurs de `[role]` sont valides 1ms
status Evaluating : les attributs `[aria-*]` ont des valeurs valides 0ms
status Evaluation : les attributs `[aria-*]` sont valides et non mal orthographiés 1ms
status Evaluation : les éléments `<audio>` contiennent un élément `<track>` avec `[kind="captions"]` 1ms
status Evaluation : Les boutons ont un nom accessible 1ms
status Evaluating : La page contient un titre, un lien de saut ou une région repère 1ms
status Evaluating : Les couleurs d'arrière-plan et d'avant-plan présentent un rapport de contraste suffisant 1ms
status Evaluation : les `<dl>` ne contiennent que des groupes `<dt>` et `<dd>`, des éléments `<script>` ou `<template>` correctement ordonnés. 1ms
status Evaluating : Les éléments de la liste de définition sont enveloppés dans des éléments `<dl>` 0ms
status Evaluating : Le document contient un élément `<title>` 1ms
status Evaluating : les attributs `[id]` de la page sont uniques 1ms
status Evaluating : les éléments `<frame>` ou `<iframe>` ont un titre 1ms
status Evaluating : l'élément `<html>` a un attribut `[lang]` 0ms
status Evaluating : l'élément `<html>` a une valeur valide pour son attribut `[lang]` 1ms
status Evaluating : Les éléments d'image ont des attributs `[alt]` 1ms
status Evaluating : les éléments `<input type="image">` ont un texte `[alt]` 1ms
status Evaluating : Les éléments de formulaire ont des étiquettes associées 0ms
status Evaluating : Les éléments de présentation `<table>` évitent d'utiliser `<th>`, `<caption>` ou l'attribut `[summary]`. 1ms
status Evaluating : Les liens ont un nom perceptible. 1ms
status Evaluating : Les listes ne contiennent que des éléments `<li>` et des éléments de support de script (`<script>` et `<template>`). 1ms
status Evaluating : Les éléments de liste (`<li>`) sont contenus dans des éléments parents `<ul>` ou `<ol>`. 1ms
status Evaluating : Le document n'utilise pas `<meta http-equiv="refresh">` 0ms
status Evaluating : `[user-scalable="no"]` n'est pas utilisé dans l'élément `<meta name="viewport">` et l'attribut `[maximum-scale]` n'est pas inférieur à 5. 1ms
status Evaluating : les éléments `<object>` ont un texte `[alt]` 1ms
status Evaluating : Aucun élément n'a une valeur `[tabindex]` supérieure à 0 1ms
status Evaluating : Les cellules d'un élément `<table>` qui utilisent l'attribut `[headers]` ne font référence qu'à d'autres cellules du même tableau. 1ms
status Evaluating : les éléments `<th>` et les éléments avec `[role="columnheader"/"rowheader"]` ont des cellules de données qu'ils décrivent. 0ms
status Evaluating : les attributs `[lang]` ont une valeur valide 1ms
status Evaluating : les éléments `<video>` contiennent un élément `<track>` avec `[kind="captions"]` 1ms
status Evaluating : les éléments `<video>` contiennent un élément `<track>` avec `[kind="description"]` 1ms
status Evaluating : les valeurs de `[accesskey]` sont uniques 1ms
status Evaluating : Les contrôles personnalisés ont des étiquettes associées 0ms
status Evaluating : Les contrôles personnalisés ont des rôles ARIA 1ms
status Evaluating : Le focus de l'utilisateur n'est pas accidentellement piégé dans une région 0ms
status Evaluating : Les contrôles interactifs sont focalisables par le clavier 0ms
status Evaluating : Les titres ne sautent pas de niveau 0ms
status Evaluation : Les éléments interactifs indiquent leur but et leur état 1ms
status Evaluation : La page présente un ordre de tabulation logique 0ms
status Evaluating : L'attention de l'utilisateur est dirigée vers le nouveau contenu ajouté à la page 1ms
status Evaluating : Le contenu hors écran est caché aux technologies d'assistance 0ms
status Evaluating : Les éléments de repère HTML5 sont utilisés pour améliorer la navigation 0ms
status Evaluating : L'ordre visuel de la page suit l'ordre DOM 0ms
status Evaluating : Utilisation d'une politique de cache efficace pour les ressources statiques 1ms
status Evaluation : Évite d'énormes charges utiles de réseau 3ms
status Évaluer : Diffère les images hors écran 1ms
status Evalue : <a href="https://geekflare.com/eliminate-render-blocking-wordpress-plugins/">Éliminer les ressources bloquant le rendu</a> 12ms
status Évaluer : Minifier CSS 28ms
status Évaluer : Minifier JavaScript 64ms
status Evaluer : Différer les CSS inutilisés 69ms
status Evaluer : Servir les images dans des formats de nouvelle génération 12ms
status Evaluer : Encoder efficacement les images 11ms
status Evaluer : Activer la compression de texte 6ms
status Evaluer : Évaluer : dimensionner correctement les images 6ms
état Évaluer : utiliser des formats vidéo pour les contenus animés 7ms état Utiliser des formats vidéo pour les contenus animés 7ms
status Evaluer : Évite le cache d'application 11ms
status Évalue : La page a le doctype HTML 0ms
status Evaluation : Évite une taille excessive du DOM 1ms
status Évaluer : Les liens vers des destinations d'origine croisée sont sûrs 2ms
status Evaluation : Évite de demander la permission de géolocalisation au chargement de la page 1ms
status Évaluer : Évite `document.write()` 0ms
status Évaluer : Évite les bibliothèques JavaScript frontales présentant des vulnérabilités de sécurité connues 0ms
status Évalue : Bibliothèques JavaScript détectées 9ms
status Evaluation : Évite de demander l'autorisation de notification au chargement de la page 1ms
status Évaluer : Permet aux utilisateurs de coller dans les champs de mot de passe 0ms
status Evaluating : Utilise HTTP/2 pour ses propres ressources 0ms
status Évaluer : Utilise des auditeurs passifs pour améliorer les performances de défilement 1ms
status En cours d'évaluation : Le document a une méta-description 0ms
status Evaluating : La page a un code d'état HTTP réussi 1ms
status Évaluer : Le document utilise des tailles de police lisibles 5ms
status Evaluating : Les liens ont un texte descriptif 1ms
status Evaluer : La page n'est pas bloquée pour l'indexation 1ms
status Evaluation : robots.txt est valide 2ms
status Evaluation : Le document a un `hreflang` valide 1ms
status Evaluation : Le document évite les plugins 1ms
status Evaluation : Le document a un `rel=canonical` valide 0ms
status Evaluation : La page est adaptée aux mobiles 1ms
status Evaluation : Les données structurées sont valides 0ms
status Génération des résultats... 0ms
ChromeLauncher Killing Chrome instance 7098 59ms
Printer html output written to /home/chandan/geekflare.com_2019-01-20_19-29-35.report.html 46ms
CLI Protip : Run lighthouse with `--view` to immediately open the HTML report in your browser 1ms
Dans l’avant-dernière ligne, vous pouvez voir qu’il a imprimé le chemin pour trouver le rapport. Par défaut, il génère un rapport au format HTML, que vous pouvez visualiser soit en le téléchargeant sur votre PC, soit en le diffusant par l’intermédiaire d’un serveur web.
Mais que se passe-t-il si vous devez générer un rapport au format JSON?
C’est possible comme suit.
lighthouse URL --chrome-flags="--headless" --output json --output-path URL.json
En utilisant l’interface de programmation de Lighthouse, vous avez le contrôle total pour l’utiliser comme vous le souhaitez. Je vous recommande vivement de consulter le dépôt GitHub pour en savoir plus sur l’utilisation de l’interface CLI ou de la programmation.
Conclusion
Google Lighthouse semble être un outil prometteur pour effectuer un test de continuité afin d’améliorer les performances et la convivialité du site. Si vous utilisez WordPress et que vous cherchez à accélérer le chargement de votre site, jetez un coup d’œil à Rocket.