まず結論
Lighthouseは、点数を競う道具ではなく、改善候補を見つけるための診断ツールです。
Chrome DevToolsから実行でき、ページの品質を複数の観点で確認できます。
主なカテゴリ:
- Performance
- Accessibility
- Best Practices
- SEO
Performance
Performanceは、ページの表示速度や体感速度に関係します。
よく見る項目:
- LCP
- CLS
- INP
- render-blocking resources
- unused JavaScript
- image size
特に画像が大きい、CSSやJavaScriptが重い、外部スクリプトが多い場合に点数へ影響します。
ただし、Lighthouseの数値は実行環境に左右されます。1回の点数で判断せず、複数回見て傾向を確認します。
Accessibility
Accessibilityは、使いやすさと読み上げ対応に関係します。
よく見る項目:
- 画像にaltがあるか
- ボタンに名前があるか
- コントラストが十分か
- フォームにlabelがあるか
- 見出し構造が自然か
アクセシビリティは、特別な対応ではなく、普通に使いやすいUIを作るための基礎です。
Best Practices
Best Practicesでは、安全性やブラウザの推奨事項に関する項目が出ます。
例:
- HTTPSを使っているか
- コンソールエラーがないか
- 非推奨APIを使っていないか
- 画像の縦横比が正しいか
ここで出る指摘は、すぐ直せるものもあれば、設計変更が必要なものもあります。
SEO
SEOでは、検索エンジンがページを理解しやすいかを見ます。
確認項目:
- titleがあるか
- meta descriptionがあるか
- canonicalがあるか
- robotsでブロックしていないか
- リンクに説明があるか
- モバイルで読みやすいか
SEO点数が高くても、検索順位が保証されるわけではありません。あくまで技術的な土台の確認です。
Opportunities と Diagnostics
Lighthouseの結果には、改善候補が表示されます。
| 種類 | 意味 |
|---|---|
| Opportunities | 改善すると速くなる可能性があるもの |
| Diagnostics | 詳細な診断情報 |
| Passed audits | 問題なかった項目 |
まずは赤やオレンジの指摘を見ます。ただし、すべてを機械的に直す必要はありません。
点数より見るべきもの
点数だけを見ると、改善の優先順位を間違えることがあります。
見る順番:
- 実際にユーザーが遅く感じる場所
- LCP対象の要素
- 大きすぎる画像
- Consoleエラー
- アクセシビリティの明確な欠落
- SEOの基本タグ
ポイント: Lighthouseは「全部100点にする」より、「ユーザー体験に効く指摘から直す」方が実務的です。
まとめ
Lighthouseは、Performance、Accessibility、Best Practices、SEOをまとめて確認できる診断ツールです。
点数は目安です。重要なのは、どの画像が重いのか、どの要素がLCPなのか、どのUIにアクセシビリティ上の問題があるのかを読み取ることです。
