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

firstPaint および firstContentfulPaint

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

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

largestContentfulPaint

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

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

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

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

firstInteraction および firstInputDelay

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

firstInputDelayメトリックは、 FirstContentfulPaintと対話までの時間 (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以上は、"「不良」とみなされます。"

interactionToNextPaint

次のペイント (INP) への相互作用は、 エージェント v1227 以降で使用できます。 INP は、 実行時の応答性 とユーザーが知覚するパフォーマンスを測定するための新しいメトリックです。 ユーザーの操作とページの応答または再描画の間の最大の待機時間を測定します。これは実験的なものですが、 Web Vitals v3 で追加された重要な指標として識別されます。

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

timingName

firstPaint 、 firstContentfulPaint 、 firstInteraction 、 largestContentfulPaint 、 pageHide 、 windowUnloadなど、 timingName属性を使用してさまざまなタイプのアクティビティを確認できます。たとえば、 PageViewTimingイベントには、 firstPaintのtimingNameと.03のfirstPaint値が含まれる場合があります。イベントには、標準の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として報告されます。

cumulativeLayoutShift

• クローム79

  • メトリックは安定しています。メトリックの定義の変更はこのログで報告されます。

• クロム77

  • APIで公開されているメトリクス： Cumulative Layout Shift Layout Instability APIで利用可能。

firstPaint

firstContentfulPaint

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

largestContentfulPaint

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

firstInteraction

firstInputDelay

これらの指標にはaddEventListenerブラウザ APIが必要です。この API は、以下を含む最新のすべてのブラウザーで利用できます。

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

interactionToNextPaint

• Chrome 96 以降

• エッジ 96 以上

  web-vitals API ごとに、サポートは PerformanceEventTiming.interactionIdによって決定されます。

longTask

• Chrome 58 以降

• エッジ 79 以上

  サポートは PerformanceLongTaskTimingによって決定されます。

pageHide

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

windowLoad

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

windowUnload

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