ウェブに関する指標の測定を始める

Katie Hempenius 氏
Katie Hempenius
X

ウェブに関する指標を改善するための最初のステップは、サイトのウェブに関する指標に関するデータを収集することです。包括的な分析により、実環境とラボ環境の両方からパフォーマンス データを収集できます。ウェブに関する指標の測定は、最小限のコード変更のみで済み、無料のツールを使用することで達成できます。

RUM データを使用したウェブに関する指標の測定

Real User Monitoring（RUM）データはフィールド データとも呼ばれ、サイトの実際のユーザーが体験したパフォーマンスをキャプチャします。RUM データは、サイトが推奨される Core Web Vitals のしきい値を満たしているかどうかを判断するために Google が使用するデータです。

はじめに

RUM を設定していない場合は、次のツールを使用することで、サイトの実際のパフォーマンスに関するデータを簡単に入手できます。これらのツールはすべて、同じデータセット（Chrome ユーザー エクスペリエンス レポート）に基づいていますが、ユースケースが若干異なります。

  • PageSpeed Insights（PSI）: PageSpeed Insights には、過去 28 日間のページレベルとオリジン レベルのパフォーマンスの集計が表示されます。また、パフォーマンスを向上させる方法に関する提案も表示されます。サイトのウェブに関する指標の測定と改善を始めるにあたって必要なアクションを 1 つに絞る場合は、PSI を使用してサイトを監査することをおすすめします。PSI は、ウェブまたは API でご利用いただけます。
  • Search Console: Search Console では、パフォーマンス データをページごとにレポートします。改善が必要なページを特定するのに適しています。PageSpeed Insights とは異なり、Search Console のレポートには過去のパフォーマンス データが含まれます。Search Console は、ご自身が所有し、所有権が確認されているサイトでのみ使用できます。
  • CrUX ダッシュボード: CrUX ダッシュボードは、選択したオリジンの CrUX データを表示する事前構築済みのダッシュボードです。これはデータポータル上に構築されており、設定プロセスには 1 分ほどかかります。PageSpeed Insights や Search Console に比べ、CrUX ダッシュボード レポートにはより多くの項目が含まれています。たとえば、データをデバイスや接続タイプごとに分類できます。

上記のツールは、ウェブに関する指標の測定を「始める」には適していますが、他の状況でも役立つ場合があります。特に、CrUX と PSI はどちらも API として利用でき、ダッシュボードの作成などのレポート作成に使用できます。

RUM データの収集

CrUX ベースのツールは、Web Vitals のパフォーマンスを調査するための出発点として適していますが、独自の 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 は小さなモジュール式ライブラリ（最大 1 KB）で、フィールド測定可能な Web Vitals の各指標を収集して報告するための便利な API を提供します。

Web Vitals を構成する指標はすべて、ブラウザに組み込まれたパフォーマンス API によって直接公開されるものではなく、それらの上に構築されます。たとえば、Cumulative Layout Shift（CLS）は Layout Instability API を使用して実装されます。web-vitals を使用すると、これらの指標を自分で実装する必要はありません。また、収集したデータが各指標の手法とベスト プラクティスに適合することを保証します。

web-vitals の実装について詳しくは、こちらのドキュメントと現場でのウェブに関する指標の測定に関するベスト プラクティスのガイドをご覧ください。

データ集約

web-vitals によって収集された測定値を報告することが重要です。このデータが測定されてレポートされていない場合、表示されません。web-vitals のドキュメントには、汎用の API エンドポイント、Google アナリティクス、Google タグ マネージャーにデータを送信する方法の例が記載されています。

お気に入りのレポートツールがすでにある場合は、その使用を検討してください。含まれていない場合は、Google アナリティクスをこの目的に無料でお使いいただけます。

使用するツールを検討する際には、データにアクセスできるユーザーについて考えることをおすすめします。一般的に、企業は 1 つの部門ではなく会社全体がパフォーマンスの向上に関心を持っているときに、パフォーマンスの向上が最大化します。さまざまな部門の賛同を得る方法については、部門横断的にウェブサイトの速度を修正するをご覧ください。

