導入: なぜLighthouse CIが重要なのか
Web開発において、機能追加を繰り返すうちに、知らない間にサイトの表示速度が低下してしまうことは珍しくありません。特にCore Web Vitals（LCP, CLS, FID/INP）の悪化は、SEOやユーザー体験に直結する深刻な課題です。本記事では、Lighthouse CIをCI/CDパイプラインに組み込み、パフォーマンスのデグレードを自動的に検知してマージをブロックする仕組みを構築する方法を解説します。これにより、リリース後にパフォーマンス低下に気づくという最悪の事態を未然に防ぐことができます。
基礎知識: Lighthouse CIとパフォーマンス予算
Lighthouse CIは、Googleが提供するオープンソースツールで、CLIからLighthouseのスコアを計測し、その結果を管理・比較できるツールです。
ここで重要な概念が「パフォーマンス予算（Performance Budget）」です。これは、特定の指標に対して許容可能な上限値を設定し、それを超えた場合にエラーを出す仕組みを指します。例えば「LCPを2.5秒以内に収める」といった目標をCI上で強制することで、品質を一定に保つことが可能になります。
実装/解決策: GitHub Actionsへの導入手順
導入の基本ステップは以下の通りです。
1. Lighthouse CI CLIをプロジェクトにインストールする。
2. lighthouserc.jsonを設定し、予算の閾値を定義する。
3. GitHub Actionsのワークフローで、ビルドしたサイトに対して計測を実行する。
サンプルプログラム: lighthouserc.jsonとGitHub Actionsの設定
以下のファイルをプロジェクトルートに配置してください。
lighthouserc.json（計測設定と予算定義）
{
“ci”: {
“collect”: {
“numberOfRuns”: 3, // 安定性を高めるため3回計測の平均をとる
“staticDistDir”: “./dist” // ビルド済み静的ファイルのディレクトリ
},
“assert”: {
“preset”: “lighthouse:recommended”,
“assertions”: {
“categories:performance”: [“error”, { “minScore”: 0.9 }], // パフォーマンススコア90未満でエラー
“largest-contentful-paint”: [“error”, { “maxNumericValue”: 2500 }] // LCP 2.5秒を超えたらエラー
}
}
}
}
.github/workflows/lighthouse.yml（CIワークフロー例）
name: Lighthouse CI
on: [pull_request]
jobs:
lhci:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node
uses: actions/setup-node@v3
with: { node-version: ’18’ }
- run: npm install
- run: npm run build # 静的ファイルを生成
- name: Run Lighthouse CI
uses: treosh/lighthouse-ci-action@v10
with:
configPath: ‘./lighthouserc.json’
uploadArtifacts: true # 結果をアーティファクトとして保存
temporaryPublicStorage: true # 結果を一時的な公開サーバーで閲覧可能にする
応用・注意点: 現場での運用Tips
1. ネットワーク環境のシミュレーション
ローカル環境とCI環境（GitHub Actions）ではスペックが異なります。CI上で計測する場合、実際のブラウザ実行環境が一定ではないため、スコアがばらつくことがあります。必ず「3回計測して平均をとる」設定を入れ、スコアの揺らぎを許容する余白を持たせることが重要です。
2. パフォーマンスバジェットの段階的導入
いきなり厳しい数値を設定すると、既存のコードがすべてエラーになり開発が止まってしまいます。まずは現状の数値を調査し、それを少し上回る程度の数値から「予算」として設定し、徐々に厳しくしていく運用が現実的です。
3. Flaky（不安定な）テストへの対応
Lighthouseのスコアはサーバーの負荷状況に影響を受けます。もしCIが不安定であれば、計測対象を主要なページ（トップページやランディングページ）だけに絞り、リソースを集中させる設計にしましょう。
コメント