Comment tester votre site avec Google Lighthouse ?

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.