Cette page a été traduite par l'API Cloud Translation.

Surveillance des performances avec Lighthouse CI

Ajouter Lighthouse à un système d'intégration continue tel que GitHub Actions

Katie Hempenius

Lighthouse CI est une suite permettant d'utiliser Lighthouse pendant l'intégration continue. Lighthouse CI peut être intégrés aux workflows des développeurs de différentes manières. Ce guide aborde les points suivants : les sujets suivants:

Utiliser la CLI Lighthouse CI
Configurer votre fournisseur CI pour exécuter Lighthouse CI
Configurer une action GitHub et état coche pour Lighthouse CI. Les résultats Lighthouse s'afficheront automatiquement sur Demandes d'extraction GitHub.
Création d'un tableau de bord des performances et d'un data store pour les rapports Lighthouse

Présentation

Lighthouse CI est une suite d'outils sans frais qui facilite l'utilisation de Lighthouse pour la surveillance des performances. Un seul rapport Lighthouse fournit un instantané d'une page Web les performances de la page au moment de son exécution. Lighthouse CI montre comment les résultats ont changé au fil du temps. Cela peut servir à identifier l'impact modifications particulières du code ou s'assurer que les seuils de performances sont atteints pendant des processus d'intégration continue. Bien que la surveillance des performances d'utilisation courante de Lighthouse CI, il permet de surveiller d'autres aspects le rapport Lighthouse, comme le SEO ou l'accessibilité.

La fonctionnalité de base de Lighthouse CI est fournie par la commande Lighthouse CI de commande. (Remarque: Cet outil est différent du Lighthouse CLI). La La CLI Lighthouse CI fournit un ensemble commandes pour utiliser Lighthouse CI. Par exemple, la commande autorun exécute plusieurs Lighthouse s'exécute, identifie le rapport Lighthouse médian et l'importe pour le stockage. Ce comportement peut être hautement personnalisé en transmettant des options supplémentaires ou en personnalisant le fichier de configuration de Lighthouse CI, lighthouserc.js.

Bien que la fonctionnalité de base de Lighthouse CI soit principalement encapsulée la CLI Lighthouse CI, la CLI Lighthouse CI est généralement utilisée via l'un des approches suivantes:

Exécuter Lighthouse CI dans le cadre de l'intégration continue
Utiliser une action GitHub CI Lighthouse qui s'exécute et commente chaque extraction demander
Suivi des performances au fil du temps via le tableau de bord fourni par Lighthouse Google Cloud.

Toutes ces approches sont basées sur la CLI Lighthouse CI.

Les alternatives à la CI Lighthouse incluent la surveillance des performances par un tiers ou écrire votre propre script pour collecter des données sur les performances pendant l'intégration continue processus. Vous devriez envisager d'utiliser un service tiers si vous préférez que quelqu'un d'autre gère votre serveur de surveillance des performances des appareils de test, ou des fonctionnalités de notification (comme les e-mails ou Slack) ; sans avoir à créer vous-même ces fonctionnalités.

Utiliser Lighthouse CI localement

Cette section explique comment exécuter et installer la CLI Lighthouse CI en local et comment comment configurer lighthouserc.js. L'exécution de la CLI Lighthouse CI en local le moyen le plus simple de vous assurer que votre lighthouserc.js est correctement configuré.

Installez la CLI Lighthouse CI.
```
npm install -g @lhci/cli
```
La configuration de Lighthouse CI est configurée en plaçant un fichier lighthouserc.js à la racine de dans le dépôt de votre projet. Ce fichier est obligatoire et contiendra Lighthouse CI les informations de configuration associées. Bien que Lighthouse CI puisse être configuré être utilisée sans Repo, les instructions de cet article supposent que le dépôt de votre projet est configuré utilisez git.
À la racine de votre dépôt, créez une configuration lighthouserc.js. fichier.
```
touch lighthouserc.js
```
Ajoutez le code suivant à lighthouserc.js. Ce code est vide Configuration CI Lighthouse. Vous ajouterez des éléments à cette configuration dans les étapes suivantes.
```
module.exports = {
  ci: {
    collect: {
      /* Add configuration here */
    },
    upload: {
      /* Add configuration here */
    },
  },
};
```
Chaque fois que Lighthouse CI s'exécute, il démarre un serveur pour diffuser votre site. Ce serveur permet à Lighthouse de charger votre site même serveurs en cours d'exécution. Une fois l'exécution de Lighthouse CI terminée, automatiquement le serveur. Pour vous assurer que l'inférence fonctionne correctement, vous devez configurer staticDistDir ou startServerCommand propriétés.

