Google Lighthouseの使い方完全ガイド｜サイトのパフォーマンスをテストして最適化する方法

ウェブサイトを検索エンジンの上位に表示させるうえで、「表示速度」は決して無視できない重要な要素です。表示速度が速いサイトはユーザーに喜ばれるだけでなく、検索結果での視認性向上にも直結します。ページをクリックしたのに永遠に読み込まないサイトを待ち続けたい人はいませんよね。もし「表示速度が遅いせいでサイトが上位表示されないのでは？」と不安を感じているなら、Google Lighthouseがその悩みを解決してくれます。本記事では、Google Lighthouseを使ったパフォーマンステストの具体的な手順をわかりやすく解説します。

Google Lighthouseとは？

「第一印象は最後の印象」という言葉があるように、表示速度の速いサイトは優れたユーザー体験（UX）につながり、結果としてコンバージョン率の向上にも寄与します。実際、Googleなどの検索エンジンも、読み込みが速いサイトを検索結果で高く評価する傾向があります。

Google Lighthouseは、ウェブ開発者やサイト運営者がページの品質を評価・改善できるオープンソースの自動監査ツールです。モバイルとデスクトップの両方に対応しており、「パフォーマンス」「アクセシビリティ」「ベストプラクティス」「SEO」の4つのカテゴリで監査を行います。詳細なレポートと改善提案をもとに、サイトのパフォーマンスを最適化し、ユーザーエンゲージメントの向上を図れます。公開・非公開を問わず、あらゆるWebページに対して実行可能です。

方法1：Chrome拡張機能を使ってLighthouseを実行する

LighthouseはGoogle拡張機能としても提供されており、Chromeブラウザ上で簡単に監査を実行できます。以下の手順に従ってください。

1. 任意のブラウザで、ChromeウェブストアのLighthouse拡張機能のページにアクセスします。

2. 「Chromeに追加」をクリックします。

3. 「拡張機能を追加」を選択して確定します。

4. 追加が完了したら、分析したいサイトをブラウザで開きます。

5. アドレスバー横の拡張機能（パズル）アイコンをクリックし、Lighthouseを選択します。

6. 「Generate report（レポートを生成）」をクリックします。

これだけで完了です。数秒後に、テスト対象サイトを分析した詳細なレポートが生成されます。

方法2：PageSpeed Insightsを利用する

Google PageSpeed Insightsも、Lighthouseを分析エンジンとして採用したWebパフォーマンステストツールです。これを使えば、サイトのレポートを簡単に生成できます。手順は以下の通りです。

1. PageSpeed Insightsの公式サイトにアクセスします。

2. テキストボックスにサイトのURLを入力し、「分析」をクリックします。

テストが完了すると、実際のユーザーが体感した結果を示す「Chromeユーザーエクスペリエンスレポート」が表示されます。

「パフォーマンスの問題を診断」セクションにはLighthouseのスコアが表示されます。モバイルとデスクトップ両方の結果を確認できます。

方法3：DevToolsでLighthouseを実行する

Google ChromeのDevToolsにはLighthouse専用パネルがあり、ローカルサーバーで動作しているサイトやログインが必要なサイトのパフォーマンステストにも利用できます。手順は以下の通りです。

1. 監査したいサイトにアクセスします。

2. ページ上の任意の場所で右クリックし、メニューから「検証（Inspect）」を選択します。

3. 「>>アイコン（その他のタブ）」をクリックし、コンテキストメニューからLighthouseを選択します。

4. 右上の「Analyze page load（ページの読み込みを分析）」ボタンをクリックし、結果が表示されるまで待ちます。

注意： Device（デバイス）を適切に選択し、Categories（カテゴリ）はすべて有効にしておきましょう。

また、テストモードの変更も可能です。DevTools版Lighthouseには3つのテストモードがあります。

• Navigation（ナビゲーション）： パフォーマンス、アクセシビリティ、SEOを含む総合的な結果を表示します。

• Timespan（タイムスパン）： ページの読み込みからユーザーの操作までの時間に基づく結果を表示します。テスト実行中にページを操作する必要があります。

• Snapshot（スナップショット）： 現在のページの状態に対するスコアを算出します。

方法4：コマンドラインでLighthouseモジュールを使用する

LighthouseはNodeモジュールとしても提供されており、継続的インテグレーション（CI）システムへの組み込みや、コマンドライン・プログラムからの利用が可能です。必要なのはNode.jsだけです。PCにNode.jsがインストールされている場合は、以下の手順を実行してください。

1. サーバーにログインし、以下のコマンドを実行してLighthouseのグローバルモジュールをインストールします。

npm install -g lighthouse

2. インストール完了後、以下のコマンドでLighthouseテストを実行します。

lighthouse --view <url>

利用可能なすべてのオプションは、次のコマンドで確認できます。

lighthouse --help

Lighthouseはスコアをどう計算しているのか

Google Lighthouseは、パフォーマンス、アクセシビリティ、ベストプラクティス、SEO、PWAなど、サイトパフォーマンスに関するさまざまな指標を統合的に評価します。監査が完了すると、各項目のスコアと、サイトのパフォーマンスおよびユーザー体験を向上させるための改善提案を含むレポートが生成されます。スコアは一般的に0〜100のスケールで評価されます。

パフォーマンス

LighthouseはWebページの読み込み速度を分析します。パフォーマンススコアは、以下の指標をもとに算出されます。

