Frontend Academy · レッスン

Lighthouseの自動チェック

Lighthouse CI GitHub Actionを追加し、パフォーマンスとアクセシビリティのスコアしきい値を設定して、Core Web Vitalsを悪化させるマージをブロックします。

「Lighthouseの自動チェック」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Lighthouseを自動化する理由

手動でLighthouseを実行すると、パフォーマンスの低下に気付くのが遅れ、通常は実際のユーザーから苦情を受けた後になります。自動化したLighthouse CIはすべてのPRで実行され、主要な指標が悪化した場合はビルドを失敗させ、時間の経過に伴うスコアの推移を記録します。パフォーマンスもテストスイートと同じように扱います。

Lighthouse CI

Googleが提供するオープンソースのLighthouse CI（lhci）ツールセットです。Lighthouseを複数回実行して中央値を取り、しきい値に対して検証し、結果をアップロードします。

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — 設定

テストするURL、実行回数、アサーションを設定します。

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

GitHub Actionsとの統合

公式のtreosh/lighthouse-ci-actionは、すべてのPRでlhciを実行し、ステータスチェックを投稿します。

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

複数回実行した結果の中央値

タイミングのばらつきがあるため、Lighthouseのスコアは実行ごとに変動します。numberOfRuns: 5では中央値を取得するため、しきい値による検証に十分な安定性が得られます。3回未満では結果が不安定になりやすくなります。

パフォーマンスバジェット

スコアだけでなく、リソースのサイズや数にも厳格な上限を設定します。上限を超えるとビルドが失敗します。

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Lighthouse CIサーバー

LHCIサーバーを自分でホストすると、履歴データを保持し、推移グラフを確認し、時間の経過に伴ってブランチを比較できます。単発のPR結果には、一時的なパブリックストレージを使用することもできます。

認証が必要なページのテスト

Puppeteerスクリプトを使って、Lighthouseの実行前にログインします。

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Slack／Discord通知

LHCIの結果をチームのチャットに送ります。パフォーマンスの低下も、テスト失敗と同じように注意して扱う必要があります。

モバイルとデスクトップ

Lighthouseのデフォルトはモバイル（低速な4GとミドルレンジのCPU）です。デスクトップ向けにはpreset: 'desktop'を設定します。ほとんどの本番アプリでは両方を監査するべきなので、CIではジョブを分けます。

しきい値の調整

まず現在のスコアをベースラインにします。初日からPRを失敗させず、最初は記録と警告にとどめます。チームがこのワークフローに慣れたら、しきい値を段階的に厳しくします。

Lighthouseのその先

Lighthouseはラボデータです。リアルユーザーモニタリング（RUM）と組み合わせましょう。web-vitals npmパッケージと独自のアナリティクス、またはSpeedCurveやCalibreなどのサービスを使うと、実際のユーザー環境におけるパフォーマンスの推移を把握できます。

クイックチェック

Lighthouse CIでは、単一の実行結果ではなく、通常は複数回（例：5回）の実行結果の中央値を使うのはなぜですか？

まとめ：Lighthouseの自動化

lhci autorunをCIに統合します。lighthouserc.jsonでURL、実行回数（5回以上）、カテゴリと指標に対するアサーション、パフォーマンスバジェットを設定します。GitHubではtreosh/lighthouse-ci-actionを使用します。推移を確認するにはLHCIサーバーを自分でホストします。認証が必要なページにはPuppeteerスクリプトを使用します。モバイルとデスクトップの両方を監査します。まずは警告から始め、時間をかけてしきい値を厳しくします。全体像を把握するにはRUMと組み合わせます。

よくある質問

「Lighthouseの自動チェック」レッスンは無料ですか？

はい。「Lighthouseの自動チェック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Lighthouseの自動チェック」で何を学びますか？

Lighthouse CI GitHub Actionを追加し、パフォーマンスとアクセシビリティのスコアしきい値を設定して、Core Web Vitalsを悪化させるマージをブロックします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Lighthouseの自動チェック」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る