PageSpeed Insights で Chrome UX レポートデータを表示する方法

PageSpeed Insights(PSI)は、ページのパフォーマンスとその改善方法を把握するためのウェブ デベロッパー向けツールです。Lighthouse を使用してページを監査し、パフォーマンスを改善する機会を特定します。また、Chrome UX レポート(CrUX)とも統合され、実際のユーザーがページをどのように体験しているか、およびサイトの集約元を確認できます。このガイドでは、PSI を使用して CrUX から分析情報を抽出し、ユーザー エクスペリエンスの理解を深める方法について説明します。

PageSpeed Insights の CrUX のフィールド データ

データの読み取り

開始するには、https://pagespeed.web.dev/ にアクセスしてください テストするページの URL を入力して [分析] をクリックします。

PageSpeed Insights の使用を開始するための URL を入力してください

数秒後、Lighthouse が表示されます。 監査が実行され、CrUX(「実際のユーザーの状況を確認する」)と Lighthouse(「パフォーマンスの問題の診断」)から得たデータを含むセクションが表示されます。CrUX は現場から寄せられた実際のユーザー エクスペリエンスのコレクションで、Lighthouse はラボで管理されたテストです。

PageSpeed Insights の CrUX のフィールド データ

実際のユーザー エクスペリエンスのセクションでは、Core Web Vitalsその他の注目すべき指標別に指標がグループ化されます。Core Web Vitals の 3 つの指標が最初に表示されます。Largest Contentful Paint(LCP)、Interaction to Next Paint(INP)、Cumulative Layout Shift です。これらに続いて、First Contentful Paint(FCP)と Time to First Byte(TTFB)というその他の注目すべき指標が続きます。

Core Web Vitals

  • LCP は、ヒーロー画像や見出しなどのメイン コンテンツが表示されるまでの時間を測定します。
  • INP は、ユーザーがページで行ったすべてのインタラクションのレイテンシを測定することで、ページのインタラクティビティを測定し、すべて(またはほぼすべての)のインタラクションが小さかった単一の値を報告します。
  • CLS は、非同期で読み込まれるコンテンツが挿入されるといった変化によって、ページ上でレイアウトが不安定になる度合いを測定します。

その他の重要な指標

  • FCP は、 テキストやロゴなどを背景に表示できます
  • TTFB は、リソースのリクエストからレスポンスの最初のバイトの到着が始まるまでの時間を測定する試験運用版の指標です。

指標のしきい値

次の表は、これらの指標の値が 2 つの指標のそれぞれにどのように分類されるかを示しています。 「良い」、「改善が必要」、「悪い」。

指標 「Good」 「要改善」 「Poor」
LCP 0 ~ 2,500 ミリ秒 2,500 ~ 4,000 ミリ秒 4,000 ミリ秒以上
CLS 0.00 ~ 0.10 0.10 ~ 0.25 0.25 以上
INP 0 ~ 200 ミリ秒 200 ミリ秒~ 500 ミリ秒 500 ミリ秒以上
FCP 0 ~ 1,800 ミリ秒 1,800 ~ 3,000 ミリ秒 3,000 ミリ秒以上
TTFB 0 ~ 800 ミリ秒 800 ミリ秒~ 1,800 ミリ秒 1,800 ミリ秒以上

Core Web Vitals 指標は最も重要な指標であり、実際のユーザーが直接体験できます。その他の指標は診断として使用できますが、実際のユーザーが認識できるとは限りません。そのため、これらの指標は Core Web Vitals の評価には考慮されません。また、「良好」のしきい値を満たしていない場合でも、Core Web Vitals に悪影響を及ぼしている場合にのみ問題となります。

PSI でユーザー エクスペリエンスを表示する方法は 3 つあります。

  • ページが Core Web Vitals に合格したかどうかを示すラベル 評価
  • 秒またはミリ秒で測定されたパーセンタイル(CLS は単位なし)
  • 「良好」、「改善が必要」、「不良」の割合を表す分布このセクションの右上にある [ビューを開く] をクリックすると、リニューアル版を利用できます。

