8.1 Lighthouse

Lighthouse Audits

Lighthouseは、Webページの品質を自動的に監査するツール。パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWA対応を評価し、具体的な改善提案を提供する。Googleが開発するオープンソースプロジェクト。

Lighthouseの概要

パネルを開く

F12 → Lighthouseタブ

監査カテゴリ

カテゴリ 評価内容
Performance 読み込み速度、インタラクティブ性、視覚的安定性
Accessibility スクリーンリーダー対応、コントラスト、キーボード操作
Best Practices HTTPS、画像アスペクト比、非推奨API使用
SEO メタデータ、クローラビリティ、モバイル対応
Progressive Web App PWA要件への適合度

監査の実行

基本手順

操作手順

  1. Lighthouseパネルを開く
  2. 監査するカテゴリを選択
  3. デバイスモード（Mobile/Desktop）を選択
  4. 「Analyze page load」をクリック
  5. 監査完了まで待機（数十秒〜数分）

設定オプション

オプション 説明
Mode Navigation（ページ読み込み）、Timespan（期間）、Snapshot（現在の状態）
Device Mobile（CPU/Network制限あり）、Desktop（制限なし）
Categories 監査するカテゴリの選択
シークレットモードで実行 拡張機能の影響を排除するため、シークレットモードでの監査を推奨。より正確なスコアが得られる。

スコアの見方

スコア範囲

スコア 色 評価
90〜100 緑 良好
50〜89 オレンジ 改善が必要
0〜49 赤 不良

スコアの変動

Lighthouseのスコアは実行ごとに変動する可能性がある。ネットワーク状況、サーバー負荷、ブラウザの状態などが影響する。複数回実行して平均を取ることを推奨。

Performance指標

Performanceカテゴリでは、Core Web Vitalsを含む主要な指標を測定する。

主要指標

指標 正式名称 説明 良好な値
FCP First Contentful Paint 最初のコンテンツが表示されるまでの時間 ≤ 1.8秒
LCP Largest Contentful Paint 最大のコンテンツが表示されるまでの時間 ≤ 2.5秒
TBT Total Blocking Time メインスレッドがブロックされた合計時間 ≤ 200ms
CLS Cumulative Layout Shift 視覚的な安定性（レイアウトのずれ） ≤ 0.1
SI Speed Index コンテンツが視覚的に表示される速度 ≤ 3.4秒
Core Web Vitals LCP、CLS、およびINP（Interaction to Next Paint）はGoogleのCore Web Vitals。検索ランキングの要因の一つ。Lighthouseでは、INPの代わりにTBTを測定（TBTはINPと相関が高い）。

Opportunities（改善機会）

スコアを向上させるための具体的な提案。推定される改善効果（時間）も表示される。

よくある指摘

指摘 対策
Properly size images 適切なサイズの画像を提供、srcset使用
Serve images in next-gen formats WebP、AVIF形式を使用
Eliminate render-blocking resources CSS/JSの遅延読み込み、インライン化
Reduce unused JavaScript コード分割、Tree shaking
Reduce unused CSS 未使用CSSの削除、Critical CSS
Enable text compression Gzip/Brotli圧縮を有効化
Preconnect to required origins <link rel="preconnect">を追加
Reduce server response times (TTFB) サーバー最適化、CDN利用

Diagnostics（診断）

パフォーマンスに関する追加情報。直接スコアには影響しないが、改善のヒントになる。

よくある診断項目

項目 説明
Avoid large layout shifts CLSを引き起こしている要素を特定
Avoid long main-thread tasks 50ms以上のLong Tasksを一覧表示
Minimize main-thread work メインスレッドの処理内訳
Reduce JavaScript execution time JSファイル別の実行時間
Avoid excessive DOM size DOM要素数が多すぎる

Accessibility

アクセシビリティの自動チェック。手動チェックが必要な項目も案内される。

チェック項目例

項目 説明
Image elements have [alt] attributes 画像にalt属性が設定されているか
Background and foreground colors have sufficient contrast ratio テキストと背景のコントラスト比
Document has a <title> element titleタグが存在するか
Links have a discernible name リンクに認識可能なテキストがあるか
Form elements have associated labels フォーム要素にラベルが関連付けられているか
Heading elements appear in a sequentially-descending order 見出しの階層が適切か
自動チェックの限界 Lighthouseのアクセシビリティチェックは自動化可能な項目のみ。キーボード操作性、スクリーンリーダーでの実際の体験などは手動テストが必要。

Best Practices

Web開発のベストプラクティスへの適合度をチェック。

チェック項目例

項目 説明
Uses HTTPS HTTPSで配信されているか
Displays images with correct aspect ratio 画像のアスペクト比が正しいか
Avoids deprecated APIs 非推奨APIを使用していないか
No browser errors logged to the console コンソールにエラーがないか
Page has the HTML doctype DOCTYPEが宣言されているか
Properly defines charset 文字エンコーディングが定義されているか

SEO

検索エンジン最適化のベースラインチェック。

チェック項目例

項目 説明
Document has a meta description meta descriptionが設定されているか
Page has successful HTTP status code HTTPステータスが200系か
Links are crawlable リンクがクローラブルか
Page isn't blocked from indexing インデックスがブロックされていないか
Document has a valid hreflang hreflangが正しく設定されているか
Document has a valid rel=canonical canonical URLが設定されているか

Progressive Web App

PWAとしての要件を満たしているかチェック。

主な要件

要件 説明
Installable インストール可能（manifest、Service Worker、HTTPS）
PWA Optimized リダイレクト、カスタムスプラッシュ、テーマカラー等

レポートの活用

レポートの保存

  • HTML形式: 右上のメニュー → Save as HTML
  • JSON形式: 右上のメニュー → Save as JSON
  • Viewer: JSON を Lighthouse Viewer で開く

レポートの共有

HTMLレポートはそのままチームと共有可能。JSONはCIパイプラインでの継続的な監視に使用できる。

Treemap表示

レポート内の「View Treemap」ボタンで、JavaScriptバンドルの構成を視覚化できる。どのモジュールが大きいかを把握するのに便利。

コマンドライン版

Lighthouseはnpmパッケージとしても提供されている。CI/CDパイプラインでの自動監査に使用できる。

# インストール
npm install -g lighthouse

# 実行
lighthouse https://example.com --output html --output-path ./report.html

# モバイルモードで実行
lighthouse https://example.com --preset=desktop

# 特定のカテゴリのみ
lighthouse https://example.com --only-categories=performance,accessibility

活用のTips

本番環境で計測

開発環境はキャッシュや圧縮が無効なことが多い。本番環境または本番に近い環境で計測する。

定期的に計測

コード変更によるパフォーマンス劣化を早期に発見するため、定期的に計測する。CI/CDに組み込むと効果的。

優先度をつける

すべての指摘を修正する必要はない。Opportunitiesの推定改善効果を参考に、インパクトの大きい項目から対応する。

実ユーザーデータと比較

Lighthouseはラボデータ（シミュレート環境）。Chrome UX Report（CrUX）などの実ユーザーデータと併用すると、より正確な状況を把握できる。

参考文献
[1] Lighthouse overview - Chrome DevTools. developer.chrome.com
[2] Lighthouse scoring calculator. googlechrome.github.io
[3] web.dev - Measure. web.dev