Auditer la performance d’une page web avec Lighthouse

Lighthouse est un outil open-source et automatique fourni par Google pour améliorer la qualité des pages Web, notamment les temps de chargement. Vous pouvez l’exécuter sur n’importe quelle page de votre site web, même celles nécessitants une authentification pour s’afficher. L’outil fournit différents audits dont :

  • Performance globale
  • Accessibilité
  • PWA (Progressive Web Apps)

Vous pouvez voir un exemple d’audit que j’ai réalisé ici (site leboncoin) : http://etienne-lesaffre.fr/exemples/www.leboncoin.fr_2017-10-03_15-04-23.html

Il existe trois méthodes pour exploiter Lighthouse. Tout d’abord, une extension pour le navigateur Chrome : Chrome DevTools. Vous pouvez également utiliser l’outil en lignes de commande ou tant que module Node. Vous indiquez à Lighthouse une URL qui exécute ensuite une série de tests et audits sur la page. Un rapport complet est ensuite généré en indiquant les scores et résultats de tous les éléments testés.

Charge à vous ensuite, par l’analyse de ce rapport, d’améliorer les performances de votre page. Nous allons faire ensemble le tour de l’outil en version extension pour Chrome.

Installer Lighthouse Chrome Extension

Depuis votre navigateur Chrome, rendez vous sur la page de l’extension : https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk

Une fois l’extension installée vous fait 95% du travail ! Vous avez maintenant une petite icône avec un phare en haut à droite dans la barre d’outils de Chrome :

En cliquant dessus, vous avez la possibilité de générer un rapport. Vous pouvez avant cliquer sur « options » mais je vous conseille de laisser la configuration par défaut. Cette configuration réalise tous les tests :

Premier audit de page web

Pour générer votre premier rapport, commencez par vous rendre sur la page à tester. Dans cet exemple, je me sers de la page d’accueil du site Le Bon Coin. Une fois sur la page, cliquez sur le petit phare puis « generate report ».

L’extension fait alors les différents tests et audits …

Cela prend 1 à 2 minutes pour réaliser l’ensemble des opérations. Vous avez ensuite un rapport au format HTML qui s’ouvre dans un nouvel onglet. J’avais mis le lien vers le rapport Le Bon Coin en début d’article, je vous le remets ici : http://etienne-lesaffre.fr/exemples/www.leboncoin.fr_2017-10-03_15-04-23.html

Je me base sur ce rapport pour la suite de l’article.

Analyser les résultats

Il est temps de passer à l’épluchage des résultats. Vous avez tout en haut du rapport des indicateurs de performances. Vous les retrouvez également dans la colonne de gauche, ils servent alors de liens vers les audits.

Vous avez accès à 4 sections :

  • Progressive Web App
  • Performance
  • Accessibility
  • Best Practices

C’est surtout la partie « Performance » qui nous intéresse aujourd’hui et nous allons donc se concentrer dessus.

Le haut de cet audit vous montre visuellement et chronologiquement le chargement de votre page :

Cette partie, que le rapport appelle « metrics » contient également différents temps de chargement :

Ils correspondent dans l’ordre de présentation :

1 – First meaningful paint : c’est le temps avant que le contenu dit primaire s’affiche. Dans notre cas, un peu plus de 3 secondes.

2 – First interactive : c’est le temps passé pour que l’ensemble des scripts nécessaires au bon fonctionnement de la page soient chargés.

3 – Consistently interactive : c’est le temps nécessaires pour que toutes les ressources soient chargées. Ici on dépasse les 16 secondes.

Attention : ces audits dépendent de la vitesse de chargement de la page par le serveur mais sont également dépendants de votre bande passante. En effet, le test se fait côté client. Pour un test plus précis, il vous faudra utiliser la méthode Node citée en haut d'article.

Les autres chiffres restent valables : le poids des images, des scripts et des feuilles de style, etc .. on les appelle des « opportunités » :

Dans notre exemple, on voit que le script nommé beta_base_70959.js fait 147 ko … Lighthouse conseille donc de minifier les scripts. La première méthode à exploiter est le « inline ». C’est à dire qu’on ne met pas de retour à ligne ou d’incrémentation. L’ensemble du script est sur une ligne. Cela à pour effet de diminuer légèrement les temps de chargement. Une erreur qu’on retrouve très souvent est le fait de charger l’ensemble des JS sur toutes les pages … même si on en a pas besoin. Beaucoup trop de données sont alors téléchargées pour rien.

Le reste des informations vous indiquent clairement ce qui prend du temps à être chargé ou ce qui est contre ergonomique, avec par exemple l’analyse du contraste de la page :

Dans la section best pratices, on retrouve un ensemble de conseils sur l’optimisation technique, avec par exemple :

  • exploiter WebP pour les images
  • ne pas utiliser document.write() en JS
  • etc ..

Ces éléments feront l’objet d’un prochain article pour en expliquer les mécanismes.

Vous savez maintenant comment faire un audit technique rapide de vos pages 🙂

Vous avez aimé ? Partagez 🙂

3 commentaires sur “Auditer la performance d’une page web avec Lighthouse

  1. Ping : Perceptual Speed Index : définition et axes d'amélioration - Etienne Lesaffre

  2. Ping : SEO | Pearltrees

  3. Ping : Auditer la performance d'une page web avec Lighthouse – Etienne Lesaffre | Business Marketing Service

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *