ポートフォリオサイトを作り終えたとき、「見た目はそれっぽくなったけど、品質的にはどうなんだろう？」と気になりました。調べてみると、ChromeのデベロッパーツールにはLighthouseというパフォーマンステストツールが標準で搭載されており、特別なセットアップなしに手軽に使えることがわかりました。
この記事では、Lighthouseの基本的な使い方と結果の読み方を、実際の画面キャプチャとともに紹介します。
1. 本番ビルドでテストする
開発中によく使う pnpm dev（開発モード）のままLighthouseを実行すると、コードが最適化されていない状態のためスコアが実態よりも大きく下がります。
開発モード（pnpm dev） |
本番ビルド（pnpm build） |
|
|---|---|---|
| JS圧縮 | ❌ なし | ✅ あり |
| Tree-shaking | ❌ なし | ✅ 未使用コードを削除 |
| コード分割 | ❌ 未最適化 | ✅ ルート単位で自動分割 |
| バンドルサイズ | 本番の数倍 | 最小化済み |
テスト前に pnpm build でビルドし、pnpm start で本番サーバーを起動してからページを開くようにしましょう。
2. Lighthouseの起動手順
以下の手順でLighthouseを起動します。
- テストしたいWebページを開き、画面上の任意の場所で右クリックします。
- メニューから「検証（Inspect）」を選択して、デベロッパーツール（DevTools）を開きます。
- DevToolsのタブ一覧から「Lighthouse」を選択します。タブが見当たらない場合は、右端の
>>アイコンをクリックすると隠れているタブが表示されます。 - 画面中央にある「ページロードを分析（Analyze page load）」ボタンをクリックします。
- 結果を示す：
3. 結果の見方
上部には4つのスコアが表示されており、それぞれ異なる観点からページの品質を評価しています。
Performance（パフォーマンス）
ページの読み込み速度や描画の滑らかさを測ります。スコアが高いほど、ユーザーが体感する待ち時間が少なく、快適に操作できます。
Accessibility（アクセシビリティ）
すべてのユーザーにとって使いやすい設計かどうかを評価します。視覚に制限のある方やスクリーンリーダーを使うユーザーへの配慮（文字と背景のコントラスト比、画像への代替テキストの有無など）が主な対象です。
Best Practices（ベストプラクティス）
Webの標準的な実装ルールやセキュリティ基準を満たしているかを確認します。HTTPSの使用有無や、非推奨APIの使用といった点がチェックされます。
SEO（検索エンジン最適化）
Googleなどのクローラーがページの内容をどれだけ正確に解釈できるかを測ります。スコアが高いほど、検索結果で上位に表示されやすくなる傾向があります。
スコアの下には、各項目で減点された具体的な原因が一覧表示されます。
たとえばアクセシビリティの項目では、「ボタンにアクセシブルな名前が設定されていないため、スクリーンリーダーが単に『ボタン』と読み上げてしまう」といった指摘が表示されることがあります。これを手がかりに、ひとつずつ改善していくことができます。
4. テスト前に個人のおすすすめ
個人のおすすめは、ビルド前にシークレットウィンドウを使った方がいいと思う。
なぜなら、Chromeの拡張機能がページの読み込みに干渉し、スコアを不当に下げることがあります。
同じページを計測しても、通常ウィンドウとシークレットウィンドウでは結果が変わることがあるため、シークレットウィンドウを使うことをおすすめします。
非シークレットウィンドウの場合:
シークレットウィンドウの場合：
