PR

【AI開発】githubactionsでlighthouse-ci-actionにパフォーマンス監視させてみる

2025.05.31
ALL開発
ai開発
PR
PR

なぜlighthouse-ci-actionがおすすめなのか

1. ビジネス直結の価値

  • 楽天がWeb Vitalsという定量的なパフォーマンス指標の改善を図り、訪問者あたりの収益が53.37%、コンバージョン率が 33.13%増加した
  • サイトの読み込みに1秒かかるごとに10%のユーザーをさらに失う

2. SEOへの直接的影響

  • Web Vitals scores can have a huge influence on your search engine rankings and directly impact your user’s experience
  • Google が提唱した Web Vitals と呼ばれる指標が非常に注目されています

3. 実装の簡単さ

  • GitHub ActionsのPRのワークフローの中に取り入れ、特定のURLに対してLighthouseを実行し、PRの変更によってパフォーマンスバジェットなどで決めた値を下回らないかなどをチェック項目として取り入れることができます

lighthouse-ci-action 実践設定

基本設定

yamlname: Lighthouse CI
on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    timeout-minutes: 10
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build application
        run: npm run build

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

Core Web Vitals バジェット設定

javascript// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      startServerCommand: 'npm run start',
      url: ['http://localhost:3000'],
      numberOfRuns: 3
    },
    assert: {
      assertions: {
        'largest-contentful-paint': ['error', {maxNumericValue: 2500}],
        'first-input-delay': ['error', {maxNumericValue: 100}],
        'cumulative-layout-shift': ['error', {maxNumericValue: 0.1}],
        'speed-index': ['error', {maxNumericValue: 3000}],
        'interactive': ['error', {maxNumericValue: 5000}]
      }
    },
    upload: {
      target: 'temporary-public-storage'
    }
  }
};

Vercel連携パターン

yamlname: Lighthouse CI with Vercel
on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Deploy to Vercel
        id: vercel_action
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

      - name: Audit URLs using Lighthouse
        uses: treosh/lighthouse-ci-action@v9
        with:
          urls: |
            ${{ steps.vercel_action.outputs.preview-url }}
          budgetPath: './budget.json'
          uploadArtifacts: true
          temporaryPublicStorage: true

      - name: Comment PR with results
        uses: peter-evans/create-or-update-comment@v3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
            ## 🚦 Lighthouse CI Report
            
            **Preview URL**: ${{ steps.vercel_action.outputs.preview-url }}
            
            Performance budget check completed! Check the Actions tab for detailed results.

高度な活用パターン

1. パフォーマンスバジェット with Slack通知

yaml- name: Lighthouse CI
  id: lighthouse
  uses: treosh/lighthouse-ci-action@v9
  with:
    urls: |
      http://localhost:3000
    budgetPath: './budget.json'
    uploadArtifacts: true

- name: Notify Slack on performance regression
  if: failure()
  uses: 8398a7/action-slack@v3
  with:
    status: failure
    text: "🚨 Performance regression detected in PR #${{ github.event.pull_request.number }}"
  env:
    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

2. パフォーマンストレンドの追跡

yaml- name: Upload results to Lighthouse CI Server
  uses: treosh/lighthouse-ci-action@v9
  with:
    urls: |
      http://localhost:3000
    serverBaseUrl: ${{ secrets.LHCI_SERVER_URL }}
    serverToken: ${{ secrets.LHCI_SERVER_TOKEN }}

lighthouse-ci-action の圧倒的なメリット

1. 直接的なビジネス価値

  • Web Vitals scores will directly impact your search engine ranking
  • ユーザーエクスペリエンスの定量的改善
  • コンバージョン率の向上

2. 開発フローとの親和性

  • GitHub Actionsなどを用いて、個別でサーバー構築をすることなしに、Lighthouseの実行と監視ができるツール
  • PRごとのパフォーマンス検証
  • 自動的なレポート生成

3. 包括的な分析

  • webサイトのパフォーマンスやアクセシビリティ、WPA等のメトリクス測定ができるツール
  • Core Web Vitals以外のSEO、アクセシビリティも同時測定

4. 継続的改善の仕組み

  • PRごとの各指標の遷移をグラフ確認できるようになり、ダッシュボードとして視覚的にわかりやすくスコアを確認できる

導入の第一歩

bash# 1. プロジェクトにLighthouse CI設定を追加
npm install -g @lhci/cli
echo 'module.exports = {ci: {collect: {url: ["http://localhost:3000"]}}}' > lighthouserc.js

# 2. GitHub Actionsワークフローを作成
# 3. PRでパフォーマンスを自動チェック

現代のWebアプリケーション開発において、lighthouse-ci-actionは価値の高いツールです。ぜひ導入して、ユーザーエクスペリエンスとビジネス成果の両方を向上させましょう！！