Lighthouse CI を GitHub Actions で毎コミットごとに実行する

公開日:

はじめに

開発を進めて機能を沢山追加した結果サイトが遅くなってきた。。

なんてことはありませんか？

Lighthouse CI と GitHub Actions を組み合わせれば、サイトが遅くなり始めた初期段階で対処することができます。

この記事では Lighthouse のコマンドライン版である Lighthouse CI の使い方を説明します。そして、Lighthouse CI を GitHub Actions で毎コミットごとに実行する方法も紹介します。

パッケージインストール

ローカルで Lighthouse CI を実行してみます。

パッケージをインストールします。

npm install -g @lhci/[email protected]

設定ファイルを作成

設定ファイルを作成します。

lighthouserc.js

module.exports = {
  ci: {
    collect: {
      url: [
        'http://localhost:3000/',
        // 他にも検査したいページがあれば追記
      ],
      // チェック回数
      numberOfRuns: 3,
      // 開発サーバーを起動するコマンド
      startServerCommand: 'npm run dev',
      // ページが読み込まれるまでのタイムアウト時間
      maxWaitForLoad: 90000,
    },
    // 規定のスコア以下だったらエラーで終了させる
    // GitHub Actiosn などでビルドを失敗させることができる
    assert: {
      // 推奨設定
      // preset: 'lighthouse:recommended',
      // 個別設定
      assertions: {
        // カテゴリーごとに合格スコアを決める 例: 100点 = 1
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.9 }],
        'categories:best-practices': ['error', { minScore: 0.9 }],
        'categories:seo': ['error', { minScore: 0.9 }],
      },
    },
    upload: {
      // Google の一時 URL にテスト結果をアップロード
      target: 'temporary-public-storage',
    },
  },
}

項目は自分の環境に読み替えて設定してください。

詳しくは以下のサイトから確認してください。設定ファイルはjs以外の拡張にも対応しています。cjsやymlなどもありました。

lighthouse-ci/docs/configuration.md at main · GoogleChrome/lighthouse-ci · GitHub

テストを実行

テストを実行してみます。

lhci autorun

テストが実行されると、以下のような感じで結果が出力されます。これはアサーションが失敗した時に出力される結果です。

2 result(s) for http://localhost:3000/ja :

  ✘  categories.performance failure for minScore assertion
        expected: >=0.9
           found: 0.52
      all values: 0.51, 0.5, 0.52


  ✘  categories.accessibility failure for minScore assertion
        expected: >=0.9
           found: 0.78
      all values: 0.78, 0.78, 0.78

Assertion failed. Exiting with status code 1.

ここではassertionsのminScoreはとりあえず合格するまで下げるのがいいのかなと思います。ここでサイトの改善を始めてしまうとなかなか次に進めないので。

GitHub Actions で実行する

最後に GitHub Actions でコミットごとに Lighthouse を実行します。

プロジェクトルートの.github/workflowsディレクトリに以下のファイルを作ります。

lighthouse.yml

name: Lighthouse CI

on:
  push:
    branches:
      - main

jobs:
  lighthouse:
    needs: [setup]
    
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: パッケージインストール
        run: |
          npm ci

      - name: Lighthouse CI インストール
        run: |
          npm install -g @lhci/cli
      
      - name: テスト実行
        run: |
          lhci autorun

これで GitHub にコミットをプッシュするごとにテストが実行されます。