Lighthouse CIを導入してPRごとにCore Web Vitalsバジェットを自動判定する設定

Performance CI/CD Lighthouse Web Vitals
結論

.lighthouserc.json に基準値を定義し、GitHub Actions で lhci autorun を回して自動判定します。

// 結論：.lighthouserc.json の設定例
{
  "ci": {
    "collect": {
      "staticDistDir": "./dist"
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "first-contentful-paint": ["error", { "maxNumericValue": 2000 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }]
      }
    }
  }
}

Lighthouse CI 導入手順

  1. プロジェクトに @lhci/cli をインストールし .lighthouserc.json をルートに作成する
  2. assertions オプションで categories:performance (0.9以上) や cumulative-layout-shift (0.1以下) のクリア基準を定義する
  3. GitHub Actions に npx lhci autorun ステップを追加し、スコア未達時にPRビルドを落とすよう設定する