Lighthouse CIで自動計測を実装｜GitHub Actions連携でパフォーマンス監視の自動化方法を解説

// lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
        "first-input-delay": ["error", {"maxNumericValue": 100}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}]
      }
    }
  }
}

# npmの場合
npm install -D @lhci/cli
# yarnの場合
yarn add -D @lhci/cli

// package.json
{
  "devDependencies": {
    "@lhci/cli": "^0.13.0"
  }
}

// lighthouserc.json
{
  "ci": {
    "collect": {
      // 計測回数（複数回実行して平均を取る）
      "numberOfRuns": 3,
      // ビルド後の静的ファイルがあるディレクトリ
      "staticDistDir": "./build",
      // または、開発サーバーを起動する場合
      // "startServerCommand": "npm run start",
      // 計測するURL（複数指定可能）
      "url": [
        "http://localhost:3000/",
        "http://localhost:3000/about",
        "http://localhost:3000/contact"
      ]
    },
    "assert": {
      // スコアやメトリクスの閾値を設定
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.9}],
        "categories:accessibility": ["warn", {"minScore": 0.9}],
        "categories:best-practices": ["warn", {"minScore": 0.9}],
        "categories:seo": ["warn", {"minScore": 0.9}],
        // Core Web Vitals
        "largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
        "first-input-delay": ["error", {"maxNumericValue": 100}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}],
        // その他のメトリクス
        "first-contentful-paint": ["warn", {"maxNumericValue": 2000}],
        "speed-index": ["warn", {"maxNumericValue": 3000}],
        "total-blocking-time": ["warn", {"maxNumericValue": 300}]
      }
    },
    "upload": {
      // 結果の保存先（オプション）
      "target": "temporary-public-storage"
    }
  }
}

// package.json
{
  "scripts": {
    "build": "next build",
    "lighthouse": "lhci autorun",
    "lighthouse:collect": "lhci collect",
    "lighthouse:assert": "lhci assert",
    "lighthouse:upload": "lhci upload"
  }
}

# ビルド
npm run build
# Lighthouse CI実行
npm run lighthouse

Collecting Lighthouse results
Running Lighthouse 3 time(s) on http://localhost:3000/
   Run #1...done.
   Run #2...done.
   Run #3...done.
Done collecting Lighthouse results.
Asserting against Lighthouse results
   ✓ categories:performance: minScore assertion passed
   ✓ largest-contentful-paint: maxNumericValue assertion passed
   ✓ cumulative-layout-shift: maxNumericValue assertion passed
All assertions passed!
Uploading Lighthouse results
   ✓ Uploaded to https://storage.googleapis.com/...

# .github/workflows/lighthouse-ci.yml
name: Lighthouse CI
on:
  pull_request:
    branches: [main, develop]
  push:
    branches: [main]
jobs:
  lighthouse-ci:
    runs-on: ubuntu-latest
    steps:
      # リポジトリをチェックアウト
      - uses: actions/checkout@v3
      # Node.jsのセットアップ
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      # 依存関係のインストール
      - name: Install dependencies
        run: npm ci
      # ビルド
      - name: Build project
        run: npm run build
      # Lighthouse CI実行
      - name: Run Lighthouse CI
        run: npm run lighthouse
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
      # 結果をアーティファクトとして保存
      - name: Upload Lighthouse reports
        uses: actions/upload-artifact@v3
        if: always()
        with:
          name: lighthouse-reports
          path: .lighthouseci/

# .github/workflows/lighthouse-ci.yml（続き）
jobs:
  lighthouse-ci:
    # ...（前述の設定）
    steps:
      # ...（前述のステップ）
      # Lighthouse CI実行（コメント機能付き）
      - name: Run Lighthouse CI with comment
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            http://localhost:3000
            http://localhost:3000/about
          uploadArtifacts: true
          temporaryPublicStorage: true
          runs: 3