Si votre site est statique, ajoutez la propriété staticDistDir à ci.collect pour indiquer l'emplacement de vos fichiers statiques. Lighthouse CI utilisent son propre serveur pour diffuser ces fichiers tout en testant votre site. Si votre site n'est pas statique, ajoutez la propriété startServerCommand au ci.collect pour indiquer la commande qui démarre votre serveur. Lighthouse CI lancera un nouveau processus de serveur pendant les tests et l'arrêtera à la baisse.
```
// Static site example
collect: {
  staticDistDir: './public',
}
```
```
// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}
```
Ajoutez le url à l'objet ci.collect pour indiquer les URL avec lesquelles la CI Lighthouse sur lequel vous devez exécuter Lighthouse. La valeur de la propriété url doit être fournies sous la forme d'un tableau d'URL ; ce tableau peut contenir une ou plusieurs URL. Par par défaut, Lighthouse CI exécutera Lighthouse trois fois pour chaque URL.
```
collect: {
  // ...
  url: ['http://localhost:8080']
}
```
Remarque :Ces URL doivent pouvoir être diffusées par le serveur que vous avez configuré dans le à l'étape précédente. Ainsi, si vous exécutez Lighthouse CI localement, ces URL doivent incluez probablement localhost plutôt que votre hôte de production.
Ajoutez le target à l'objet ci.upload et définissez sa valeur sur 'temporary-public-storage' Le ou les rapports Lighthouse collectés par Lighthouse CI sera importé dans un espace de stockage public temporaire. Le rapport y seront conservées pendant sept jours, puis seront automatiquement supprimées. Cette configuration utilise le "stockage public temporaire" car elle est rapide. à configurer. Pour en savoir plus sur les autres façons de stocker les rapports Lighthouse, consultez vers documentation.
```
upload: {
  target: 'temporary-public-storage',
}
```
L'emplacement de stockage du rapport se présente comme suit:
```
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
```
(Cette URL ne fonctionnera pas, car le rapport a déjà été supprimé.)
Exécutez la CLI Lighthouse CI à partir du terminal à l'aide de la commande autorun. Lighthouse sera exécuté trois fois et la valeur médiane de Lighthouse sera importée .
```
lhci autorun
```
Si vous avez correctement configuré Lighthouse CI, l'exécution de cette commande devrait produit un résultat semblable à celui-ci:
```
✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Started a web server on port 65324...
Running Lighthouse 3 time(s) on http://localhost:65324/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:65324/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.
```
Vous pouvez ignorer le message GitHub token not set dans le résultat de la console. A Le jeton GitHub n'est nécessaire que si vous souhaitez utiliser la CI Lighthouse avec un dépôt GitHub action. La configuration d'une action GitHub est expliquée plus loin dans cet article.

En cliquant sur le lien dans la sortie commençant par https://storage.googleapis.com... vous redirigera vers le rapport Lighthouse correspondant à l'exécution médiane de Lighthouse.

Les valeurs par défaut utilisées par autorun peuvent être remplacées via la ligne de commande ou lighthouserc.js Par exemple, la configuration lighthouserc.js ci-dessous indique que cinq exécutions Lighthouse doivent être collectées à chaque fois que autorun s’exécute.

Mettez à jour lighthouserc.js pour utiliser la propriété numberOfRuns:

