サイトのウェブ バイタルのデータを収集することは、ウェブ バイタルを改善するための最初のステップです。包括的な分析では、実際の環境とラボ環境の両方からパフォーマンス データを収集します。ウェブ バイタルを測定するには、コードの変更を最小限に抑える必要があり、無料のツールを使用して測定できます。
RUM データを使用してウェブに関する指標を測定する
フィールド データとも呼ばれるリアルユーザー モニタリング（RUM）データは、サイトの実際のユーザーが体験したパフォーマンスを把握します。RUM データは、サイトが推奨されるウェブに関する主な指標の基準値を満たしているかどうかを Google が判断するために使用されます。
スタートガイド
RUM を設定していない場合は、次のツールを使用すると、サイトの実際のパフォーマンスに関するデータをすばやく取得できます。これらのツールはすべて同じ基盤となるデータセット（Chrome ユーザー エクスペリエンス レポート）に基づいていますが、ユースケースは若干異なります。
- Chrome DevTools は、パフォーマンス パネルのライブ指標ビューで CrUX データセットと統合されています。ローカル エクスペリエンスを同じページの実際のユーザー エクスペリエンスと比較することで、デバッグに注力すべき箇所について、より多くの情報に基づいて判断できます。サイトのウェブ バイタルの測定と改善を開始するために、単一のアクションを探している場合は、Chrome DevTools の [パフォーマンス] パネルを使用することをおすすめします。
- PageSpeed Insights（PSI）は、過去 28 日間のページレベルとオリジン レベルのパフォーマンスの集計をレポートします。また、パフォーマンスを改善する方法に関する提案も提供します。PSI はウェブと API で利用できます。
- Search Console では、ページ単位でパフォーマンス データがレポートされます。そのため、改善が必要な特定のページを特定するのに適しています。PageSpeed Insights とは異なり、Search Console のレポートには過去のパフォーマンス データが含まれます。Search Console は、所有権が確認済みのサイトでのみ使用できます。
- CrUX Vis は、選択した URL またはオリジン（CrUX データセットで利用可能な場合）の CrUX 履歴データを表示する事前構築済みのダッシュボードです。CrUX History API をベースに構築されており、セットアップ プロセスには 1 分ほどかかります。PageSpeed Insights や Search Console と比較して、CrUX Vis には LCP サブパートやナビゲーション タイプなど、より多くのデータが含まれています。
- CrUX Vis は、選択したオリジンまたは URL の CrUX データを表示する履歴ダッシュボードです。これは CrUX History API 上に構築されています。PageSpeed Insights や Search Console と比較して、CrUX Vis レポートにはより詳細な情報が含まれています。たとえば、CrUX Vis ではナビゲーション タイプや LCP と RTT のデータを利用できます。
前述のツールはウェブ バイタルの測定を「始める」のに適していますが、他のコンテキストでも役立つことに注意してください。特に、CrUX と PSI はどちらも API として利用でき、ダッシュボードやその他のレポートの作成に使用できます。
RUM データを収集する
CrUX ベースのツールはウェブ バイタルのパフォーマンスを調査するうえで優れた出発点となりますが、独自の RUM を補完的に使用することを強くおすすめします。自分で収集した RUM データを使用すると、サイトのパフォーマンスに関するより詳細で迅速なフィードバックを得ることができます。これにより、問題を特定し、考えられる解決策をテストしやすくなります。
専用の RUM プロバイダを使用するか、独自のツールを設定することで、独自の RUM データを収集できます。
専用の RUM プロバイダは、RUM データの収集とレポート作成を専門としています。これらのサービスで Core Web Vitals を使用するには、サイトで Core Web Vitals のモニタリングを有効にする方法について RUM プロバイダにお問い合わせください。
RUM プロバイダがない場合は、web-vitals JavaScript ライブラリを使用して、既存の分析設定を拡張し、これらの指標を収集してレポートできる可能性があります。この方法については、次のセクションで詳しく説明します。
web-vitals JavaScript ライブラリ
ウェブに関する主な指標の独自の RUM 設定を実装する場合、ウェブに関する主な指標の測定値を収集する最も簡単な方法は、web-vitals JavaScript ライブラリを使用することです。web-vitals は、フィールドで測定可能なウェブバイタルの各指標を収集してレポートするための便利な API を提供する、小さなモジュール式ライブラリ（約 2 KB）です。
ウェブに関する主な指標を構成する指標は、ブラウザの組み込みパフォーマンス API によって直接公開されるのではなく、その上に構築されます。たとえば、Cumulative Layout Shift（CLS）は Layout Instability API を使用して実装されます。web-vitals を使用すると、これらの指標を自分で実装する必要がなくなります。また、収集したデータが各指標の方法論とベスト プラクティスに一致することも保証されます。
web-vitals の実装について詳しくは、ドキュメントとフィールドでウェブ バイタルを測定するためのベスト プラクティス ガイドをご覧ください。
データ集約
web-vitals で収集された測定値を報告することが不可欠です。このデータが測定されても報告されない場合、表示されることはありません。web-vitals のドキュメントには、汎用 API エンドポイント、Google アナリティクス、Google タグ マネージャーにデータを送信する方法を示す例が記載されています。
すでに使い慣れたレポートツールがある場合は、そちらの使用をご検討ください。そうでない場合は、Google アナリティクスを無料でこの目的に使用できます。
どのツールを使用するかを検討する際は、誰がデータにアクセスする必要があるかを考慮するとよいでしょう。通常、パフォーマンスの改善に関心があるのが単一の部門ではなく会社全体である場合、企業は最大のパフォーマンス向上を達成できます。さまざまな部門から賛同を得る方法については、ウェブサイトの速度を部門横断的に改善するをご覧ください。
データの解釈
パフォーマンス データを分析する際は、分布の裾に注意することが重要です。RUM データから、パフォーマンスが大きく異なることがわかることがよくあります。一部のユーザーは高速なエクスペリエンスを体験していますが、他のユーザーは低速なエクスペリエンスを体験しています。ただし、中央値を使用してデータを要約すると、この動作が隠蔽される可能性があります。
Core Web Vitals に関して、Google は中央値や平均値などの統計情報ではなく、「良好」なエクスペリエンスの割合を使用して、サイトまたはページが推奨されるしきい値を満たしているかどうかを判断します。具体的には、サイトまたはページがウェブに関する主な指標のしきい値を満たしていると見なされるには、ページアクセスの 75% が各指標の「良好」のしきい値を満たしている必要があります。
ラボデータを使用してウェブに関する指標を測定する
ラボデータ（合成データとも呼ばれます）は、実際のユーザーではなく、管理された環境から収集されます。RUM データとは異なり、ラボデータは本番前環境から収集できるため、デベロッパー ワークフローと継続的インテグレーション プロセスに組み込むことができます。合成データを収集するツールの例としては、Lighthouse や WebPageTest があります。
考慮事項
RUM データとラボデータの間には常に差異が生じます。特に、ラボ環境のネットワーク状況、デバイスの種類、場所がユーザーの環境と大きく異なる場合は、差異が大きくなります。ただし、ウェブバイタル指標に関するラボデータを収集する際には、特に注意すべき点がいくつかあります。
- Largest Contentful Paint（LCP）は、ページ読み込みの遅延（リダイレクト、サーバーへの接続のレイテンシ、キャッシュに保存されていないデータなど）、画面に応じてユーザーに表示されるコンテンツの違い、その他の理由（Cookie バナー、パーソナライズなど）により、ラボ環境で測定された値と RUM データで測定された値が異なる場合があります。
- ラボ環境で測定された累積レイアウト シフト（CLS）は、RUM データで観測された CLS よりも人為的に低くなることがあります。多くのラボツールはページを読み込むだけで、ページを操作しません。そのため、ページの初期読み込み中に発生したレイアウト シフトのみがキャプチャされます。一方、RUM ツールで測定される CLS は、ページのライフサイクル全体で発生する予期しないレイアウト シフトをキャプチャします。
- Interaction to Next Paint（INP）は、ページに対するユーザーの操作が必要なため、ラボ環境で測定できません。そのため、Total Blocking Time（TBT）が INP の推奨されるラボ プロキシとなります。TBT は、「First Contentful Paint から操作可能になるまでの時間の間で、ページがユーザー入力に応答できないほど長くブロックされた合計時間」を測定します。INP と TBT は計算方法が異なりますが、どちらもブートストラップ プロセス中にメインスレッドがブロックされた状態を反映しています。メインスレッドがブロックされると、ブラウザがユーザー操作に応答するのに遅延が生じます。
ツール
これらのツールを使用して、ウェブ バイタルのラボ測定値を収集できます。
- Chrome DevTools は、パフォーマンス パネルのライブ指標ビューで、特定のページのウェブに関する主な指標を測定してレポートします。このビューでは、コードの変更を行う際に、パフォーマンスに関するフィードバックがリアルタイムで提供されます。
- Lighthouse Lighthouse は LCP、CLS、TBT に関するレポートを作成し、パフォーマンスを改善できる可能性のある点もハイライト表示します。Lighthouse は Chrome DevTools で利用できるほか、npm パッケージとしても提供されています。また、Lighthouse CI を使用して継続的インテグレーション ワークフローに組み込むこともできます。
- WebPageTest には、標準レポートの一部として Web Vitals が含まれています。WebPageTest は、特定のデバイスとネットワークの条件下でウェブ バイタルの情報を収集するのに役立ちます。