PageSpeed Insights で CrUX データの表示を拡大

上のスクリーンショットでは、ページに「passing(合格)」というラベルが表示されています。Core Web Vitals 認定試験です。合格するには、3 つの Core Web Vitals すべてでパーセンタイル値が「良好」に分類されている必要があります。それ以外の場合、評価は「不合格」と表示されます。一部のページに十分な INP データがない場合、そのページは他の 2 つの Core Web Vitals 指標で評価されます。

すべての指標に表示されるパーセンタイルは、75 パーセンタイルに対応します。統計におけるパーセンタイルは、サンプルの特定のパーセンテージが下回る値を示す尺度です。たとえば、上のスクリーンショットでは、INP の 75 パーセンタイルが 64 ミリ秒であることがわかります。つまり、INP エクスペリエンスの 75% が 64 ミリ秒未満です。これらの値は、前述のしきい値の表に沿って色分けされており、値が緑色で、値が「改善が必要」「Poor」を示します赤色で表示されます。

最後に、各指標の分布を「良好」、「改善が必要」、「不良」の 3 分割で示しています。グループ化しますたとえば、このページの LCP エクスペリエンスは「良好」です。(2.5 秒未満)90% の時間を費やしている。INP は「低い」(500 ミリ秒以上)1% の確率で発生しています。これらの分布はページ上のすべてのユーザー エクスペリエンスを表し、その形状は「良好」または「良好」になる傾向を示します。評価することもあります

配信元のパフォーマンスの概要

PSI には配信元のパフォーマンスの概要も含まれています。オリジンの全ページにわたるユーザー エクスペリエンスの集計です。個々のページで利用できる統計情報は、オリジン全体でも利用できます。このデータは BigQuery で利用可能なデータとほぼ同じですが、ページレベルのパフォーマンスはクエリでは利用できません。

PageSpeed Insights におけるオリジンの CrUX のパフォーマンス

PSI と BigQuery のオリジン レベルのデータには、大きな違いが 1 つあります。BigQuery のデータセットは月に 1 回リリースされ、前月のデータが含まれます。たとえば、202005 のデータセットには、2020 年 5 月に発生したすべてのユーザー エクスペリエンスが含まれています。一方、PSI では、過去 28 日間を対象とする新しいデータが毎日集計されます。そのため、今日表示される結果は明日には異なっていても、BigQuery で当月の集計で表示されるものと必ずしも同じとは限りません。

CrUX で URL データを取得できない場合のレスポンス

入力した URL が CrUX で利用できない場合は、次のスクリーンショットに示すように、PageSpeed Insights はオリジンレベルのデータにフォールバックしようとします。無効になっている [この URL] ボタンの横にあるアイコンをクリックすると、詳しい説明が表示されます。

PageSpeed Insights に URL レベルの CrUX データがないため、オリジン データが表示されています。

CrUX でオリジンレベルのデータも利用できない場合は、PSI でこのセクションを表示できず、「データなし」と表示されます。Lighthouse のラボデータは引き続き利用可能で、ページのパフォーマンスの近似値を確認できます。

PageSpeed Insights に CrUX データがない

よくある質問

PageSpeed Insights の CrUX データに関するよくある質問をいくつかご紹介します。

他のツールではなく PageSpeed Insights はどのような場合に使用するでしょうか?

PSI は、CrUX の実際のユーザー エクスペリエンス データと、Lighthouse のラボベースのパフォーマンス診断を組み合わせています。これにより、ページの表示速度や表示速度を 1 か所で簡単に確認できます。PSI ではフィールド データが日単位で集計されるため、集計頻度の低いツールよりもオリジンや URL のパフォーマンスを詳細にモニタリングできます。

PageSpeed Insights の使用に制限はありますか?

PSI に表示されるのは直近の日次集計のみであるため、必ずしもサイトのパフォーマンスの傾向を把握できるとは限りません。CrUX データセットには、PSI では公開されない重要ではない指標も含まれています。

PageSpeed Insights の詳細はどこで確認できますか?

PSI のドキュメントを確認する をご覧ください。