Définir un budget de performances à l'aide du bot Lighthouse

Vous avez travaillé dur pour accélérer, maintenant assurez-vous de rester rapide en automatisant les tests de performances avec le robot Lighthouse.

Lighthouse classe votre application dans cinq catégories, dont les performances. Vous pouvez essayer de vous souvenir de surveiller les changements de performances avec DevTools ou Lighthouse CLI chaque fois que vous modifiez votre code, mais ce n'est pas obligatoire. Les outils peuvent faire les tâches fastidieuses à votre place. Travis CI est un excellent service qui exécute automatiquement des tests pour votre application dans le cloud chaque fois que vous transférez du nouveau code.

Lighthouse Bot s'intègre à Travis CI, et sa fonctionnalité de budget de performances garantit que vous ne diminuerez pas accidentellement les performances sans vous en apercevoir. Vous pouvez configurer votre dépôt pour qu'il n'autorise pas la fusion des requêtes pull si les scores Lighthouse sont inférieurs au seuil que vous avez défini (par exemple, < 96/100).

Échecs des vérifications du bot Lighthouse sur GitHub
Le robot Lighthouse vérifie sur GitHub.

Bien que vous puissiez tester les performances sur localhost, les performances de votre site seront souvent différentes sur les serveurs en ligne. Pour obtenir une image plus réaliste, il est préférable de déployer votre site sur un serveur de préproduction. Vous pouvez utiliser n'importe quel service d'hébergement. Ce guide utilise Firebase Hosting.

1. Configuration

Cette application simple vous aide à trier trois nombres.

Clonez l'exemple à partir de GitHub et veillez à l'ajouter en tant que dépôt sur votre compte GitHub.

2. Déployer sur Firebase

Pour commencer, vous devez disposer d'un compte Firebase. Une fois que vous avez terminé, créez un projet dans la console Firebase en cliquant sur "Ajouter un projet" :

Déployer sur Firebase

Vous aurez besoin de la CLI Firebase pour déployer l'application. Même si vous l'avez déjà installée, il est recommandé de mettre régulièrement à jour la CLI vers la dernière version à l'aide de cette commande :

npm install -g firebase-tools

Pour autoriser la CLI Firebase, exécutez la commande suivante:

firebase login

Initialisez maintenant le projet :

firebase init

La console vous posera une série de questions lors de la configuration :

  • Lorsque vous êtes invité à sélectionner des fonctionnalités, choisissez "Hébergement".
  • Pour le projet Firebase par défaut, sélectionnez le projet que vous avez créé dans la console Firebase.
  • Saisissez "public" comme répertoire public.
  • Saisissez "N" (non) pour configurer l'application en tant qu'application monopage.

Ce processus crée un fichier de configuration firebase.json dans la racine du répertoire de votre projet.

Félicitations, vous êtes prêt à effectuer le déploiement ! Exécutez la commande suivante :

firebase deploy

En un clin d'œil, votre application sera en ligne.

3. Configurer Travis

Vous devez enregistrer un compte sur Travis, puis activer l'intégration des applications GitHub dans la section "Paramètres" de votre profil.

Intégration de GitHub Apps sur Travis CI

Une fois que vous avez un compte

Accédez à "Paramètres" sous votre profil, cliquez sur le bouton "Synchroniser le compte" et assurez-vous que le dépôt de votre projet est listé sur Travis.

Pour lancer l'intégration continue, vous avez besoin de deux choses:

  1. disposer d'un fichier .travis.yml dans le répertoire racine ;
  2. Pour déclencher une compilation à l'aide d'une commande git push classique

Le dépôt lighthouse-bot-starter contient déjà un fichier YAML .travis.yml :

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

Le fichier YAML indique à Travis d'installer toutes les dépendances et de compiler votre application. C'est maintenant à votre tour de transférer l'exemple d'application vers votre propre dépôt GitHub. Si ce n'est pas déjà fait, exécutez la commande suivante :

git push origin main

Dans Travis, cliquez sur votre dépôt sous "Settings" (Paramètres) pour afficher le tableau de bord Travis de votre projet. Si tout se passe bien, votre build passe du jaune au vert en quelques minutes. 🎉

4. Automatiser le déploiement Firebase avec Travis