データの解釈

パフォーマンス データを分析する際は、分布のテールに注意を払うことが重要です。RUM データから、多くの場合、パフォーマンスに大きなばらつきがあることがわかっています。ユーザー エクスペリエンスが速いユーザーもいれば、遅いユーザーもいます。ただし、中央値を使用してデータを要約すると、この動作が簡単にマスクされてしまいます。

ウェブに関する指標については、中央値や平均値などの統計ではなく、「良好」なエクスペリエンスの割合を使用して、サイトまたはページが推奨しきい値を満たしているかどうかを判断します。具体的には、サイトまたはページがウェブに関する主な指標のしきい値を満たしていると見なされるには、ページ訪問数の 75% が各指標の「良好」なしきい値を満たしている必要があります。

ラボデータを使用したウェブに関する指標の測定

ラボデータ（合成データとも呼ばれます）は、実際のユーザーではなく、管理された環境から収集されます。RUM データとは異なり、ラボデータは本番前環境から収集できるため、デベロッパーのワークフローや継続的インテグレーション プロセスに取り込むことができます。合成データを収集するツールには、Lighthouse や WebPageTest などがあります。

考慮事項

RUM データとラボデータの間には必ず差異が生じます。特に、ラボ環境のネットワーク状態、デバイスの種類、場所がユーザーのものと大きく異なる場合は、差異が生じます。ただし、特にウェブに関する指標の指標に関するラボデータを収集する場合は、特に注意すべきいくつかの考慮事項があります。

  • Cumulative Layout Shift（CLS）: ラボ環境で測定された Cumulative Layout Shift は、RUM データで観測された CLS よりも人為的に低くなることがあります。CLS は、「ページの存続期間全体に発生するすべての予期しないレイアウト シフトに対する、個々のレイアウト シフト スコアの合計」として定義されます。ただし、ページの有効期間は通常、実際のユーザーが読み込むものか、合成パフォーマンス測定ツールによって読み込まれるものかによって大きく異なります。多くのラボ用ツールはページを読み込むだけで、操作はしません。そのため、最初のページ読み込み時に発生したレイアウト シフトのみがキャプチャされます。一方、RUM ツールで測定した CLS では、ページの存続期間全体を通じて発生する予期しないレイアウト シフトが検出されます。
  • First Input Delay（FID）: First Input Delay は、ユーザーがページで操作を行う必要があるため、ラボ環境では測定できません。そのため、FID として推奨されるラボのプロキシは Total Blocking Time（TBT）となります。TBT は、「First Contentful Paint から操作可能になるまでの時間（その間、ページがユーザー入力に応答できない状態になるまでの時間）」の合計時間を測定します。FID と TBT の計算方法は異なりますが、どちらもブートストラップ プロセス中にブロックされたメインスレッドを反映したものです。メインスレッドがブロックされると、ブラウザのユーザー操作への応答が遅延します。FID は、ユーザーが初めてページを操作しようとしたときに発生する遅延（存在する場合）を測定します。

ツール

次のツールを使用して、ウェブに関する指標のラボ測定値を収集できます。

  • Web Vitals Chrome 拡張機能: Chrome の Web Vitals 拡張機能を使用すると、特定のページに関する Core Web Vitals（LCP、FID、CLS）を測定して報告できます。このツールは、デベロッパーがコードを変更するときに、パフォーマンスのフィードバックをリアルタイムで提供することを目的としています。
  • Lighthouse: Lighthouse では、LCP、CLS、TBT に関するレポートが表示され、パフォーマンス改善の可能性も確認できます。Lighthouse は、Chrome DevTools、Chrome 拡張機能、および npm パッケージで利用できます。また、Lighthouse CI を介して、継続的インテグレーション ワークフローに Lighthouse を組み込むこともできます。
  • WebPageTest: WebPageTest には、標準レポートの一部としてウェブに関する指標が含まれています。WebPageTest は、特定のデバイスやネットワーク条件における Web Vitals の情報を収集するのに役立ちます。