ブラウザモニタリングの PageViewTiming イベント は、各データポイントが利用可能になり次第、個別のイベントとして送信します。タイミングを制限していないので、ファーストペイントやファーストインタラクションのデータを、発生したタイミングに関係なく受け取ることができます。このドキュメントでは、 PageViewTiming とその属性を使って、サイト、コンポーネントのローディング、ユーザーのパフォーマンスメトリクスに関するデータを、ビジュアルと応答性の両方の観点から照会する理由と方法について説明します。
PageViewTimingを使う理由は？
非同期ページや動的ページを使用しているアプリケーションでは、サイトやコンポーネントの読み込みに関する追加情報が必要な場合があります。しかし、ページは様々な方法でコンテンツをロードすることができ、ユーザーはいつそのコンテンツとインタラクトするかをコントロールすることができます。このような理由から、ユーザー中心のパフォーマンス指標は、ブラウザエージェントの標準的なウィンドウのオンロード（ページロード時間）の外側で行われます。
例えば、ユーザーはせっかちになり、コンテンツがウェブページに表示されるとすぐにクリックし始めるかもしれません。あるいは、コンテンツが読み込まれてからしばらくしてからページの利用を始めるかもしれません。
PageViewTiming イベントでは、他のイベントに依存しない、よりリアルタイムな配信メカニズムを提供しています。追加されたメトリクスは、ユーザーがサイトをどのように体験しているかを、視覚的な観点と応答性の観点の両方から理解するのに役立ちます。
GoogleのCore Web Vitalsへの対応
エージェントバージョン1177の時点で ブラウザの監視については、 GoogleのCore Web Vitals を完全にサポートしています。それには、 Pro以上のブラウザエージェント が必要です。
なお、Core Web Vitals を構成するメトリクスは、時間の経過とともに 進化しています。現在のセットは、ユーザーエクスペリエンスの3つの側面（読み込み、双方向性、視覚的安定性）に焦点を当てています。以下の指標とそれぞれのしきい値が含まれています。
Web Vitalsの主な評価基準は、読み込み、インタラクティブ性、視覚的安定性です。
- Largest Contentful Paint (LCP) : 読み込みパフォーマンスを測定します。良好なユーザーエクスペリエンスを提供するために、LCPは ページが最初にロードを開始してから 2.5秒以内に発生する必要があります。
- First Input Delay (FID) : インタラクティブ性を測定します。良いユーザー体験を提供するために、ページのFIDは 100ミリ秒以下であるべきです 。
- Cumulative Layout Shift (CLS) : 視覚的な安定性を測定します。良いユーザーエクスペリエンスを提供するために、ページはCLS 0.1以下を維持する必要があります。.
これらの指標について、ほとんどのユーザーに推奨されるターゲットを達成していることを確認するためには、モバイルデバイスとデスクトップデバイスに分けて、ページロードの 75パーセンタイル を測定するのが良い閾値となります。
もっと詳しく知りたい方は、 Nerd Days talk on perceived performanceをご覧ください。
ビジュアル、インタラクティブ性、応答性の詳細な評価指標
BrowserInteraction と PageView イベントは、 ページのウィンドウロード （またはウィンドウロードとAJAX）のタイミングを受け取ったときに、レポートを終了します。しかし、ペイントやインタラクティビティのメトリクスは、いつでも発生する可能性があります。 PageViewTiming は、これらのメトリクスを別のイベントとして配信しています。
- このタイミングのばらつきを考慮する。
- 任意のタイムアウトを設定することは避けてください。
BrowserInteractionとPageViewのイベントを無期限に保持することを防ぎます。
追加データ | コメント |
|---|---|
|
|
|
Google の調査によると、最大の要素がレンダリングされたタイミングを見ることが、ページのメインコンテンツが読み込まれて有用になったタイミングを測定するより正確な方法であることがわかりました。この指標についての制限や考慮点などの詳細は、 w3c draft をご覧ください。 また、LCPでは、CLS（cumulative layout shift）のスコア属性も報告しています。この属性は、 Largest Contentful Paint は、Google が Core Web Vitals として特定した 3 つのメトリクスのうちの 1 つです。LCP値が2.5秒までは"「良好」、" 2.5～4.0秒は"「改善が必要」、" 4.0秒以上は"「不良」とされています。" |
|
また、ユーザーが最初にインタラクションを行った時点での累積レイアウトシフト（CLS）スコア属性も報告しています。この属性は First Input Delay は、Google が Core Web Vitals として特定した 3 つのメトリクスのうちの 1 つです。FID値が100msまでは、"「良い」、" 100～300msは、"「改善が必要」、" 300ms以上は、"「悪い」とされています。" より詳しい説明は、 ブラウザモニタリングのリリースノート をご覧ください。 |
| Cumulative Layout Shift (CLS) は、 エージェント v1177 以上で利用可能です 。CLSは、 視覚的安定性 を測定するための重要なユーザー中心の指標です。なぜなら、ユーザーが予期せぬレイアウトシフトを経験する頻度を定量化するのに役立つからです。CLSが低いと、ページが 喜ばしい であることを保証するのに役立ちます。これは、Google が Core Web Vitals として特定した 3 つのメトリクスのうちの 1 つです。 Cumulative Layout Shift は、Google が Core Web Vitals として特定した 3 つのメトリクスの 1 つです。CLSのスコアが0.1までは、"「良好」、" 0.1～0.25は、"「改善が必要」、" 0.25以上は、"「不良」とみなされます。" |
|
|
| これは、 |
| これは、 |
|
また、 |
|
また、 |
|
また、 |
互換性および要件
要件：
- Meets installation requirements.
- このイベントの報告には、 ブラウザエージェントのバージョン1153以上 と、 ProまたはPro+SPAエージェント が必要です。
ブラウザエージェントのリリースノート をフォローすると、新しいメトリクスがリリースされたときに知ることができます。
これらのメトリクスは、以下のブラウザのバージョンでサポートされています。サポートされていないブラウザでは、 PageViewTiming イベントは記録されません。
メトリクス | 対応するブラウザのバージョン |
|---|---|
|
|
|
|
|
|
| これらのメトリクスは、
|
| この指標は現在、デスクトップとモバイルのすべてのブラウザでサポートされています。 MDNドキュメントによる互換性マトリックス. |
| この指標は現在、デスクトップとモバイルのすべてのブラウザでサポートされています。 MDNドキュメントによる互換性マトリックス. |
| この指標は現在、デスクトップとモバイルのすべてのブラウザでサポートされています。 MDNドキュメントによる互換性マトリックス. |
累積レイアウトリフト
CLS（Cumulative Layout Shift）とは、ウェブページ上のコンテンツの安定性を測る指標です。詳しい説明は、 web.dev/cls をご覧ください。
CLSはどのようにしてNew Relicに取り込まれるのか
Layout Instability API によって報告されたページレイアウトの変化は、ページのライフタイムを通して集約され、すべての PageViewTiming イベントの属性として報告され、そのイベントが発生したときの CLS 値を表します。
このモデルを使うと、ユーザーはページのさまざまな時点でのCLS値を見ることができます。たとえば、ユーザーが初めてページに触れるまでのCLS値や、ページを非表示にするまでのCLS値などです。
他のCLSソースとの近似性
Lighthouseはページがロードされた時点までのCLS値のみを取得しますので、開発環境やラボ環境では便利です。 windowLoad PageViewTiming イベントを見ることで、Lighthouseの値を概算することができます。
CrUXレポートでは、ページのライフスパンにわたって取得された値を使用しているため、RUM環境での最悪のシフトを分析するのに便利です。 windowUnload PageViewTiming イベントのCLS属性を見ることで、CrUX値を概算することができます。これらの値は、サンプルセットが異なることや、寿命の長いウェブページの値を含める方法が異なるため、まったく同じにはなりません。New Relic のブラウザ監視エージェントは、ページがアンロードされたときに CLS を取得しますが、CrUX はページのライフスパン全体を通してメトリックを収集・更新します。
CLSの集計方法
2021年7月現在、GoogleはCLS値の集計方法を更新しています。ブラウザ監視エージェントのバージョンv12xxでは、 Evolving the CLS metric で説明されている方法を使用しています。
Browser Monitoring Agent v12xx以上。
レイアウトシフトの値はウィンドウに取り込まれます。最初のシフトと最後のシフトの間が5秒以内で、互いに1秒以内に発生したレイアウト・シフトは、同じウィンドウに含まれます。CLSスコアは、レイアウトシフト値の合計が最も大きいウィンドウのレイアウトシフト値の合計を表します。
Browser agent v12xxより前のバージョンです。
CLSスコアは、そのページの寿命までに発生したすべてのレイアウトの変化の合計を表します。
イベントデータの検索
ここでは、イベントデータに対するいくつかのサンプルクエリをご紹介します。