Vous avez travaillé dur pour accélérer votre site. Assurez-vous maintenant qu'il reste rapide en automatisant les tests de performances avec Lighthouse Bot.
Lighthouse évalue votre application dans cinq catégories, dont les performances. Vous pourriez essayer de vous souvenir de surveiller les changements de performances avec les DevTools ou l'interface de ligne de commande Lighthouse chaque fois que vous modifiez votre code, mais vous n'avez pas à le faire. Les outils peuvent effectuer les tâches fastidieuses pour vous. Travis CI est un excellent service qui exécute automatiquement des tests pour votre application dans le cloud chaque fois que vous transmettez du nouveau code.
Le bot Lighthouse s'intègre à Travis CI. Sa fonctionnalité de budget de performances vous permet de ne pas dégrader accidentellement les performances sans vous en rendre compte. Vous pouvez configurer votre dépôt pour qu'il n'autorise pas la fusion des demandes d'extraction si les scores Lighthouse sont inférieurs au seuil que vous avez défini (par exemple, < 96/100).
Bien que vous puissiez tester les performances sur localhost, votre site fonctionnera souvent différemment 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 intermédiaire. Vous pouvez utiliser n'importe quel service d'hébergement. Ce guide vous présentera Firebase Hosting.
1. Configuration
Cette application simple vous aide à trier trois nombres.
Clonez l'exemple depuis GitHub et assurez-vous de l'ajouter en tant que dépôt dans votre compte GitHub.
2. Déployer sur Firebase
Pour commencer, vous aurez besoin d'un compte Firebase. Une fois que vous avez fait cela, 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 à jour régulièrement la CLI vers la dernière version avec 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 la configuration 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 à déployer ! Exécutez la commande suivante :
firebase deploy
En un clin d'œil, vous obtenez une application en direct.
3. Configurer Travis
Vous devez créer un compte sur Travis, puis activer l'intégration des applications GitHub dans la section "Settings" (Paramètres) de votre profil.
Une fois que vous avez un compte
Accédez aux paramètres de 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 éléments :
- Avoir un fichier
.travis.ymldans le répertoire racine - Déclencher une compilation en effectuant un simple push git
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 dans votre propre dépôt GitHub. Si ce n'est 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 se passe bien, vous verrez votre compilation passer 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 authentifier. Ensuite, revenez à la console et vous verrez votre jeton fraîchement créé. Copiez-le et revenez à Travis.
Dans le tableau de bord Travis de votre projet, accédez à 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 le 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 automatique. Si vous consultez votre journal Travis, il devrait bientôt indiquer "✔️ Déploiement terminé !".
Désormais, chaque fois que vous apporterez des modifications à votre application, elles seront automatiquement déployées sur Firebase.
5. Configurer Lighthouse Bot
Le robot Lighthouse Friendly vous informe des scores Lighthouse de votre application. Il lui 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 (Settings > Collaborators) :
L'approbation de ces demandes est un processus manuel. Elle n'est donc pas toujours instantanée. 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 pour recevoir 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 la commande suivante :
npm i --save-dev https://github.com/ebidel/lighthousebot
Ajoutez ensuite ce code à package.json :
"scripts": {
"lh": "lighthousebot"
}
Ajouter Lighthouse Bot à votre configuration Travis
Pour le dernier tour de magie, 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
Il exécutera un audit Lighthouse sur l'URL indiquée. Remplacez donc https://staging.example.com par l'URL de votre application (your-app-123.firebaseapp.com).
Fixez des normes élevées et ajustez la configuration pour ne pas accepter les modifications apportées à l'application qui font passer 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 Lighthouse Bot sur Travis
Le bot Lighthouse ne teste que les demandes d'extraction. Par conséquent, si vous effectuez un push 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 demandes d'extraction Travis) dans votre journal Travis.
Pour déclencher le test Lighthouse Bot :
- Créer une branche
- Transférer vers GitHub
- Envoyer une demande d'extraction
Restez sur la page de la demande d'extraction et attendez que Lighthouse Bot se manifeste. 🎤
Le score de performances est excellent, l'application respecte le budget et le contrôle a été réussi.
Plus d'options Lighthouse
Vous vous souvenez que Lighthouse teste cinq catégories différentes ? Vous pouvez appliquer des scores pour chacun d'eux avec les indicateurs Lighthouse Bot :
--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 requête d'extraction échouera si le score de performances est inférieur à 93 ou si le score de référencement naturel est inférieur à 100.
Vous pouvez également choisir de ne pas recevoir les commentaires du bot Lighthouse en sélectionnant l'option --no-comment.