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 lighthouseJ’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
ajout de 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/fr --chrome-flags="--headless"
ChromeLauncher Attente du navigateur. 0ms
ChromeLauncher Attente du navigateur... 1ms
ChromeLauncher attend le navigateur..... 511 ms
ChromeLauncher En attente du navigateur.....✓ 2ms
état Connexion au navigateur 176ms
status Réinitialisation de l'état avec about:blank 24ms
status Benchmarking machine 30ms
état Initialisation... 508ms
état Chargement de la page & en attente de 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 Récupération dans la page : Scripts 2s
status Retrieving in-page : CSSUsage 0ms
état Récupération dans la page : Viewport 0ms
status Retrieving in-page : ViewportDimensions 0ms
status Retrieving in-page : ThemeColor 0ms
status Retrieving in-page : Manifest 0ms
status Retrieving in-page : RuntimeExceptions 0ms
état Récupération dans la page : ChromeConsoleMessages 0ms
état Récupération dans la page : ImageUsage 0ms
état Récupération dans la page : Accessibilité 0ms
état Récupération dans la page : LinkElements 0ms
état Récupération dans la page : AnchorsWithNoRelNoopener 1ms
état Récupération dans la page : AppCacheManifest 0ms
status Retrieving in-page : Doctype 0ms
status Récupération dans la page : DOMStats 0ms
status Retrieving in-page : JSLibraries 0ms
status Retrieving in-page : OptimizedImages 0ms
status Retrieving in-page : PasswordInputsWithPreventedPaste 0ms
état Récupération dans la page : ResponseCompression 0ms
état Récupération dans la page : TagsBlockingFirstPaint 0ms
status Retrieving in-page : MetaDescription 0ms
status Retrieving in-page : FontSize 0ms
état Récupération dans la page : CrawlableLinks 0ms
état Récupération dans la page : MetaRobots 0ms
status Retrieving in-page : Hreflang 0ms
status Retrieving in-page : EmbeddedContent 0ms
status Retrieving in-page : Canonical 0ms
status Retrieving in-page : RobotsTxt 0ms
état Récupération de la trace 1ms
état Récupération des enregistrements devtoolsLog et réseau 110ms
état Récupération : Scripts 27ms
état Récupération : CSSUsage 53ms
état Récupération : Viewport 192ms
état Récupération : ViewportDimensions 5ms
status Retrieving : ThemeColor 13ms
état Récupération : Manifest 2ms
état Récupération : RuntimeExceptions 295ms
état Récupération : ChromeConsoleMessages 1ms
état Récupération : ImageUsage 2ms
état Récupération : Accessibilité 22ms
état Récupération : LinkElements 526ms
état Récupération : AnchorsWithNoRelNoopener 10ms
état Récupération : AppCacheManifest 6ms
état Récupération : Doctype 20ms
status Récupération : DOMStats 4ms
état Récupération : JSLibraries 50ms
état Récupération : OptimizedImages 25ms
état Récupération : PasswordInputsWithPreventedPaste 234ms
état Récupération : ResponseCompression 3ms
état Récupération : TagsBlockingFirstPaint 7ms
état Récupération : MetaDescription 6ms
status Retrieving : FontSize 7ms
état Récupération : CrawlableLinks 245ms
état Récupération : MetaRobots 6ms
état Récupération : Hreflang 2ms
état Récupération : EmbeddedContent 2ms
état Récupération : Canonical 3ms
état Récupération : RobotsTxt 6ms
status Réinitialisation de l'état avec about:blank 19ms
status Loading page & waiting for onload ServiceWorker, Offline, StartUrl 24ms
état Récupération dans la page : ServiceWorker 59ms
état Récupération de la page : Offline 0ms
état Récupération dans la page : StartUrl 1ms
status Retrieving devtoolsLog & network records 0ms
état Récupération : ServiceWorker 2ms
état Récupération : Offline 1ms
état Récupération : StartUrl 1ms
status Réinitialisation de l'état avec about:blank 5ms
status Loading page & waiting for onload HTTPRedirect, HTMLWithoutJavaScript 48ms
état Récupération dans la page : HTTPRedirect 260ms
état Récupération dans la page : HTMLSansJavaScript 0ms
état Récupération des enregistrements devtoolsLog et réseau 0ms
état Récupération : HTTPRedirect 7ms
état Récupération : HTMLSansJavaScript 12ms
état Déconnexion du navigateur... 7ms
état Analyse et exécution des audits... 6ms
état Évaluation : Utilise HTTPS 3ms
état Évaluation : Redirection du trafic HTTP vers HTTPS 24 ms
état En cours d'évaluation : Enregistre un service worker qui contrôle la page et start_url 1ms
état Evaluating : 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 Evaluating : Contient du contenu lorsque JavaScript n'est pas disponible 1ms
status Evaluating : Première peinture Contentful 6ms
statut Évaluer : Première peinture significative 54ms
état Évaluer : Le chargement de la page est suffisamment rapide sur les réseaux mobiles 10ms
état Évaluer : Indice de vitesse 33ms
état Évaluation : Vignettes des captures d'écran 529 ms
état Évaluer : Capture d'écran finale 287ms
état Évaluation : Estimation de la latence d'entrée 2ms
état Évaluer : Aucune erreur de navigateur enregistrée sur la console 16ms
état Évaluer : Les temps de réponse du serveur sont faibles (TTFB) 1ms
état Évaluation : Premier CPU au repos 1ms
état Évaluation : Temps d'interactivité 30ms
état Évaluation : Marques de temps et mesures de l'utilisateur 0ms
état Évaluation : Minimiser la profondeur des demandes critiques 2ms
état Évaluer : Éviter les redirections de pages multiples 3ms
état Évaluer : Le manifeste de l'application Web répond aux exigences d'installabilité 2ms
état Évaluer : Configuré pour un écran de démarrage personnalisé 1ms
état Évaluer : Configuré pour un écran d'accueil personnalisé 1ms Définit une couleur de thème pour la barre d'adresse 0ms
status Evaluating : Le contenu est correctement dimensionné pour la fenêtre d'affichage 1ms
état En cours d'évaluation : Affiche les images avec le bon rapport hauteur/largeur 0ms
état En cours d'évaluation : Évite les API obsolètes 1ms
état Évaluation : Minimise le travail du fil principal 0ms
état Évaluer : Temps d'exécution JavaScript 11ms
état Évaluer : Préchargement des demandes de clés 3 ms
état Évaluation : Pré-connexion aux origines requises 2ms
état Évaluation : Tout le texte reste visible pendant le chargement des polices web 2ms
état Évaluer : Requêtes du réseau 1ms
état Évaluation : Métriques 2ms
status Evaluating : start_url responds with a 200 when offline 1ms
état Évaluer : Le site fonctionne entre les navigateurs 1ms
état Évaluer : Les transitions de page ne donnent pas l'impression de bloquer sur le réseau 0ms
état Évaluer : Chaque page a une URL 0ms
état Évaluation : les attributs `[aria-*]` correspondent à leurs rôles 1ms
état Évaluation : les `[role]` ont tous les attributs `[aria-*]` requis 1ms
status Evaluating : 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
état Évaluation : les attributs `[aria-*]` sont valides et non mal orthographiés 1ms
status Evaluating : les éléments `<audio>` contiennent un élément `<track>` avec `[kind="captions"]` 1ms
status Evaluating : 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
état Évaluation : Les couleurs d'arrière-plan et de premier plan présentent un rapport de contraste suffisant 1ms
état Évaluation : la page contient un titre, un lien de saut ou une région repère 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 comporte 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 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
état Évaluation : Les éléments de présentation `<table>` évitent d'utiliser `<th>`, `<caption>` ou l'attribut `[summary]`. 1ms
état d'évaluation : Les liens ont un nom perceptible. 1ms
état en cours d'évaluation : 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 la 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
état Évaluation : Le focus de l'utilisateur n'est pas accidentellement piégé dans une région 0ms
état Évaluation : Les contrôles interactifs sont focalisables par le clavier 0ms
état Évaluation : Les titres ne sautent pas de niveau 0ms
état Évaluation : Les éléments interactifs indiquent leur but et leur état 1ms
état Évaluation : La page a un ordre de tabulation logique 0ms
état En cours d'évaluation : L'attention de l'utilisateur est dirigée vers le nouveau contenu ajouté à la page 1ms
état En cours d'évaluation : Le contenu hors écran est caché aux technologies d'assistance 0ms
état Évaluer : Les éléments de repère HTML5 sont utilisés pour améliorer la navigation 0ms
état évaluant : l'ordre visuel de la page suit l'ordre DOM L'ordre visuel de la page suit l'ordre DOM 0ms
état En cours d'évaluation : Utilisation d'une politique de cache efficace pour les ressources statiques 1ms
état Évaluation : Évite d'énormes charges utiles de réseau 3ms
état Évaluer : Diffère les images hors écran 1ms
état Évaluer : <a href="https://geekflare.com/fr/eliminate-render-blocking-wordpress-plugins/">Élimination des ressources bloquant le rendu</a> 12 ms
état Évaluer : Minifier les CSS 28 ms
état Évaluer : Minimiser JavaScript 64ms
état Évaluer : Report des feuilles de style CSS non utilisées 69 ms
état Évaluer : Servir les images dans des formats de nouvelle génération 12 ms
état Évaluer : Encodage efficace des images 11ms
état Évaluer : Activer la compression de texte 6ms
état Évaluer : Dimensionner correctement les images 6ms
état Évaluer : Utiliser des formats vidéo pour les contenus animés 7ms
état Évaluer : Évite le cache d'application 11ms
état Évaluation : La page a le doctype HTML 0ms
état Évaluer : Évite une taille excessive du DOM 1ms
état Évaluer : Les liens vers des destinations d'origine croisée sont sûrs 2ms
état Évaluer : Évite de demander l'autorisation de géolocalisation au chargement de la page 1ms
état Évaluer : Évite `document.write()` 0ms
état En cours d'évaluation : Évite les bibliothèques JavaScript frontales avec des vulnérabilités de sécurité connues 0ms
état Évaluer : Détecte les bibliothèques JavaScript 9ms
état Évaluer : Évite de demander l'autorisation de notification au chargement de la page 1ms
état En cours d'évaluation : Permet aux utilisateurs de coller dans les champs de mot de passe 0ms
état En cours d'évaluation : Utilise HTTP/2 pour ses propres ressources 0 ms
état En cours d'évaluation : Utilise des auditeurs passifs pour améliorer les performances de défilement 1ms
état En cours d'évaluation : Le document possède une méta-description 0ms
état En cours d'évaluation : La page a un code d'état HTTP réussi 1ms
état Évaluer : Le document utilise des tailles de police lisibles 5ms
état Évaluer : Le document utilise des tailles de police lisibles 5ms Les liens ont un texte descriptif 1ms
état Évaluer : La page n'est pas bloquée pour l'indexation 1ms
état Evaluation : robots.txt est valide 2ms
état Évaluation : Le document a un `hreflang` valide 1ms
status Evaluating : Le document évite les plugins 1ms
status Evaluating : Le document a un `rel=canonical` valide 0ms
état Évaluer : La page est adaptée aux mobiles 1ms
status Evaluating : Les données structurées sont valides 0ms
état Génération des résultats... 0ms
ChromeLauncher Suppression de l'instance de Chrome 7098 59ms
Imprimante html écrite dans /home/chandan/geekflare.com/fr_2019-01-20_19-29-35.report.html 46ms
CLI Protip : Exécutez lighthouse avec `--view` pour ouvrir immédiatement le rapport HTML dans votre navigateur 1msDans 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.jsonEn 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.