module.exports = {
    // ...
    collect: {
      numberOfRuns: 5
    },
  // ...
  },
};

Exécutez à nouveau la commande autorun:

lhci autorun

Le résultat du terminal devrait indiquer que Lighthouse a été exécuté cinq fois au lieu de que les trois options par défaut:

✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
⚠️   GitHub token not set
Healthcheck passed!

Automatically determined ./dist as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 64444...
Running Lighthouse 5 time(s) on http://localhost:64444/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Run #4...done.
Run #5...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:64444/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html
No GitHub token set, skipping GitHub status check.

Done running autorun.

Pour en savoir plus sur les autres options de configuration, reportez-vous à la documentation de configuration documentation.

Configurez votre processus d'intégration continue (CI) pour exécuter Lighthouse CI

Vous pouvez utiliser Lighthouse CI avec votre outil d'intégration continue préféré. La page Configurer votre CI Fournisseur de la documentation de Lighthouse CI contient des exemples de code montrant comment d'intégrer Lighthouse CI dans les fichiers de configuration des outils CI courants. Plus précisément, ces exemples de code montrent comment exécuter Lighthouse CI pour collecter les mesures des performances pendant le processus CI.

L'utilisation de Lighthouse CI pour collecter des mesures de performances est un bon point de départ. avec la surveillance des performances. Cependant, les utilisateurs avancés peuvent vouloir passer à une étape et utiliser la CI Lighthouse pour faire échouer les compilations si celles-ci ne répondent pas aux exigences des critères comme la réussite à certains audits Lighthouse ou le respect de toutes les performances les budgets. Vous pouvez configurer ce comportement via assert du fichier lighthouserc.js.

Lighthouse CI accepte trois niveaux d'assertion:

off: ignore les assertions
warn: échecs d'impression sur stderr
error: échecs d'impression vers stderr et quitter Lighthouse CI avec une valeur non nulle sortie code

Vous trouverez ci-dessous un exemple de configuration lighthouserc.js qui inclut assertions. Il définit des assertions pour les scores de performance de Lighthouse et catégories d'accessibilité. Pour essayer, ajoutez les assertions ci-dessous à votre fichier lighthouserc.js, puis réexécutez Lighthouse CI.

module.exports = {
  ci: {
    collect: {
      // ...
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      // ...
    },
  },
};

La sortie de la console qu'il génère ressemble à ceci:

Capture d'écran d'un message d'avertissement généré par Lighthouse CI

Pour en savoir plus sur les assertions CI Lighthouse, consultez documentation.

Configurer une action GitHub pour exécuter Lighthouse CI

Une action GitHub peut être utilisée pour exécuter Lighthouse CI. Un nouveau rapport Lighthouse est généré chaque fois qu'un code la modification est transmise à n'importe quelle branche d'un dépôt GitHub. Utilisez cet outil en conjonction ayant un état coche pour afficher ces résultats à chaque demande d'extraction.

Capture d'écran d'une vérification d'état GitHub

À la racine de votre dépôt, créez un répertoire nommé .github/workflows La workflows de votre projet se trouvent dans ce répertoire. Un flux de travail est un processus qui s'exécute à un moment prédéterminé (lors de l'envoi du code, par exemple) composé d'une ou de plusieurs actions.
```
mkdir .github
mkdir .github/workflows
```
Dans .github/workflows, créez un fichier nommé lighthouse-ci.yaml. Ce fichier contiendra la configuration d'un nouveau workflow.
```
touch lighthouse-ci.yaml
```

Ajoutez le texte suivant à lighthouse-ci.yaml.

name: Build project and run Lighthouse CI
on: [push]
jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: 10.x
      - name: npm install
        run: |
          npm install
      - name: run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.3.x
          lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

Cette configuration met en place un workflow constitué d'un seul job qui s'exécutera chaque fois que du nouveau code est transféré vers le dépôt. Ce job comporte quatre étapes:

