Frontend Academy · レッスン

Lighthouse の監査とスコアリング

DevTools または CI で Lighthouse を実行し、パフォーマンススコアと診断結果を読み、改善効果が最も大きい項目を優先します。

レッスン 2/414 ステップ

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

Lighthouseとは

Lighthouseは、ページの読み込みをシミュレートし、パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWAのカテゴリごとにスコアを付ける、Googleのオープンソース監査ツールです。Chrome DevToolsに組み込まれており、CLIやCIからも実行できます。

DevToolsでLighthouseを実行する

DevToolsを開き、Lighthouseタブをクリックして、カテゴリとデバイス（モバイル／デスクトップ）を選択し、「Analyze page load」をクリックします。シミュレーションテストには約30秒かかります。

パフォーマンススコアの内訳

パフォーマンススコア（0～100）は、LCP（25%）、Total Blocking Time（30%）、CLS（25%）、FCP（10%）、Speed Index（10%）の加重平均です。基準は高く設定されており、90以上が「Good」です。

First Contentful Paint（FCP）

FCPは、最初のコンテンツ（テキストまたは画像）が描画された時点を示します。LCPとは異なり、FCPは何らかのコンテンツを対象とし、LCPは最大の要素を対象とします。良好：1.8秒未満。

Total Blocking Time（TBT）

TBTは、50ミリ秒を超えるJavaScriptタスクによってメインスレッドがブロックされている時間を測定します。TBTが高いと、ページが表示できる状態に見えても応答しないように感じられます。

Opportunitiesセクションの読み方

Lighthouseは、推定削減時間（例：「Eliminate render-blocking resources: 1.2s」）とともに「Opportunities」を一覧表示します。削減時間の大きい順に並べ、最大の効果が得られる項目から修正します。

よくある改善項目

よくある修正には、重要でないスクリプトのdefer／async、クリティカルCSSのインライン化、重要なリクエストの先読み、CDNの利用、テキスト圧縮（Brotli／gzip）の有効化、最新の画像形式での配信があります。

Lighthouse CLI

スクリプト化した監査を行うには、コマンドラインからLighthouseを実行します。

npm install -g lighthouse

lighthouse https://example.com \
  --output html \
  --output-path ./report.html \
  --chrome-flags="--headless"

GitHub ActionsでLighthouse CIを実行する

すべてのプルリクエストで監査を実行し、スコアがしきい値を下回った場合はビルドを失敗させます。

# .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
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json

Lighthouse設定：スコアアサーション

lighthouserc.jsonにアサーションを定義し、スコアが悪化したプルリクエストを失敗させます。

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
      }
    }
  }
}

スロットリングとデバイスのシミュレーション

Lighthouseはデフォルトで、低速な4GネットワークとミドルレンジのモバイルCPUをシミュレートします。これは意図的な設定です。実際のデバイスを使う本番ユーザーの環境は、開発マシンよりも遅いためです。

スコアのばらつき：なぜ変動するのか

JavaScriptの実行タイミングが変動するため、Lighthouseのスコアは実行ごとに変わります。監査を3～5回実行し、中央値を採用します。Lighthouse CIのnumberOfRunsを使うと、中央値を自動的に計算できます。

クイックチェック

長時間にわたるJavaScriptタスクによってメインスレッドがブロックされている時間を測定するLighthouseのメトリクスはどれですか？

対話的なレッスンで答える

まとめ：Lighthouse

Lighthouseは、パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWAを監査します。パフォーマンススコアは、LCP、TBT、CLS、FCP、Speed Indexの加重平均です。Opportunitiesセクションでは、推定削減時間の大きい順に修正項目が表示されます。DevTools、CLI、またはtreosh/lighthouse-ci-actionを使ってCIで実行します。スコアにばらつきがある場合は、複数回実行した中央値を採用します。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 41
レッスン: 163

無料で学習を始めるコース全体を表示

よくある質問

「Lighthouse の監査とスコアリング」レッスンは無料ですか？

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

「Lighthouse の監査とスコアリング」で何を学びますか？

DevTools または CI で Lighthouse を実行し、パフォーマンススコアと診断結果を読み、改善効果が最も大きい項目を優先します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Lighthouse の監査とスコアリング」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Frontend Academyに戻る