Lighthouse CI & GitHub Actions でパフォーマンスを自動計測する

Posted at 2026-03-24

この記事はAIの支援を受けて執筆しました。内容の正確さには注意を払っていますが、誤りがあればコメントでご指摘ください 🙏

シリーズ： Webパフォーマンス最適化 — 第5回/全10回
タグ： JavaScript GitHub Actions Lighthouse パフォーマンス CI/CD
読了時間： 約10分

はじめに
Lighthouse CI とは？
なぜ CI/CD に組み込む必要があるのか？
ステップごとの導入手順
導入後の動作イメージ
Assertions の設定（応用編）
代替案：GitHub Action を直接使う方法
より正確な結果を得るためのヒント
まとめ
参考リンク

はじめに

パフォーマンスはオプション機能ではありません——それは優れたユーザー体験を支える基盤です。速いアプリはユーザーを満足させるだけでなく、SEO・コンバージョン率・ユーザー定着率の向上にも直結します。

しかし、よくある落とし穴があります：一度最適化したら、そのまま放置してしまうことです。プロジェクトが成長し、新機能が追加されるにつれて、気づかないうちにパフォーマンスが劣化していきます。

解決策は？　Lighthouse CI を GitHub Actions に組み込んで、パフォーマンス計測を自動化することです。こうすることで、main ブランチへの Pull Request ごとに自動でスコアが評価されます。

Lighthouse CI とは？

Google Lighthouse はオープンソースのパフォーマンス計測ツールで、以下の観点でWebページを分析します：

指標	内容
Performance	ページ読み込み速度・Core Web Vitals
Accessibility	アクセシビリティ対応状況
Best Practices	コーディングのベストプラクティス
SEO	検索エンジン最適化

Lighthouse CI（@lhci/cli）はその CI/CD 環境向けバージョンで、継続的インテグレーションのパイプラインで Lighthouse を自動実行できます。

なぜ CI/CD に組み込む必要があるのか？

手元のマシンで Lighthouse を手動実行することには大きな欠点があります：結果がマシンスペック・ネットワーク環境・バックグラウンドプロセスに左右されるのです。GitHub Actions に組み込むことで、次のメリットが得られます：

✅ 標準化・一貫した環境で実行される
✅ Pull Request のたびに自動でトリガーされる
✅ GitHub のインターフェース上にレポートが直接表示される
✅ 本番リリース前にパフォーマンスの退行を早期発見できる

ステップごとの導入手順

ステップ1：GitHub に Lighthouse CI App をインストール

以下のURLからGitHub Appをインストールします：
👉 https://github.com/apps/lighthouse-ci

対象のリポジトリを選択し、発行される LHCI_GITHUB_APP_TOKEN をコピーしておきます——後のステップで使用します。

💡 メモ： このトークンにより、Lighthouse CI が Pull Request にステータスレポートを直接書き込めるようになります。

ステップ2：`@lhci/cli` パッケージをインストール

yarn add -D @lhci/cli
# または
npm install --save-dev @lhci/cli

ステップ3：`package.json` にスクリプトを追加

{
  "scripts": {
    "lhci:mobile": "lhci autorun",
    "lhci:desktop": "lhci autorun --collect.settings.preset=desktop"
  }
}

この2つのコマンドで、モバイル（デフォルト）とデスクトップの両環境を計測できます。

ステップ4：`lighthouserc.json` 設定ファイルを作成

プロジェクトのルートに lighthouserc.json を作成します：

