# Lighthouseの使い方｜スコアの見方と表示速度の改善手順 元のページ: サイト表示速度の改善方法｜Core Web Vitals対策ガイド LighthouseとはGoogleのパフォーマンス計測ツールです。PageSpeed Insights・Chrome DevTools・CLIの3つの起動方法・スコアの読み方・改善サイクルの回し方をまとめています。 ## **はじめに** 「Lighthouse（ライトハウス）」はGoogleが提供するオープンソースの自動計測ツールで、Webサイトのパフォーマンス・アクセシビリティ・SEO・ベストプラクティスを包括的に評価します。PageSpeed InsightsのスコアはこのLighthouseを基盤としており、Web制作・運用の現場で必須のツールです。 本記事では、Lighthouseの概要・計測できる内容・各起動方法・スコアの読み方・改善への活用方法を解説します。 ## **Lighthouseとは** Lighthouseは2016年にGoogleが公開したオープンソースの自動診断ツールです。URLを指定するだけで、Webページの様々な品質指標を自動計測してレポートを生成します。 ### **Lighthouseが計測する5つのカテゴリ** #### **Performance（パフォーマンス）** ページの読み込み速度・Core Web Vitals（LCP・INP・CLS等）を計測。0〜100点で評価される。 サイト表示速度がUX・SEOに与える影響については「[**サイト表示速度とは（UXとSEOへの影響）**](https://chot-inc.com//knowledge/what-is-site-speed)」で詳しく解説しています。 #### **Accessibility（アクセシビリティ）** 視覚障がい者・運動機能に制限があるユーザーが使えるか。ALTテキスト・コントラスト比・キーボード操作等を確認。 #### **Best Practices（ベストプラクティス）** セキュリティ・HTTPSの使用・廃止されたAPIの使用等を確認。 #### SEO タイトルタグ・メタディスクリプション・robots.txt・モバイルフレンドリー等のSEO基本要件を確認。 #### **PWA（Progressive Web App）** オフライン対応・インストール可能性等のPWA要件を確認（近年は重要度が低下）。 ## **Lighthouseの起動方法** Lighthouseには複数の起動方法があります。 ### **方法1：PageSpeed Insights（最も手軽）** GoogleのPageSpeed Insights（[pagespeed.web.dev](http://pagespeed.web.dev/)）にURLを入力するだけで、Lighthouseを使った診断結果が得られます。 #### 特徴 - URLを入力するだけで即座に結果が表示されます - モバイル・デスクトップの両方を計測できます - Field Data（実際のユーザーデータ）とLab Data（シミュレーション）の両方を表示します - アカウント不要で使用できます #### **おすすめの使い方** 初めて速度を確認する場合・クライアントや経営層への説明資料を作る場合に適しています。 ### **方法2：Chrome DevToolsのLighthouse（開発・デバッグ向け）** ChromeブラウザでF12（またはCmd+Option+I）を押してDevToolsを開き、「Lighthouse」タブを選択して使用します。 #### 特徴 - 認証が必要なページ（ログイン後のページ等）でも計測できます - ネットワーク設定・CPU速度のシミュレーション条件を変更できます - キャッシュをクリアした状態での計測が可能 - 開発中のローカル環境のページも計測できます #### **おすすめの使い方** 開発中のページのパフォーマンスを確認・改善のサイクルを回す場合に適しています。 ### **方法3：Lighthouse CLI（コマンドライン）** Node.jsで動作するコマンドラインツールとして使用できます。 #### 特徴 - CI/CDパイプラインに組み込んでデプロイ時に自動計測できます - 複数URLをバッチで計測できます - レポートをHTMLまたはJSON形式で保存できます #### **おすすめの使い方** デプロイ時の自動品質チェック・大量ページの定期的なモニタリングに適しています。 ### **方法4：Chrome拡張機能** Chrome Web StoreからLighthouseの公式拡張機能をインストールして使用します。 ## **Lighthouseスコアの読み方** ### スコア区分と対応の目安表 | スコア | 状態 | ネクストアクション | | - | - | - | | 90から100 | 良好 | 現状を維持し、改修のたびに再計測する | | 50から89 | 改善が必要 | Opportunitiesの上位から順に対応する | | 0から49 | 不良 | 画像とスクリプトの見直しを優先し、構成そのものの再検討も視野に入れる | ### **Performanceスコアの構成** Performanceスコア（0〜100点）は複数のメトリクスの加重平均で計算されます。主要なメトリクスとその重みは以下の通りだ（バージョンにより変更される場合がある）。 - LCP（Largest Contentful Paint）：重み大 - TBT（Total Blocking Time）：重み大（INPの代替指標） - CLS（Cumulative Layout Shift）：重み中 - FCP（First Contentful Paint）：重み小 - SI（Speed Index）：重み小 TBTはINPのLab Data版の代替指標で、メインスレッドをブロックするタスクの合計時間を示す。 ### **「Opportunities（改善の機会）」と「Diagnostics（診断）」** Lighthouseのレポートには、スコアの数値だけでなく「具体的な改善提案」が含まれています。 #### **Opportunities（改善の機会）** 実施することでパフォーマンスが向上する具体的な施策リスト。推定される改善効果も表示されます。例：「画像の最適化で3.2秒の改善が見込まれます」 #### **Diagnostics（診断）** パフォーマンスに影響する可能性がある問題のリスト。直接的な改善効果の数値は示されないが、根本的な問題を特定するのに役立つ。 ## **Lighthouseスコアを正しく解釈するための注意点** ### **注意1：Lab DataはField Dataと異なる** LighthouseはシミュレーションしたモバイルCPU・通信速度（デフォルトでスロットルされた4G相当）で計測するLab Dataです。実際のユーザーのField DataはSearch Consoleで確認します。 PageSpeed InsightsのスコアがP90台でも、Search ConsoleのCore Web Vitalsレポートでは「要改善」となるケースがあります（特にトラフィックが多い高負荷時の実測値の場合）。 ### **注意2：スコアの変動は正常** Lighthouseのスコアは計測のたびに数ポイント変動することがあります。同じ条件で複数回計測して平均を取ることで、より安定した評価ができます。 ### **注意3：モバイルとデスクトップのスコアは大きく異なる** Lighthouseはモバイルとデスクトップを別々に計測します。多くのサイトはデスクトップのスコアが高く、モバイルのスコアが低い傾向があります。モバイルのスコアを優先的に改善することが重要だ（Googleはモバイルファーストインデックスを採用している）。 #### **モバイルとデスクトップでスコアが変わる理由** 同じページでも、モバイルのスコアがデスクトップより低く出るのが一般的です。理由は計測条件の違いにあります。 モバイルの計測では、処理能力を抑えた端末と、遅延を加えた通信環境がシミュレーションされます。同じJavaScriptを実行しても処理に要する時間が長くなるため、読み込みを妨げる時間の指標が悪化しやすくなります。 画面の幅も条件に含まれます。幅が狭い分だけ最初に表示される範囲に入る要素が変わり、どの要素が最大の描画対象として扱われるかが入れ替わることがあります。 どちらを優先するかは訪問者の端末構成によります。迷う場合は、アクセス解析でモバイルの比率を確認してから決めてください。 ## **Lighthouseと実ユーザーデータ（CrUX）の違い** Lighthouseが出すのは、決められた条件でその場で計測した値です。これに対してCrUX（Chrome User Experience Report）は、実際にページを訪れた利用者の環境で記録された値を集計したものです。 CrUXは一定期間分をまとめた集計で、代表値には平均ではなく遅い側を含めた分位点が使われます。手元の計測では良好でも、回線や端末の条件が幅広い実利用では基準を満たさない、という差が生じます。 また、CrUXは十分な訪問数がないと値が表示されず、アクセスの少ないページではサイト全体をまとめた値が参照されることがあります。改修の効果は、その場の計測で方向性を確かめ、実利用の値で結果を確認する二段構えで見てください。 ## **Lighthouseの活用方法：改善サイクルの回し方** ### **ステップ1：現状把握** PageSpeed InsightsでモバイルのPerformanceスコアと各Core Web Vitalsの値を記録する。 ### **ステップ2：改善の優先順位付け** Opportunitiesに表示された改善項目を、「推定改善効果の大きさ」と「実装の難易度」で評価して優先順位をつける。 ### **ステップ3：実装と確認** 優先度の高い改善を実施し、Lighthouseで再計測して効果を確認する。 ### **ステップ4：Field Dataでの確認** Search ConsoleのCore Web VitalsレポートでField Dataの改善を確認する（反映まで数週間かかる）。 ## **スコアが低いときにまず確認する項目** スコアの数値だけでは、どこから手を付けるかは決まりません。レポートを開いたら次の順で確認すると、原因を絞り込みやすくなります。 最初に見るのは、Performanceスコアの内訳のうち目標を大きく外れている指標です。次に、その指標に対応する項目がOpportunitiesに挙がっているかを確認し、推定される短縮時間の大きい順に並べ替えます。 そのうえで次の3点を確認してください。表示サイズより大きい原寸の画像を読み込んでいないか。外部から読み込んでいるタグやスクリプトのうち、現在は使っていないものが残っていないか。フォントの読み込みが本文の表示を待たせていないか。 90から100｜良好｜現状を維持し、改修のたびに再計測する 50から89｜改善が必要｜Opportunitiesの上位から順に対応する 0から49｜不良｜画像とスクリプトの見直しを優先し、構成そのものの再検討も視野に入れる ## **まとめ** Lighthouseは、PageSpeed Insights・Chrome DevTools・CLIなど複数の方法でアクセスでき、Performance・Accessibility・SEO等のWebサイト品質を包括的に計測するGoogleのオープンソースツールです。 重要なのはスコアを「見るだけ」でなく、Opportunitiesの改善提案を実施して継続的にサイトの品質を高めることです。次の記事では、PageSpeed InsightsとGTmetrixの読み方を詳しく解説します。 ## よくあるご質問 点数そのものより、Core Web Vitalsの各指標が目標値の範囲に入っているかを基準にすることをおすすめします。点数は複数の指標の加重平均であり、配点はバージョンによって変わることがあります。 計測時のネットワーク状況やサーバーの応答時間に影響されるためです。同じ条件で複数回計測し、中央値に近い値で比較してください。 実利用の値は一定期間分の集計であるため、反映までに時間差があります。数週間の幅を見込んでから判断してください。 一般には、最大の描画対象の表示にかかる時間から着手すると、体感の改善につながりやすくなります。 ## エージェント型Web・AIアプリ 開発のご相談 chot inc.ではエージェント型Webの設計・構築・ 運用を 一貫してサポートしています。 [お問い合わせ](https://chot-inc.com/contact) ## このテーマの他の記事 - ### [サイト表示速度とは？なぜUXとSEOの両方に影響するのか](https://chot-inc.com/knowledge/what-is-site-speed) [サイト表示速度とは何か、なぜUXとSEOの両方に影響するのかを解説します。直帰率・CV率・Core Web Vitalsのランキング要因としての位置づけ・速度が遅くなる6つの原因をまとめています。](https://chot-inc.com/knowledge/what-is-site-speed) - ### [Core Web Vitalsとは？LCP・INP・CLSの意味と目標値](https://chot-inc.com/knowledge/core-web-vitals-explained) [Core Web VitalsのLCP・INP・CLSの意味と目標値を解説します。各指標の定義・良好・要改善・不良の基準・悪化する原因・Field DataとLab Dataの違いをまとめています。](https://chot-inc.com/knowledge/core-web-vitals-explained) - ### [表示速度の計測方法｜PageSpeed Insights・GTmetrixの読み方](https://chot-inc.com/knowledge/pagespeed-gtmetrix-guide) [表示速度の計測方法としてPageSpeed InsightsとGTmetrixの読み方を解説します。スコアの構成・ウォーターフォールの読み方・2つのツールの使い分けをまとめています。](https://chot-inc.com/knowledge/pagespeed-gtmetrix-guide) [サイト表示速度の改善方法｜Core Web Vitals対策ガイド一覧](https://chot-inc.com/knowledge/themes/web-performance)