• First Contentful Paint（FCP）： コンテンツの最初の要素が画面に描画されるまでの速さ
• Largest Contentful Paint（LCP）： 最大のコンテンツ要素が表示されるまでにかかる時間
• Cumulative Layout Shift（CLS）： ページ読み込み中に発生する予期しないレイアウトずれの量。視覚的安定性を測定します。数値が低いほどサイトが安定していることを示します。
• Total Blocking Time（TBT）： メインスレッドがブロックされ、ユーザーの入力に応答できなかった時間
• Speed Index（SI）： ページの全コンテンツが完全に表示されるまでの速さ

これらの指標は、サイトの読み込み速度と視覚的安定性を測るものです。画像のサイズや枚数、使用プラグインの数、コードの効率性などがレポートに影響します。

Lighthouseは各指標値の加重平均によってスコアを計算します。当然ながら、重み付けの高い指標ほど総合スコアへの影響が大きくなります。個々の指標スコアはレポートには表示されませんが、内部で計算されています。「See calculator（電卓を見る）」をクリックすれば、スコアに影響する要因の詳細な計算内容を確認できます。

アクセシビリティ

障害のあるユーザーにとってサイトがどれほど利用しやすいかを測る、ユーザー中心のスコアです。画像のalt属性の有無、ARIA属性の使用状況、キーボード操作への対応などが影響します。アクセシビリティ監査は「合格」か「不合格」のどちらかで判定され、パフォーマンス監査とは異なり、部分合格ではポイントが付与されません。

• 画像のaltテキスト： ページ上のすべての画像には、適切で説明的なaltテキストが必要です。スクリーンリーダーで画像を認識する視覚障害者にとって不可欠な情報だからです。
• セマンティックHTML： 見出し、リストなどの意味的なHTML要素を正しく使うことで、スクリーンリーダーなどの支援技術がページ構造を理解しやすくなります。
• カラーのコントラスト： 文字色と背景色のコントラストは、WCAG（Web Content Accessibility Guidelines）の基準を満たす必要があります。十分なコントラストにより、弱視や色覚障害のある方でも文字が読みやすくなります。

ベストプラクティス

サイトがWeb開発のベストプラクティスやコーディング標準にどれだけ準拠しているかを測定し、スコア化します。最新のJavaScript機能の活用や安全な接続（HTTPS）の使用がチェックされ、圧縮・最小化の利用、セキュリティヘッダーの有無、robots.txtの設定なども影響します。主な監査項目は以下の通りです。

• 大型JavaScriptライブラリの回避
• 未使用CSSの削除
• テキスト圧縮の有効化
• レンダリングを妨げるリソースの排除
• ブラウザキャッシュの活用
• 効率的なキャッシュポリシーによる静的アセットの配信

SEO

SEOは、サイトが検索エンジン向けにどれだけ最適化されているかを測定します。メタディスクリプションやタイトルタグの有無、関連キーワードの使用、コンテンツ構造などが影響します。スコアは以下の監査項目の平均値として計算されます。

• ドキュメントタイトル
• Description
• 見出し
• 画像
• リンク
• メタディスクリプション
• robots.txt

結果の読み取り方

Lighthouseは各生指標値を0〜100のスコアに変換します。数値が高いほど良好です。スコアは以下の範囲ごとに色分けされて表示されます。

• 0〜49（赤い三角）：不良（Poor）
• 50〜89（橙色の四角）：改善が必要（Needs Improvement）
• 90〜100（緑の丸）：良好（Good）

同じサイトで複数回テストを実行すると、総合スコアにばらつきが出ることがあります。この変動にはいくつかの要因があります。

• 1回の分析では単一のページ読み込みしか測定できません。2つとして同じ読み込みは存在しないため、読み込み時間が自然に変動します。
• 広告など頻繁に変わる動的コンテンツ、ネットワークリクエストに介入するブラウザ拡張機能、PCのバックグラウンド処理などもページ速度に影響します。
• ハードウェアやネットワーク環境の違いにより、PageSpeed InsightsとローカルPCなど、異なる環境で取得したスコアを直接比較することは推奨されません。

Lighthouseスコアを改善する方法

Lighthouseは、ラボデータ（シミュレーションテスト）とフィールドデータ（実ユーザーデータ）の両方を使ってページのパフォーマンスを評価します。フィールドデータは実際のユーザー体験を把握するのに役立ち、ラボデータは変更や改善のテストに有効です。

まずはパフォーマンス分野の改善提案に集中しましょう。表示速度の速いサイトはユーザー体験を向上させ、SEOランキングの押し上げにもつながります。パフォーマンススコアが改善されたら、他の分野の提案にも着手しましょう。アクセシビリティとSEOはサイト全体の品質を左右する重要な要素なので、これらの強化にも努力する価値があります。

初心者向けの追加アドバイス

サイトを立ち上げたばかりの方は、以下のポイントも心に留めておいてください。

• Lighthouseレポートの膨大な提案に圧倒されないこと。最重要なアドバイスから順に、リストを上から潰していきましょう。
• Lighthouseレポートは経時的な進捗管理にも活用できます。改善策を実装すれば、スコアも徐々に上がっていくはずです。
• 複数のデバイスとブラウザでテストすることを忘れないでください。Lighthouseレポートは1回のテストに基づくため、すべてのユーザーに快適な体験を届けるには、多様な環境での検証が不可欠です。

本ガイドが、Google Lighthouseを使ったサイトのパフォーマンステストと改善の理解に役立てば幸いです。ご質問やご提案があれば、コメント欄でお気軽にお知らせください。今後も有益な情報をお届けしますので、ぜひブックマークしてご覧ください。