## Lighthouse CI Results
### http://localhost:3000
| Category | Score |
|----------|-------|
| Performance | 95 +2 |
| Accessibility | 100 |
| Best Practices | 92 -3 |
| SEO | 100 |
**Core Web Vitals**
- LCP: 1.8s 
- FID: 15ms 
- CLS: 0.05 
[View full report](https://storage.googleapis.com/...)

# .github/workflows/lighthouse-ci.yml
name: Lighthouse CI - Multi Environment
on:
  pull_request:
    branches: [main]
jobs:
  lighthouse-ci:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        environment: [staging, production]
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI - ${{ matrix.environment }}
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            ${{ matrix.environment == 'staging' && 'https://staging.example.com' || 'https://example.com' }}
          uploadArtifacts: true
          runs: 3

// lighthouserc.json
{
  "ci": {
    "assert": {
      "preset": "lighthouse:no-pwa",
      "assertions": {
        // Core Web Vitals（厳格）
        "largest-contentful-paint": [
          "error",
          {"maxNumericValue": 2000, "aggregationMethod": "optimistic"}
        ],
        "first-input-delay": [
          "error",
          {"maxNumericValue": 80}
        ],
        "cumulative-layout-shift": [
          "error",
          {"maxNumericValue": 0.08}
        ],
        // 追加のパフォーマンス指標
        "first-contentful-paint": [
          "warn",
          {"maxNumericValue": 1500}
        ],
        "speed-index": [
          "warn",
          {"maxNumericValue": 2500}
        ],
        "total-blocking-time": [
          "error",
          {"maxNumericValue": 200}
        ],
        "interactive": [
          "warn",
          {"maxNumericValue": 3500}
        ],
        // リソースサイズ
        "resource-summary:script:size": [
          "warn",
          {"maxNumericValue": 300000}
        ],
        "resource-summary:stylesheet:size": [
          "warn",
          {"maxNumericValue": 50000}
        ],
        "resource-summary:image:size": [
          "warn",
          {"maxNumericValue": 500000}
        ],
        // カテゴリースコア
        "categories:performance": ["error", {"minScore": 0.95}],
        "categories:accessibility": ["warn", {"minScore": 0.95}],
        "categories:best-practices": ["warn", {"minScore": 0.9}],
        "categories:seo": ["error", {"minScore": 0.95}]
      }
    }
  }
}

# .github/workflows/lighthouse-ci.yml
jobs:
  lighthouse-ci:
    steps:
      # ...（前述のステップ）
      - name: Run Lighthouse CI
        id: lighthouse
        continue-on-error: true
        run: npm run lighthouse
      # 失敗時にSlack通知
      - name: Notify Slack on failure
        if: steps.lighthouse.outcome == 'failure'
        uses: slackapi/slack-github-action@v1
        with:
          payload: |
            {
              "text": "Lighthouse CI Failed",
              "blocks": [
                {
                  "type": "section",
                  "text": {
                    "type": "mrkdwn",
                    "text": "*Lighthouse CI failed on PR #${{ github.event.number }}*\n\nCore Web Vitals did not meet the threshold.\n\n<${{ github.event.pull_request.html_url }}|View Pull Request>"
                  }
                }
              ]
            }
        env:
          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

// lighthouserc.json
{
  "ci": {
    "collect": {
      // 実行回数を増やす（3〜5回推奨）
      "numberOfRuns": 5,
      // 集計方法を指定
      "settings": {
        // ネットワークスロットリングを有効化
        "throttlingMethod": "simulate",
        "throttling": {
          "rttMs": 40,
          "throughputKbps": 10240,
          "cpuSlowdownMultiplier": 1
        }
      }
    },
    "assert": {
      "assertions": {
        // 楽観的な値（最良の実行結果）を使用
        "largest-contentful-paint": [
          "error",
          {
            "maxNumericValue": 2500,
            "aggregationMethod": "optimistic"
          }
        ]
      }
    }
  }
}

# .github/workflows/lighthouse-ci.yml
jobs:
  lighthouse-ci:
    # タイムアウトを延長
    timeout-minutes: 30
    steps:
      # キャッシュを活用して高速化
      - name: Cache dependencies
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      # ビルドキャッシュも活用
      - name: Cache build
        uses: actions/cache@v3
        with:
          path: .next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}

// lighthouserc.json
{
  "ci": {
    "collect": {
      // 本番環境のURLで計測
      "url": [
        "https://example.com",
        "https://example.com/about"
      ],
      // 本番環境と同じヘッダーを送信
      "settings": {
        "extraHeaders": {
          "Cookie": "session=...",
          "Authorization": "Bearer ..."
        }
      }
    }
  }
}

# .github/workflows/lighthouse-production.yml
name: Lighthouse CI - Production
on:
  schedule:
    # 毎日午前3時に実行
    - cron: '0 3 * * *'
  workflow_dispatch:
jobs:
  lighthouse-production:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Run Lighthouse on production
        uses: treosh/lighthouse-ci-action@v10
        with:
          urls: |
            https://example.com
            https://example.com/about
            https://example.com/products
          uploadArtifacts: true
          runs: 5