À l'étape 2, vous vous êtes connecté à votre compte Firebase et avez déployé l'application à partir de la ligne de commande avec firebase deploy. Pour que Travis puisse déployer votre application sur Firebase, vous devez l'autoriser. Comment procéder ? Avec un jeton Firebase. 🗝️🔥

Autoriser Firebase

Pour générer le jeton, exécutez la commande suivante :

firebase login:ci

Un nouvel onglet s'ouvre dans une fenêtre de navigateur pour que Firebase puisse vous valider. Ensuite, revenez à la console et vous verrez votre jeton fraîchement créé. Copiez-le, puis revenez à Travis.

Dans le tableau de bord Travis de votre projet, accédez à More options > Settings > Environment variables (Plus d'options > Paramètres > Variables d'environnement).

Collez le jeton dans le champ de valeur, nommez la variable FIREBASE_TOKEN, puis ajoutez-la.

Ajouter un déploiement à votre configuration Travis

Vous avez besoin des lignes suivantes pour indiquer à Travis de déployer l'application après chaque compilation réussie. Ajoutez-les à la fin du fichier .travis.yml. 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

Transmettez cette modification à GitHub et attendez votre premier déploiement automatique. Si vous consultez le journal Travis, vous devriez bientôt voir le message ✔️ Déploiement terminé.

Désormais, chaque fois que vous apportez des modifications à votre application, elles sont automatiquement déployées dans Firebase.

5. Configurer le robot Lighthouse

Le robot Friendly Lighthouse vous informe des scores Lighthouse de votre application. Il vous suffit d'être invité à votre dépôt.

Sur GitHub, accédez aux paramètres de votre projet et ajoutez "lighthousebot" en tant que collaborateur (Paramètres > Collaborateurs) :

État du collaborateur du bot Lighthouse

L'approbation de ces demandes est un processus manuel, qui n'est donc pas toujours immédiat. Avant de commencer les tests, assurez-vous que lighthousebot a approuvé son statut de collaborateur. En attendant, vous devez également ajouter une autre clé aux variables d'environnement de votre projet sur Travis. Laissez votre adresse e-mail ici. Vous recevrez une clé Lighthouse Bot dans votre boîte de réception. 📬

Sur Travis, ajoutez cette clé en tant que variable d'environnement et nommez-la LIGHTHOUSE_API_KEY :

Ajouter le bot Lighthouse à votre projet

Ajoutez ensuite Lighthouse Bot à votre projet en exécutant cette commande :

npm i --save-dev https://github.com/ebidel/lighthousebot

Ajoutez ce bit à package.json:

"scripts": {
  "lh": "lighthousebot"
}

Ajouter le bot Lighthouse à votre configuration Travis

Pour la dernière astuce, testez les performances de l'application après chaque demande d'extraction.

Dans .travis.yml, ajoutez une autre étape dans after_success:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

Un audit Lighthouse sera exécuté sur l'URL donnée. Remplacez donc https://staging.example.com par l'URL de votre application (votre-application-123.firebaseapp.com).

Fixez des normes élevées et ajustez la configuration afin de ne pas accepter de modifications de l'application qui réduiraient le score de performances en dessous de 95 :

- npm run lh -- --perf=95 https://staging.example.com

Envoyer une demande d'extraction pour déclencher le test du bot Lighthouse sur Travis

Lighthouse Bot ne teste que les requêtes pull. Par conséquent, si vous effectuez un push vers la branche principale maintenant, le message "Ce script ne peut être exécuté que sur les requêtes PR Travis" s'affichera dans votre journal Travis.

Pour déclencher le test du bot Lighthouse:

  1. Extraire une nouvelle branche
  2. Transférer le dépôt vers GitHub
  3. Envoyer une demande d'extraction

Patientez sur la page de la demande de tirage et attendez que le robot Lighthouse chante ! 🎤

Scores Lighthouse acceptables

Passer les vérifications GitHub

Le score de performances est excellent, l'application est en dessous du budget et le contrôle est réussi.

Autres options Lighthouse

Vous vous souvenez que Lighthouse teste cinq catégories différentes ? Vous pouvez appliquer des scores à tous les éléments associés à des indicateurs de robot Lighthouse :

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

Exemple :

npm run lh -- --perf=93 --seo=100 https://staging.example.com

La publication échouera si le score de performances passe sous 93 ou si le score SEO passe sous 100.

Vous pouvez également choisir de ne pas recevoir les commentaires du bot Lighthouse avec l'option --no-comment.