• EnglishEspañol日本語한국어Português
  • ログイン今すぐ開始

この機械翻訳は参考用に提供されます。

英語版と翻訳版に矛盾がある場合は、英語版が優先されます。詳細については、 を参照してください。

問題を作成する

PageViewTimingです。非同期または動的なページの詳細

ブラウザ モニタリングのPageViewTimingイベントは、各データ ポイントが利用可能になるとすぐに個別のイベントとして送信します。タイミングを制限していないため、発火のタイミングに関係なく、最初のペイントまたは最初のインタラクション データを受け取ることができます。このドキュメントでは、 PageViewTimingとその属性を使用してサイト、コンポーネントの読み込み、およびユーザー パフォーマンス メトリックに関するデータを照会する理由と方法について、ビジュアルと応答性の両方の観点から説明します。

PageViewTimingを使う理由は?

非同期ページや動的ページを使用しているアプリケーションでは、サイトやコンポーネントの読み込みに関する追加情報が必要な場合があります。しかし、ページは様々な方法でコンテンツをロードすることができ、ユーザーはいつそのコンテンツとインタラクトするかをコントロールすることができます。このような理由から、ユーザー中心のパフォーマンス指標は、ブラウザエージェントの標準的なウィンドウのオンロード(ページロード時間)の外側で行われます。

例えば、ユーザーはせっかちになり、コンテンツがウェブページに表示されるとすぐにクリックし始めるかもしれません。あるいは、コンテンツが読み込まれてからしばらくしてからページの利用を始めるかもしれません。

PageViewTimingイベントは、他のイベントに依存しない、よりリアルタイムの配信メカニズムを提供します。追加のメトリックは、視覚的および応答性の両方の観点から、ユーザーがサイトをどのように体験するかを理解するのに役立ちます。

GoogleのCore Web Vitalsへの対応

ブラウザ監視用のエージェント バージョン 1177の時点で、 Google の Core Web Vitalsを完全にサポートしています。この機能は、エージェントのすべてのフレーバー (Lite、Pro、または Pro+SPA) で使用できます。

なお、Core Web Vitals を構成するメトリクスは、時間の経過とともに 進化しています。現在のセットは、ユーザーエクスペリエンスの3つの側面(読み込み、双方向性、視覚的安定性)に焦点を当てています。以下の指標とそれぞれのしきい値が含まれています。

Web Vitalsの主な評価基準は、読み込み、インタラクティブ性、視覚的安定性です。

  • Largest contentful paint (LCP)

    : 読み込みパフォーマンスを測定します。 良好なユーザー エクスペリエンスを提供するには、ページの最初の読み込み開始時に LCP が

    within 2.5 seconds

    発生する必要があります。

  • Interaction to next paint (INP)

    :全ユーザーインタラクションのレイテンシをページごとに計測します。 優れたユーザー エクスペリエンスを提供するには、ページの INP が

    less than 200 milliseconds

    である必要があります。

  • Cumulative layout shift (CLS)

    : 視覚的な安定性を測定します。 優れたユーザー エクスペリエンスを提供するには、ページは

    less than 0.1

    の CLS を維持する必要があります。

これらの各メトリクスについて、ほとんどのユーザーに対して推奨ターゲットに達していることを確認するには、モバイル デバイスとデスクトップ デバイス間でセグメント化されたページ読み込みの75th percentileを測定するのが適切な閾値です。

もっと詳しく知りたい方は、 Nerd Days talk on perceived performanceをご覧ください。

ビジュアル、インタラクティブ性、応答性の詳細な評価指標

BrowserInteractionイベントとPageViewイベントは、ページ ウィンドウの読み込み(またはウィンドウの読み込みと AJAX) のタイミングを受け取ると、レポートを終了します。ただし、ペイントとインタラクティブ メトリックはいつでも発生する可能性があります。PageViewTimingは、これらの指標を個別のイベントとして次の目的に配信します。

  • このタイミングのばらつきを考慮する。
  • 任意のタイムアウトを設定することは避けてください。
  • BrowserInteractionおよびPageViewイベントを無期限に保持しないようにします。

追加データ

コメントコメント

firstPaint および firstContentfulPaint

firstPaint 属性と firstContentfulPaint 属性は、 BrowserInteraction イベントと PageView イベントですでに使用可能です。ただし、ウィンドウの onload イベントが発生する前に、常に確実にキャプチャされるとは限りません。

PageViewTimingを使用すると、元のページの読み込み時間後に発生した場合でも、これらの指標を取得できます。これにより、その読み込みイベントの応答性とコンテンツの視覚的なレンダリングとの相関関係をよりよく理解できます。