Consultez le dépôt sur lequel la CI Lighthouse sera exécutée
Installer et configurer un nœud
Installer les packages npm requis
Exécutez Lighthouse CI et importez les résultats dans un espace de stockage public temporaire.

Validez ces modifications et déployez-les sur GitHub. Si vous avez correctement suivi suivre les étapes ci-dessus, le transfert du code vers GitHub déclenchera l'exécution du workflow que vous venez d'ajouter.
Pour confirmer le déclenchement de la CI Lighthouse et afficher le rapport, accédez à l'onglet Actions de votre projet. Vous devriez voir Build project and Run Lighthouse CI (Créer un projet et exécuter Lighthouse CI) commit récent.

Vous pouvez accéder au rapport Lighthouse correspondant à un commit particulier dans l'onglet Actions. Cliquez sur le commit, puis sur Lighthouse CI. étape du workflow, puis développez les résultats de l'étape Exécuter Lighthouse CI.

Vous venez de configurer une action GitHub pour exécuter Lighthouse CI. Ce sera utile lorsqu'elle est utilisée avec un état GitHub coche.

Configurer une vérification d'état GitHub

Une vérification de l'état, si elle est configurée, est un message qui s'affiche à chaque RP et comprend généralement des informations telles que les résultats d'un test ou la réussite d'un créer.

Capture d'écran des paramètres de GitHub Tabulation

Les étapes ci-dessous expliquent comment configurer une vérification de l'état pour Lighthouse CI.

Accédez à l'application GitHub Lighthouse CI. , puis cliquez sur Configurer.
(Facultatif) Si vous faites partie de plusieurs organisations sur GitHub, choisissez organisation qui possède le dépôt pour lequel vous souhaitez utiliser Lighthouse l'intégration continue.
Sélectionnez Tous les dépôts si vous souhaitez activer Lighthouse CI dans tous ou sélectionnez Sélectionner uniquement les dépôts si vous ne souhaitez utiliser dans des dépôts spécifiques, puis sélectionnez les dépôts. Cliquez ensuite sur Installation et Autoriser.
Copiez le jeton qui s'affiche. Vous l'utiliserez à l'étape suivante.
Pour ajouter le jeton, accédez à la page Paramètres de votre compte GitHub. cliquez sur Secrets, puis sur Add a new secret (Ajouter un secret).
Définissez le champ Nom sur LHCI_GITHUB_APP_TOKEN, puis la valeur. au jeton que vous avez copié à l'étape précédente, puis cliquez sur le bouton Ajouter secret.
Accédez au fichier lighthouse-ci.yaml et ajoutez le nouveau secret d'environnement à la commande "run Lighthouse CI" (Exécuter Lighthouse CI). .

-           name: run Lighthouse CI
            run: |
              npm install -g @lhci/cli@0.3.x
              lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+            env:
+              LHCI_GITHUB_APP_TOKEN: $

La vérification de l'état est prête à l'emploi. Pour la tester, créez un mode d'envoi demande ou transmettre un commit à une demande d'extraction existante.

Configurer le serveur CI Lighthouse

Le serveur CI Lighthouse fournit un tableau de bord permettant d'explorer l'historique Rapports Lighthouse. Il peut également servir de datastore privé à long terme rapports Lighthouse.

Capture d'écran du tableau de bord du serveur CI Lighthouse

Capture d'écran de la comparaison de deux rapports Lighthouse sur le serveur CI Lighthouse

Choisissez les commits à comparer.
Variation du score Lighthouse entre les deux commits
Cette section n'affiche que les métriques qui ont changé entre les deux commits.
Les régressions sont surlignées en rose.
Les améliorations sont surlignées en bleu.

Le serveur CI Lighthouse est le plus adapté aux utilisateurs qui savent déployer et de gérer leur propre infrastructure.

Pour obtenir des informations sur la configuration du serveur CI Lighthouse, y compris des recettes pour avec Heroku et Docker pour le déploiement, reportez-vous à instructions.

En savoir plus

Dépôt GitHub Lighthouse CI