{
  "ci": {
    "collect": {
      "startServerCommand": "yarn build && yarn start",
      "url": [
        "http://localhost:3000/",
        "http://localhost:3000/about",
        "http://localhost:3000/products"
      ],
      "numberOfRuns": 3
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

設定項目の説明：

パラメータ	説明
`startServerCommand`	計測前にサーバーを起動するコマンド
`url`	計測対象のURLリスト（複数ページを指定可能）
`numberOfRuns`	中央値を取るための実行回数（ノイズを減らす）
`target`	レポートの保存先——`temporary-public-storage` は無料で13日間保持される

ステップ5：ローカルで動作確認

yarn lhci:desktop

成功すると、ターミナルにスコアと詳細レポートへのリンクが表示されます。CI に組み込む前に、ローカルで正常に動作することを確認しましょう。

ステップ6：GitHub Actions ワークフローを作成

.github/workflows/lighthouse.yml を作成します：

name: Lighthouse CI
 
on:
  pull_request:
    branches:
      - main
 
jobs:
  lighthouse:
    name: Lighthouse Audit
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        with:
          ref: ${{ github.event.pull_request.head.sha }}
 
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'yarn'
 
      - name: Install dependencies
        run: yarn install --frozen-lockfile
 
      - name: Run Lighthouse audit (Mobile)
        run: yarn lhci:mobile
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
 
      - name: Run Lighthouse audit (Desktop)
        run: yarn lhci:desktop
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

ステップ7：GitHub に Secret を登録

リポジトリの Settings → Secrets and variables → Actions を開く
New repository secret をクリック
名前に LHCI_GITHUB_APP_TOKEN を入力
ステップ1でコピーしたトークンを貼り付けて保存

導入後の動作イメージ

新しい Pull Request を作成すると、GitHub Actions が自動的に：

PRブランチのコードをチェックアウト
アプリをビルド・起動
モバイル・デスクトップそれぞれで Lighthouse を実行
結果をPRのステータスチェックとして投稿

Pull Request の画面上に、各指標のスコアが直接表示されます。もし Performance スコアが下がっていれば、マージ前に気づくことができます。

⚠️ 注意： GitHub App が表示するステータスレポートは1件のみです。モバイル・デスクトップの両方を実行していても同様です。2件目のレポートを確認するには、Actionの Details から直接ログ内のリンクを参照してください。

Assertions の設定（応用編）

Lighthouse CI は、スコアが閾値を下回った場合に CI を失敗させるよう設定できます。lighthouserc.json に以下を追加します：

{
  "ci": {
    "collect": { "...": "..." },
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "categories:performance": ["warn", { "minScore": 0.8 }],
        "categories:accessibility": ["error", { "minScore": 0.9 }],
        "first-contentful-paint": ["warn", { "maxNumericValue": 2000 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 3000 }]
      }
    },
    "upload": { "...": "..." }
  }
}

2種類の重大度レベル：

warn：警告を出すが、CIは失敗しない
error：閾値を超えた場合、CIを失敗させる

代替案：GitHub Action を直接使う方法

npm パッケージを使いたくない場合は、treosh/lighthouse-ci-action を直接使う方法もあります：

- name: Audit URLs using Lighthouse
  uses: treosh/lighthouse-ci-action@v10
  with:
    urls: |
      http://localhost:3000/
      http://localhost:3000/about
    uploadArtifacts: true
    temporaryPublicStorage: true

2つの方法の比較：

	`@lhci/cli`（npm）	`treosh/lighthouse-ci-action`
ローカルでのテスト	✅ 可能	❌ 不可（`act` が必要）
設定方法	専用ファイル（`lighthouserc.json`）	YAML 内にインライン記述
柔軟性	高い	シンプル
向いているケース	ローカルテストも行いたい場合	CIのみで十分な場合

より正確な結果を得るためのヒント

GitHub Actions の共有ランナーはリソースが限られているため、Lighthouse のスコアが不安定になることがあります。本番環境で信頼性の高い結果を得るには：

セルフホストランナー： 安定したリソースを持つ専用サーバーで Actions を実行する
Lighthouse Server： Lighthouse CI Server を導入してスコアの推移を管理する
numberOfRuns を増やす： 3回より5回にすることで、中央値がより安定する
並列実行を避ける： 計測中は Lighthouse が唯一のジョブになるようにする

まとめ

Lighthouse CI を GitHub Actions に組み込むことで：

🔍 早期発見： 本番リリース前にパフォーマンスの問題を検知できる
📊 推移の可視化： スコアの変化をタイムラインで追跡できる
🤝 チーム文化の醸成： パフォーマンスへの意識をチーム全体で共有できる
⚡ 品質保証の自動化： レビュープロセスにパフォーマンス基準を組み込める

セットアップにかかる時間は小さな投資ですが、プロダクト品質への長期的なリターンは非常に大きいです。

参考リンク

この記事はWebパフォーマンス最適化シリーズの第5回です。参考になった方は ❤️ をお願いします！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up