largestContentfulPaint

largestContentfulPaint指標は、 エージェント バージョン 1163 以降で使用できます。ビューポートに表示される最大のコンテンツ要素のレンダリング時間を報告します。

Google の調査によると、最大の要素がレンダリングされたタイミングを見ることが、ページのメインコンテンツが読み込まれて有用になったタイミングを測定するより正確な方法であることがわかりました。この指標についての制限や考慮点などの詳細は、 w3c draft をご覧ください。

また、LCP を使用した累積レイアウト シフト (CLS) スコア属性も報告します。この属性はcumulativeLayoutShiftとして報告されます。

最もコンテンツの多いペイントは、Google によってコアウェブバイタルとして特定された 3 つのメトリクスのうちの 1 つです。 2.5 秒までの LCP 値は「良好」とみなされ、2.5 ~ 4.0 秒の間は「改善が必要」とみなされ、4.0 秒を超えると「不良」とみなされます。

firstInteraction および interactionToNextPaint

firstInteractioninteractionToNextPaintを追加すると、ユーザーがそのビジュアル コンテンツをどのように操作しているかをすぐに判断できます。 これらのメトリクスは、ユーザーがいつインタラクションを行ったかだけでなく、どのようなタイプのインタラクション (マウスダウン、ポインターダウンなど) や、サイトから応答を受け取るまでにどれくらいの時間がかかったかを示します。

interactionToNextPaintメトリックは、 FirstContentfulPaintと対話までの時間 (TTI) メトリックの中間にあります。最初の入力が可能になってから、ブラウザーのメイン スレッドが対話に応答できるようになるまでの時間を測定します。

また、ユーザーの最初のインタラクションの時点での累積レイアウト シフト (CLS) スコア属性も報告します。この属性は次のように報告されます。 cumulativeLayoutShift.

INP は、Google によってコアウェブバイタルとして特定された 3 つのメトリクスのうちの 1 つです。 200 ミリ秒以下の INP スコアは「良好」とみなされ、200 ~ 500 ミリ秒の場合は「改善が必要」とみなされ、500 ミリ秒を超えると「不良」とみなされます。

cumulativeLayoutShift

累積レイアウト シフト (CLS) は、 エージェント v1177 以降で使用できます。 CLS は、ユーザー エクスペリエンスの予期しないレイアウトの変化の頻度を定量化するのに役立つため、視覚的な安定性を測定するための重要なユーザー中心のメトリクスです。 CLS が低いと、ページが魅力的であることが保証されます。 これは、Google によってコアウェブバイタルとして特定された 3 つのメトリクスのうちの 1 つです。

累積レイアウト シフトは、Google によってコアウェブバイタルとして特定された 3 つのメトリクスのうちの 1 つです。 CLS スコアが 0.1 までは「良好」とみなされ、0.1 ~ 0.25 は「改善が必要」とみなされ、0.25 を超えると「不良」とみなされます。

interactionToNextPaint

次のペイント (INP) へのインタラクションは、 エージェント v1227 以降で利用できます。 INP は、実行時の応答性とユーザーが知覚するパフォーマンスを測定するための新しいメトリクスです。 ユーザーインタラクションからページの応答または再描画までの最大レイテンシを測定します。 これは実験的ですが、 Web Vitals v3 で追加された重要なメトリクスです。

200 ミリ秒までの INP スコアは「良好」と見なされ、200 ~ 500 ミリ秒の間は「改善が必要」と見なされ、500 ミリ秒を超えると「不良」と見なされます。

timingName

firstPaintfirstContentfulPaintfirstInteractionlargestContentfulPaintpageHidewindowUnloadなど、 timingName属性を使用してさまざまなタイプのアクティビティを確認できます。たとえば、 PageViewTimingイベントには、 firstPainttimingName.03firstPaint値が含まれる場合があります。イベントには、標準のBrowserInteractionおよびPageViewイベントに含まれるすべてのデフォルト属性も含まれます。

elementId

これは、指定されている場合、 largestContentfulPaint要素のIdです。この値は、LCP メトリックでのみ報告されます。この値はnullです。

elementSize

これは、 largestContentfulPaint要素の報告されたサイズです。この値は、LCP メトリックでのみ報告されます。

longTask

エージェント v1227から、長いタスクのレポートが利用可能になりました。 このイベントは、メイン UI スレッドを 50 ミリ秒以上ブロックするタスクを報告する実験的な PerformanceLongTaskTiming APIによって観測されたエントリごとに表されます。

注: このイベントは実験的な機能として利用できますが、そのデータは自動的に収集されません。initオブジェクトのフラグを使用して、ブラウザ エージェントの構成で有効にする必要があります。init: { page_view_timing: { long_task: true } } .

