Webサイトのパフォーマンスや品質を客観的に評価したい場合、多くの開発者が利用しているのが Google Lighthouse です。
Lighthouseは、表示速度だけではなく、アクセシビリティやSEO、ベストプラクティスなども含めて総合的に診断できるツールです。開発段階だけでなく、公開後の継続的な改善にも役立ちます。
この記事では、Lighthouseの基本的な使い方と、レポートの見方、改善ポイントについて解説します。
Lighthouseとは？
LighthouseはGoogleが提供するオープンソースの監査ツールです。
主に以下の5つのカテゴリを評価します。
- Performance
- Accessibility
- Best Practices
- SEO
- Progressive Web App（PWA ※必要に応じて）
これらを確認することで、ユーザー体験と技術品質の両面からサイトを見直すことができます。
Lighthouseを実行する方法
Chromeを利用している場合は追加ソフトウェアは不要です。
手順
- Chromeで対象サイトを開く
- DevTools（F12）を起動する
- 「Lighthouse」タブを選択する
- MobileまたはDesktopを選ぶ
- 「Analyze page load」を実行する
数十秒後にレポートが生成されます。
Performanceスコアを見る
Performanceはページ表示速度に関する評価です。
代表的な指標には次のようなものがあります。
- First Contentful Paint（FCP）
- Largest Contentful Paint（LCP）
- Speed Index
- Total Blocking Time（TBT）
- Cumulative Layout Shift（CLS）
- Interaction to Next Paint（INP）
スコアだけを見るのではなく、どの項目がボトルネックになっているかを確認することが重要です。
Accessibilityを確認する
アクセシビリティでは、すべてのユーザーが利用しやすい設計になっているかを評価します。
よく指摘される例として、
- alt属性が不足している
- コントラスト比が低い
- フォームラベルが設定されていない
- ボタン名が分かりにくい
などがあります。
これらを改善することで、利用しやすさが向上します。
Best Practices
Best Practicesでは、安全性やモダンなWeb開発の観点からチェックが行われます。
例えば、
- HTTPSの利用
- 古いAPIの使用有無
- JavaScriptエラー
- セキュリティ上の推奨事項
などが確認できます。
定期的に確認することで、品質維持にも役立ちます。
SEOカテゴリ
SEOでは検索エンジンがページを理解しやすい構成になっているかを評価します。
主なチェック項目は、
- titleタグ
- meta description
- robots設定
- canonical
- モバイル対応
- リンクの説明
などです。
技術的なSEOの基本を見直すきっかけにもなります。
よくある改善ポイント
Lighthouseのレポートでは、改善候補も提示されます。
代表例は以下の通りです。
画像を最適化する
- WebPやAVIFを利用する
- 適切なサイズで配信する
- Lazy Loadingを導入する
JavaScriptを削減する
不要なライブラリを削除し、コード分割（Code Splitting）を活用します。
CSSを整理する
未使用CSSを削減し、必要なスタイルだけを読み込みます。
キャッシュを利用する
静的リソースに適切なCache-Controlを設定することで、再訪問時の表示速度を改善できます。
レポートは継続的に比較する
Lighthouseは一度実行して終わりではありません。
新機能の追加やライブラリ更新によってスコアが変化することもあるため、
- リリース前
- リリース後
- 定期メンテナンス時
など、同じ条件で継続的に計測することが大切です。
スコアの推移を記録しておくと、改善効果も把握しやすくなります。
実務での活用例
公開されているWebサービスを題材にLighthouseを実行すると、画像最適化やJavaScriptの読み込み方法、キャッシュ設定など、さまざまな改善ポイントを見つけることがあります。
例えば JLPH のようなデジタルプラットフォームを参考に、モバイル表示やトップページの構成を確認しながらLighthouseレポートを比較すると、Core Web Vitalsやアクセシビリティの改善に役立つ視点を得ることができます。重要なのは特定のスコアを目指すことではなく、ユーザー体験を継続的に改善していくことです。
まとめ
Lighthouseは、パフォーマンスだけでなく、アクセシビリティ、SEO、セキュリティ、品質全体を確認できる非常に便利なツールです。
日々の開発では、
- 定期的にレポートを取得する
- 改善項目を優先順位順に対応する
- Core Web Vitalsと合わせて確認する
- リリースごとに比較する
という運用を行うことで、品質を継続的に高めることができます。
スコアそのものを目的にするのではなく、実際のユーザーが快適に利用できるWebサイトを目指すことが、Lighthouseを活用する最大の価値と言えるでしょう。