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