PageSpeed Insightsの見方：各スコアの意味と改善方法
ホーム PageSpeed Insightsの見方
PageSpeed Insightsの見方：スコア、指標、改善方法 | We.Inc
PageSpeed Insightsの各数値の意味、フィールドデータとラボデータの違い、LCP・INP・CLS・FCP・TTFBの基準値、スコアの配分、赤い結果を直すコードを解説します。
PageSpeed Insightsには2つのレポートがあります。上のレポートは、過去28日間の実際のChrome訪問者から集めたフィールドデータで、75パーセンタイルで評価されます。下のレポートはLighthouseのラボテストで、0から100のスコアが出ます。90以上は良好、50から89は要改善、50未満は不良です。まずフィールドの指標から改善しましょう。
PageSpeed Insightsが使うフィールド指標の基準値
LCP（Largest Contentful Paint） 2.5秒以下 2.5〜4秒 4秒超 INP（Interaction to Next Paint） 200ms以下 200〜500ms 500ms超 CLS（Cumulative Layout Shift） 0.1以下 0.1〜0.25 0.25超 FCP（First Contentful Paint） 1.8秒以下 1.8〜3秒 3秒超 TTFB（試験運用） 0.8秒以下 0.8〜1.8秒 1.8秒超 多くの人は大きな円形のスコアばかり見ますが、その数値は速度を制限したスマートフォンでの1回の模擬アクセスから算出されたものです。このガイドでは、レポートの2つの部分を分けて説明し、自分の数値を公式の基準値と照らし合わせて評価できるようにします。さらに、赤い指標ごとに、通常その数値を改善する変更を対応づけて紹介します。
pagespeed.web.devでURLを測定し、まずフィールドデータの部分を確認します。データが不足していると表示された場合は、ラボテストの結果しかありません。 下の評価ツールにLCP、INP、CLS、FCP、TTFBの値を入力すると、それぞれがどの区分に入るかがわかります。 最も悪い指標の改善方法セクションを開き、対応するコード変更を適用します。 新しいフィールドデータを待ちます。実ユーザーのレポートは直近28日間を対象にしているため、改善は翌朝ではなく徐々に反映されます。 モバイルのラボテストは、遅いネットワークにつながったミドルレンジのスマートフォンをエミュレートして実行されます。そのため、モバイルのスコアがデスクトップより低いのは普通です。 ラボのスコアは実行のたびに数ポイント変動します。何かが変わったと判断する前に、3回テストして中央の結果を確認しましょう。 ラボテストでは誰もクリックしないため、INPは測定できません。代わりにTotal Blocking Timeが使われるので、TBTが高ければINPも悪い可能性が高いです。 チャットウィジェット、ヒートマップ、広告スクリプトなどのサードパーティタグは、自社のコードより負荷が大きいことがよくあります。アプリを書き直す前に、サードパーティのリクエスト一覧を確認しましょう。 よくある質問
フィールドデータとラボのスコアが大きく違うのはなぜですか？
測っているものが違うからです。フィールドデータは、実際のChromeユーザーが自分の端末とネットワークで28日間に体験した結果です。ラボのスコアは、固定の速度制限をかけた1回の模擬読み込みです。ラボで60点でもフィールドではCore Web Vitalsに合格することもあれば、その逆もあります。
LighthouseのスコアはGoogleの検索順位に影響しますか？
Googleは、Core Web Vitalsを実際のユーザー体験の指標であり、コアランキングシステムが評価する内容と一致するものだと説明しています。検索に関するガイダンスでは、0から100のラボスコアを順位の要素としては挙げていないため、このスコアは問題を見つけるための診断として扱いましょう。
TTFBとは何ですか？良い値はどのくらいですか？
Time to First Byteは、HTMLの最初の1バイトが届くまでブラウザーが待つ時間で、リダイレクト、DNS、接続の確立、サーバーでの処理を含みます。PageSpeed Insightsでは800ms以下を良好としています。最も一般的な改善策は、HTMLをCDNのエッジでキャッシュすることです。
Lighthouseのパフォーマンススコアはどう計算されますか？
Lighthouse 10以降では、5つのラボ指標の加重平均です。Total Blocking Timeが30%、LCPが25%、CLSが25%、FCPが10%、Speed Indexが10%です。各指標はまず曲線に沿って0から100のサブスコアに変換されます。
自分のサイトにフィールドデータがないと表示されるのはなぜですか？
Chrome User Experience Reportは、対象となる訪問が十分にあるページとオリジンのデータしか公開しません。新しいサイトやアクセスの少ないサイトにはデータがないことが多いため、アクセスが増えるまではラボテストと独自のモニタリングに頼りましょう。
レポートは上から順に読む
最初の部分は、実際の訪問者が快適に利用できたかどうかを示します。各指標の75パーセンタイル値が表示され、これは4回の訪問のうち3回が少なくともその速さだったという意味です。目標は、Core Web Vitalsの3指標（LCP、INP、CLS）すべてに合格することです。 2つ目の部分は、Lighthouseの1回分の実行結果です。ラボのトレースには実際に関係するファイル、画像、スクリプトが一覧表示されるので、フィールドの指標が遅い理由は、その診断と改善機会の項目からわかります。 改善前と改善後の例
よくある中小企業のトップページを例にします。全幅のヒーロー写真が遅延読み込みされ、Webフォントには代替の方針がなく、headにマーケティング用のタグが3つあります。この例では、LCP画像のダウンロードがスクリプトの終了後にようやく始まるため、LCPは不良の区分に入ります。 ヒーロー画像からloading=lazyを外し、fetchpriority=highを追加し、写真を表示サイズのAVIFまたはWebPで配信し、タグをページが操作可能になった後に読み込むようにすると、LCPを構成する各要素をそれぞれ改善できます。これらが下のコードで示す変更です。実際の数値はページによって異なります。 各指標がよくつまずく箇所
LCPは4つの要素に分かれます。最初の1バイトまでの時間、リソース読み込みの遅延、リソース読み込みの所要時間、要素描画の遅延です。まず最も大きい要素を見つけ、それを改善しましょう。 INPは、誰かがタップや入力をしたときに実行される長いJavaScriptタスクに関係します。CLSは、最初の描画後にサイズが変わるものから生じます。サイズ指定のない画像、遅れて表示されるバナー、幅の異なるフォントへの切り替えなどです。 ラボスコアの配分
Lighthouse 10以降では5つのラボ指標を組み合わせます。Total Blocking Timeの比重が最も大きいため、重いJavaScriptは何よりもスコアを下げます。
Lighthouseのパフォーマンススコアの配分
Largest Contentful Paint LCP Cumulative Layout Shift CLS First Contentful Paint FCP よくある監査項目とその改善方法
赤い監査項目が示していること
Largest Contentful Paintの画像が遅延読み込みされている ブラウザーがレイアウトを待ってからヒーロー画像を取得する ヒーロー画像からloading=lazyを外し、fetchpriority=highを追加する レンダリングを妨げるリソースを除外する head内のCSSや同期スクリプトが最初の描画を遅らせる 重要なCSSをインライン化し、スクリプトをdeferにする 適切なサイズの画像を使う 画像が表示サイズより大きい srcsetとsizesを使い、表示幅で書き出す 次世代フォーマットで画像を配信する AVIFやWebPなら小さくなるのにJPEGやPNGを使っている 変換してpictureまたは画像CDNで配信する 使用していないJavaScriptを減らす このページにない機能のコードまで配信している ルートごとにバンドルを分割し、不要なライブラリを外す サードパーティコードの影響を減らす タグがメインスレッドをブロックしている タグを操作後またはアイドル時に読み込む 画像要素に明示的なwidthとheightがない 領域が確保されず、コンテンツがずれる widthとheight、またはaspect-ratioを指定する Webフォント読み込み中もテキストが表示されるようにする フォントのダウンロード中にテキストが隠れる font-display: swapを使い、メインのフォントをpreloadする 最初のサーバー応答時間が長い キャッシュされていないHTMLのためTTFBが遅い HTMLをエッジでキャッシュし、リダイレクトを減らす 改善用コード
最初に読み込まれるヒーロー画像
LCP要素になりそうな画像では遅延読み込みをせず、高い取得優先度、次世代フォーマット、実際のサイズを指定して、何もずれないようにします。
テキストを隠さないフォント
ファーストビューで使う1つのフォントファイルをpreloadし、届くまでは代替フォントでテキストを表示させます。
ページが落ち着いてから読み込むサードパーティタグ
ブラウザーがアイドル状態になってからマーケティング用スクリプトを挿入するため、最初の描画や最初のタップと競合しません。
遅れて表示されるコンテンツの領域を確保する
埋め込みや広告枠に固定のアスペクト比を指定すると、読み込まれたときに下のコンテンツがずれません。
表示速度チェックリスト
この順番で確認しましょう
フィールドデータ：LCP、INP、CLSのうち、75パーセンタイルで不合格なのはどれか？ LCP要素：画像か？遅延読み込みされていないか、発見が遅れていないか？ TTFB：HTMLはキャッシュされているか？その前にリダイレクトはないか？ JavaScript：Total Blocking Timeはどのくらいか？原因はどのスクリプトか？ レイアウト：画像、埋め込み、バナーの領域は確保されているか？ フォント：font-displayは設定されているか？メインのファイルはpreloadされているか？ 良好
要改善
不良
数値を評価する
レポートの値を入力すると、それぞれが良好、要改善、不良のどれに当たるかがわかります。
{value}以下で良好
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る