Github ActionsでGatsbyサイトのプルリクを毎回Lighthouseで監査してみた

パフォーマンス変化がないか監視する

Github Actionsを使ってプルリクエストのたびにLighthouse CIを使ってスコアを算出し、低下している場合は警告を出します。

まずはGithub ActionsのYamlから。 Chromeは既にインストール済みなので、別途インストールする必要はありません。

name: lighthouse audit

on:
  pull_request:
    branches:
      - master

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          ref: ${{github.event.pull_request.head.sha}}
      - uses: actions/setup-node@v1

      - name: npm install
        run: npm install && npm install -g @lhci/cli

      - name: build
        run: npm run build

      - name: Lighthouse audit CI
        run: lhci autorun --config=./.lighthouseci/lighthouserc.json
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

環境変数として設定しているLHCI_GITHUB_APP_TOKENは、Lighthouse CIのGithub Appを承認した際に発行されます。

これは、プルリクエストの画面でテストとしてLighthouse CIを表示させるために必要です。コマンドラインの結果だけでいい場合はこの設定は不要です。 公式のCheckoutスクリプトでよろしく処理するために必要な設定があるので追加しています。

github.com

設定ファイルは./.lighthouseci/lighthouserc.jsonにまとめて記載します。

{
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "staticDistDir": "./public",
      "isSinglePageApplication": true,
      "url": ["http://localhost/", "http://localhost/post/2019/08/edge530j/"]
    },
    "assert": {
      "assertions": {
        "categories:performance": [
          "warn",
          {
            "minScore": 0.6
          }
        ],
        "categories:accessibility": [
          "warn",
          {
            "minScore": 0.8
          }
        ]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Gatsby.jsのウェブサイトなのでisSinglePageApplicationフラグをtrueにしておきます。

プリセットを行わないことで、細かい実装ルールは検査せずにスコアのみの監査としています。 警告のしきい値は現在のスコアから適当に設定しておきました。