• ログイン今すぐ開始

本書は、お客様のご参考のために原文の英語版を機械翻訳したものです。

英語版と齟齬がある場合、英語版の定めが優先するものとします。より詳しい情報については、本リンクをご参照ください。

問題を作成する

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

ブラウザモニタリングの 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をご覧ください。

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

BrowserInteractionPageView イベントは、 ページのウィンドウロード (またはウィンドウロードとAJAX)のタイミングを受け取ったときに、レポートを終了します。しかし、ペイントやインタラクティビティのメトリクスは、いつでも発生する可能性があります。 PageViewTiming は、これらのメトリクスを別のイベントとして配信しています。

  • このタイミングのばらつきを考慮する。
  • 任意のタイムアウトを設定することは避けてください。
  • BrowserInteractionPageView のイベントを無期限に保持することを防ぎます。

追加データ

コメント

firstPaint and firstContentfulPaint

firstPaintfirstContentfulPaint 属性は、 BrowserInteractionPageView のイベントですでに利用可能です。しかし、これらの属性は、ウィンドウのonloadイベントが発生する前に確実に捕捉されるとは限りません。

PageViewTiming を使用すると、元々のページロード時間の後に発生したものであっても、これらのメトリクスを捕捉することができます。これにより、ロードイベントの応答性とコンテンツのビジュアルレンダリングの相関関係をより深く理解することができます。

最大限のContentfulPaint

largestContentfulPaint ,メトリックは、 エージェントのバージョン1163以上で利用可能です 。これは、ビューポートに表示される最大のコンテンツ要素のレンダリング時間を報告します。

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

また、LCPでは、CLS(cumulative layout shift)のスコア属性も報告しています。この属性は、 cumulativeLayoutShift として報告されます。

Largest Contentful Paint は、Google が Core Web Vitals として特定した 3 つのメトリクスのうちの 1 つです。LCP値が2.5秒までは"「良好」、" 2.5~4.0秒は"「改善が必要」、" 4.0秒以上は"「不良」とされています。"

firstInteraction and firstInputDelay

firstInteractionfirstInputDelay を追加することで、ユーザーがビジュアルコンテンツとどのようにインタラクトしているかを迅速に把握することができます。これらの指標は、ユーザーがいつインタラクションを行ったかだけでなく、どのようなタイプのインタラクション(マウスダウン、ポインターダウンなど)を行ったか、また、サイトからのレスポンスを受け取るまでにどのくらいの時間がかかったかを示します。

firstInputDelay メトリクスは、 FirstContentfulPaint と Time to Interactive (TTI) メトリクスの中間に位置しています。この指標は、最初の入力が可能になってから、ブラウザのメインスレッドがあらゆるインタラクションに応答できるようになるまでの時間を測定します。

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

First Input Delay は、Google が Core Web Vitals として特定した 3 つのメトリクスのうちの 1 つです。FID値が100msまでは、"「良い」、" 100~300msは、"「改善が必要」、" 300ms以上は、"「悪い」とされています。"

より詳しい説明は、 ブラウザモニタリングのリリースノート をご覧ください。

cumulativeLayoutShift

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以上は、"「不良」とみなされます。"

timingName

timingName 属性を使って、 firstPaint, firstContentfulPaint, firstInteraction, largestContentfulPaint, pageHide and windowUnload のような様々なタイプのアクティビティを確認することができます。例えば、 PageViewTiming イベントは、 timingName の値が firstPaint で、 firstPaint の値が .03 であるかもしれません。また、このイベントには、標準の BrowserInteractionPageView イベントに含まれるすべてのデフォルト属性が含まれます。

elementId

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

エレメントサイズ

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

pageHide

pageHide イベントは、 エージェント v1177 以降で利用可能です。 ブラウザがセッションの履歴から別のページを表示する過程で、現在のページを非表示にするときに送信されます。例えば、ユーザーがブラウザの Back ボタンをクリックすると、前のページが表示される前に、現在のページが pageHide イベントを受け取ります。 pageHide イベントのサポート文書とブラウザの互換性については、 MDN Web Docs サイト を参照してください。

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

ウィンドウロード

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

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

windowUnload

windowUnload イベントは、 エージェント v1163 以上で利用可能です 。これは、ドキュメントや子リソースがアンロードされているときに発生します。 windowUnload イベントのサポートドキュメントとブラウザの互換性については、 MDN Web Docs サイト を参照してください。

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

互換性および要件

要件:

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

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

メトリクス

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

cumulativeLayoutShift

firstPaint

firstContentfulPaint

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

最大限のContentfulPaint

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

firstInteraction

firstInputDelay

これらのメトリクスは、 addEventListener ブラウザAPI を必要とします。このAPIは、次のようなすべてのモダンブラウザで利用できます。

  • Apple Safari
  • Google Chrome
  • Microsoft Internet Explorer(IE)バージョン9以上
  • Mozilla Firefox

pageHide

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

ウィンドウロード

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

windowUnload

この指標は現在、デスクトップとモバイルのすべてのブラウザでサポートされています。 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スコアは、そのページの寿命までに発生したすべてのレイアウトの変化の合計を表します。

イベントデータの検索

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

Copyright © 2022 New Relic株式会社。