Vous avez travaillé dur pour être rapide ? Assurez-vous maintenant de le rester en automatisant les tests de performances avec Lighthouse Bot.
Lighthouse classe votre application dans cinq catégories, dont les performances. Bien que vous puissiez essayer de surveiller les changements de performances avec DevTools ou Lighthouse CLI chaque fois que vous modifiez votre code, cela n'est pas nécessaire. Les outils peuvent faire les choses 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 s'intègre à Travis CI, et sa fonctionnalité de budget de performances vous évite de rétrograder accidentellement les performances sans vous en apercevoir. Vous pouvez configurer votre dépôt afin qu'il n'autorise pas la fusion de demandes d'extraction si les scores Lighthouse sont inférieurs au seuil que vous avez défini (par exemple, inférieur à 96/100).
Bien que vous puissiez tester les performances sur localhost, votre site se comportera souvent différemment sur des 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 est conçu pour tester Firebase Hosting.
1. Préparation
Cette application simple vous aide à trier trois chiffres.
Clonez l'exemple à partir de GitHub et assurez-vous de l'ajouter en tant que dépôt sur votre compte GitHub.
2. Déployer sur Firebase
Pour commencer, vous aurez besoin d'un compte Firebase. Une fois cette opération effectuée, 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 elle est déjà installée, il est recommandé d'installer fréquemment la dernière version de la CLI à l'aide de la commande suivante:
npm install -g firebase-tools
Pour autoriser la CLI Firebase, exécutez la commande suivante:
firebase login
À présent, initialisez le projet:
firebase init
Lors de la configuration, vous devrez répondre à une série de questions:
- Lorsque vous êtes invité à sélectionner des fonctionnalités, choisissez "Hosting" (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 à la racine du répertoire de votre projet.
Félicitations, vous êtes prêt pour le déploiement ! Exécutez la commande suivante :
firebase deploy
L'application est diffusée en l'espace d'une fraction de seconde.
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.
Une fois que vous avez un compte
Accédez à "Settings" (Paramètres) sous votre profil, cliquez sur le bouton "Sync account" (Synchroniser le compte), puis assurez-vous que votre dépôt de projet est listé sur Travis.
Pour lancer l'intégration continue, vous avez besoin des deux éléments suivants:
- Disposer d'un fichier
.travis.ymldans le répertoire racine - Déclencher une compilation en effectuant une commande Git obsolète
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. À présent, c'est à votre tour de transférer l'exemple d'application vers votre propre dépôt GitHub. Si vous ne l'avez pas déjà fait, exécutez la commande suivante:
git push origin main
Cliquez sur votre dépôt sous "Settings" (Paramètres) dans Travis pour afficher le tableau de bord Travis de votre projet. Si tout va bien, votre build passera 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 permettre à Firebase de valider votre identité. Revenez ensuite dans la console. Vous verrez le jeton que vous venez de générer. Copiez-le et revenez dans Travis.
Dans le tableau de bord Travis de votre projet, accédez à More options > Settings > Environment variables (Autres 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
Déployez cette modification sur GitHub et attendez votre premier déploiement automatisé. Si vous examinez votre journal Travis, le message suivant devrait bientôt s'afficher : ✔️ Deploy terminé !
Désormais, chaque fois que vous apportez des modifications à votre application, elles sont automatiquement déployées dans Firebase.
5. Configurer le bot Lighthouse
Le bot amical Lighthouse vous informe sur les scores Lighthouse de votre application. Il suffit d'être invité à accéder à votre dépôt.
Sur GitHub, accédez aux paramètres de votre projet et ajoutez "lighthousebot " en tant que collaborateur (Settings> Collaborators) (Paramètres> Collaborateurs):
L'approbation de ces requêtes étant un processus manuel, elles ne s'effectuent pas toujours instantanément. 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 e-mail ici. Vous recevrez une clé de bot Lighthouse par e-mail. 📬
Sur Travis, ajoutez cette clé en tant que variable d'environnement et nommez-la LIGHTHOUSE_API_KEY:
Ajouter le bot Lighthouse à votre projet
Ensuite, ajoutez le bot Lighthouse à votre projet en exécutant la commande suivante:
npm i --save-dev https://github.com/ebidel/lighthousebot
Et ajoutez ce bit à package.json:
"scripts": {
"lh": "lighthousebot"
}
Ajouter le bot Lighthouse à votre configuration Travis
La dernière astuce consiste à tester les performances de l'application après chaque demande d'extraction.
Dans .travis.yml, ajoutez une étape supplémentaire dans after_success:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Il exécutera un audit Lighthouse sur l'URL donnée. Par conséquent, remplacez https://staging.example.com par l'URL de votre application (votre-app-123.firebaseapp.com).
Définissez des normes élevées et ajustez la configuration pour n'accepter aucune modification de l'application entraînant un score de performances inférieur à 95:
- npm run lh -- --perf=95 https://staging.example.com
Envoyer une requête d'extraction pour déclencher le test du bot Lighthouse sur Travis
Lighthouse ne teste que les requêtes d'extraction. Par conséquent, si vous effectuez le transfert vers la branche principale maintenant, vous obtiendrez simplement le message "This script can only be run on Travis PR requests" (Ce script ne peut être exécuté que sur les requêtes Travis PR) dans votre journal Travis.
Pour déclencher le test du bot Lighthouse:
- Payer une nouvelle succursale
- Transférez-le vers GitHub
- Envoyer une demande d'extraction
Attendez que le bot Lighthouse chante un peu. 🎤
Le score de performance est excellent, l'application est en dessous du budget et la vérification a été effectuée !
Plus d'options Lighthouse
Vous vous souvenez que Lighthouse teste cinq catégories différentes ? Vous pouvez appliquer des scores à tous ceux qui comportent des indicateurs de bot 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
Cela échouera au PR si le score de performance passe en dessous de 93 ou si le score SEO est inférieur à 100.
Vous pouvez également choisir de ne pas recevoir les commentaires du bot Lighthouse avec l'option --no-comment.