ユーザー入力や対話の処理の遅延を防ぐために、これらのタスク を分割して最適化する ことをお勧めします。 長いタスクは、 interactionToNextPaintメトリックに影響を与えるか、密接に関連している可能性があります。API は現在、これらのタスクの原因に関する詳細なコンテキストを提供しておらず、複数の異なる機能で構成されている場合でも、ブラウジング フレーム内のすべての長いタスクをまとめて照合することに注意してください。

pageHide

エージェント v1177 以降で使用可能なpageHideイベントは、ドキュメントがユーザーに対して非表示になったときに送信されます。現代の慣行では、これはユーザー セッションの潜在的な終了を最も確実に通知します。このイベントは、発生した場合は常にwindowUnloadを伴いますが、ユーザーがタブを切り替えたときに個別に発生することもあります。その場合、アンロードは起動されません。

また、累積レイアウト シフト (CLS) スコア属性をpageHideで報告します。この属性は次のように報告されます。 cumulativeLayoutShift.

windowLoad

windowLoadイベントは、 エージェント v1177 以降で使用できます。これは、スタイルシートや画像などのすべての依存リソースを含め、ページ全体が読み込まれたときに発生します。windowLoadイベントのサポート ドキュメントとブラウザの互換性については、 MDN Web Docs サイトを参照してください。

また、累積レイアウト シフト (CLS) スコア属性をwindowLoadで報告します。この属性は次のように報告されます。 cumulativeLayoutShift.

windowUnload

エージェント v1163 以降で使用可能なwindowUnloadイベントは、ページのアンロードが検出されたときに送信されます。現代の慣例では、これはウィンドウの pagehide イベントの発生に基づいており、ユーザーが別の場所に移動していることを意味します。

また、累積レイアウト シフト (CLS) スコア属性をwindowUnloadで報告します。この属性はcumulativeLayoutShiftとして報告されます。

互換性と要件

要件:

ブラウザエージェントのリリースノート をフォローすると、新しいメトリクスがリリースされたときに知ることができます。

これらのメトリックは、次のブラウザー バージョンでサポートされています。サポートされていないブラウザの場合、 PageViewTimingイベントは記録されません。

指標

対応するブラウザのバージョン

cumulativeLayoutShift

firstPaint

firstContentfulPaint

  • デスクトップおよびモバイルのChrome 60以上(AndroidウェブビューおよびChrome for Android)
  • デスクトップ用Opera 47以上
  • Opera 44以上(Androidモバイル用
  • サムスンの携帯電話向けインターネット

largestContentfulPaint

  • デスクトップおよびモバイルのChrome 77以上

interactionToNextPaint

longTask

pageHide

このイベントは現在、14.1 (デスクトップ) または 14.5 (iOS) 未満の Safari を除く、ほとんどの最新のブラウザー バージョンでサポートされています。MDN ドキュメントによる互換性マトリックス

windowLoad

このイベントは現在、デスクトップとモバイルのすべてのブラウザーでサポートされています。MDN ドキュメントによる互換性マトリックス

windowUnload

このイベントは現在、デスクトップとモバイルのすべてのブラウザーでサポートされています。MDN ドキュメントによる互換性マトリックス

累積レイアウトリフト

累積レイアウト シフト (CLS) は、Web ページ上のコンテンツの安定性を測定するメトリクスです。 詳しい説明については、 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 値を概算できます。これらの値は、サンプル セットが異なり、長期間有効な Web ページの値がどのように含まれているかが異なるため、まったく同じではありません。New Relic ブラウザー監視エージェントは、ページのアンロード時に CLS をキャプチャし、CrUX はページの存続期間全体にわたってメトリックを収集および更新します。

CLSの集計方法

2021年7月現在、GoogleはCLS値の集計方法を更新しています。ブラウザ監視エージェントのバージョンv12xxでは、 Evolving the CLS metric で説明されている方法を使用しています。

Browser monitoring agent v12xx or higher:

レイアウトシフトの値はウィンドウに取り込まれます。最初のシフトと最後のシフトの間が5秒以内で、互いに1秒以内に発生したレイアウト・シフトは、同じウィンドウに含まれます。CLSスコアは、レイアウトシフト値の合計が最も大きいウィンドウのレイアウトシフト値の合計を表します。

Prior to Browser agent v12xx:

CLSスコアは、そのページの寿命までに発生したすべてのレイアウトの変化の合計を表します。

イベントデータの検索

ここでは、イベントデータに対するいくつかのサンプルクエリをご紹介します。

Copyright © 2024 New Relic株式会社。

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.