Trois options pour les tests automatisés des phares

Si vous lisez ceci, vous êtes probablement déjà conscient de l’importance des performances de la page d’accueil pour l’expérience de l’utilisateur final. Vous travaillez peut-être même à améliorer les performances de vos pages et à utiliser Lighthouse pour suivre vos progrès.

Bien qu’il soit assez facile d’exécuter des tests via l’onglet Lighthouse sous les outils de développement de Chrome, il y a quelques points importants à garder à l’esprit :

• Les extensions de navigateur installées peuvent affecter le score, nous devons donc nous rappeler de toujours exécuter Lighthouse dans un onglet Incognito,
• Tout ce qui est rendu sur la page, comme les cookies, les sélections des utilisateurs ou les notifications, peut modifier le score final de la page. Il est donc important de garantir un état de page identique sur différentes exécutions pour effectuer des comparaisons précises.
• Enfin, même après avoir contrôlé l’état de la page, vous pouvez constater que le score fluctue considérablement à chaque fois que vous exécutez le test. Dans ce cas, il peut être utile de faire la moyenne du score sur plusieurs exécutions, plutôt que de se fier à un seul échantillon.

L’automatisation peut aider à résoudre toutes les préoccupations ci-dessus en garantissant la répétabilité et en vous permettant d’exécuter rapidement plusieurs tests. Nous pouvons également utiliser des scripts pour calculer le score moyen à partir de plusieurs rapports.

Enfin, vous pouvez utiliser l’automatisation pour créer un tableau de bord qui suit le score de pages spécifiques au fil du temps, pour vous assurer que votre site Web évolue dans la bonne direction. Cela vous permettra également d’intercepter toutes les modifications qui affectent par inadvertance les performances de la page.

J’ai expérimenté trois approches différentes pour automatiser les tests Lighthouse. Vous trouverez ci-dessous un aperçu de haut niveau de chacun, ainsi que certains des principaux avantages et inconvénients.

Sitespeed.io

Sitespeed.io est un outil open source pour tester et surveiller votre site Web. Vous pouvez l’installer en tant que conteneur Docker ou en tant que module npm. Il est très puissant, avec la possibilité de tester les performances des pages dans Chrome et Firefox. Les rapports générés non seulement détaillent les métriques de la page, mais incluent également un enregistrement vidéo de la session du navigateur.

Passer en revue toutes les fonctionnalités de Sitespeed.io pourrait remplir toute une série d’articles de blog mais, pour nos besoins, je mentionnerai simplement le Plugin Phare qui ajoute Lighthouse à la suite de tests exécutés.

Avantages

• Outil puissant pour tout ce qui concerne les performances Web
• Tableau de bord des performances facile à configurer via le fichier de composition Docker fourni
• Excellente documentation
• Interactions de page personnalisées / automatisation du navigateur possible via Selenium

Les inconvénients

• Peut-être exagéré pour un développeur à la recherche de résultats de test Lighthouse rapides
• Un bogue ouvert avec le plugin Lighthouse au moment de mes tests m’a empêché de l’utiliser pour générer des scores Lighthouse

Utiliser un conteneur Docker

Pour cette option, nous utilisons un conteneur Docker existantqui peut être récupéré via : docker pull femtopixel/google-lighthouse

Les tests sont ensuite exécutés via la ligne de commande. L’exemple suivant teste la page d’accueil de Google et écrit les résultats du test dans un fichier JSON :

docker run --rm --name lighthouse -it -v "/path/to/your/report:/home/chrome/reports" femtopixel/google-lighthouse http://www.google.com –output=json --chrome-flags="--ignore-certificate-errors"

Une documentation complémentaire est disponible sur la page GitHub.

Avantages

• Rien à installer (autre que Docker)
• Le plus rapide à mettre en place
• Peut scripter avec PowerShell

Les inconvénients

• Pas de prise en charge des interactions de page personnalisées / automatisation du navigateur
• Erreurs de réseau Docker signalées par certains utilisateurs

Utiliser Node.js

Selon La propre documentation de Google, la « Node CLI offre la plus grande flexibilité dans la façon dont les exécutions de Lighthouse peuvent être configurées et signalées ». Lighthouse peut être installé en tant que module npm global via : npm install -g lighthouse

Les tests peuvent ensuite être exécutés via la ligne de commande. La syntaxe est très similaire à celle du conteneur Docker ci-dessus. La commande suivante exécutera un test équivalent :

lighthouse https://www.google.com --output=json --output-path=./test.json --chrome-flags="--ignore-certificate-errors"

Le principal avantage de cette approche, par rapport au conteneur Docker, est la possibilité de utiliser Puppeteer pour les interactions de page comme l’authentification.

Avantages

• Approche recommandée par Google
• Interactions de page personnalisées / automatisation du navigateur possible via Puppeteer
• Peut scripter avec JavaScript

Les inconvénients

• Est uniquement compatible avec les dernières versions de Node.js. Cela peut vous obliger à basculer entre les versions pour exécuter Lighthouse et le développement du site

Bien que la manière dont vous testez votre site n’ait pas d’importance, il est important d’intégrer les tests Lighthouse à la fois dans votre processus de développement et de suivre les tendances des performances de votre site au fil du temps.
J’espère que vous pourrez adopter l’une des approches ci-dessus pour répondre à vos besoins. Nous devrions également pouvoir combiner le meilleur des approches Docker et Node.js, en créant un conteneur qui inclut Lighthouse et Puppeteer. Veuillez me faire savoir si j’ai oublié un conteneur existant qui fait cela.