RUM ビューイベントでは、すべてのページビューのパフォーマンスの広範なメトリクスが収集されます。Datadog では、以下の方法でパフォーマンスメトリクスを分析することをおすすめします。
Google のウェブに関する主な指標は、サイトのユーザーエクスペリエンスを監視するために設計された 3 つのメトリクスのセットです。これらのメトリクスは、負荷パフォーマンス、対話性、視覚的安定性のビューを提供することに重点を置いています。各メトリクスには、優れたユーザーエクスペリエンスにつながる値の範囲に関するガイダンスが付属しています。Datadog では、このメトリクスの 75 パーセンタイルの監視をおすすめしています。
| メトリクス | 焦点 | 説明 | 対象値 |
|---|---|---|---|
| Largest Contentful Paint | ロードパフォーマンス | ビューポート内の最大の DOM オブジェクト (つまり、画面に表示される) がレンダリングされるページ読み込みタイムラインの瞬間。 | 2.5秒以下 |
| First Input Delay | インタラクティブなアクティビティ | ユーザーがページを最初に操作してからブラウザが応答するまでの経過時間。 | 100ms以下 |
| Cumulative Layout Shift | ビジュアルの安定性 | 動的に読み込まれるコンテンツ (サードパーティの広告など) による予期しないページ移動を定量化します。0 はシフトが発生しないことを意味します。 | 0.1以下 |
注:
| 属性 | タイプ | 説明 |
|---|---|---|
view.time_spent |
数値（ns） | 現在のビューに費やした時間。 |
view.largest_contentful_paint |
数値（ns） | ビューポート内の最大の DOM オブジェクト (つまり、画面に表示される) がレンダリングされるページ読み込みタイムラインの瞬間。 |
view.first_input_delay |
数値（ns） | ユーザーがページを最初に操作してからブラウザが応答するまでの経過時間。 |
view.cumulative_layout_shift |
数値 | 動的に読み込まれるコンテンツ (サードパーティの広告など) による予期しないページ移動を定量化します。0 はシフトが発生しないことを意味します。 |
view.loading_time |
数値（ns） | ページの準備が整い、ネットワークリクエストまたは DOM ミューテーションが現在発生していない状態になるまでの時間。詳細。 |
view.first_contentful_paint |
数値（ns） | ブラウザによりテキスト、画像（背景画像を含む）、白以外のキャンバス、または SVG が最初にレンダリングする時間。ブラウザのレンダリングの詳細については、w3c 定義を参照してください。 |
view.dom_interactive |
数値（ns） | パーサーによりメインドキュメントの作業が終了する瞬間。MDN ドキュメントの詳細 |
view.dom_content_loaded |
数値（ns） | 最初の HTML ドキュメントがレンダリング以外のブロッキングスタイルシート、画像、サブフレームの読み込み完了を待たずに完全に読み込まれ解析される際に発生するイベント。MDN ドキュメントの詳細。 |
view.dom_complete |
数値（ns） | ページとすべてのサブリソースの準備が完了。ユーザー側では、ローディングスピナーの回転が停止。MDN ドキュメントの詳細 |
view.load_event |
数値（ns） | ページが完全に読み込まれた際に発生するイベント。通常は追加のアプリケーションロジックのトリガー。MDN ドキュメントの詳細 |
view.error.count |
数値 | このビューについて収集されたすべてのエラーの数。 |
view.long_task.count |
数値 | このビューについて収集されたすべてのロングタスクの数。 |
view.resource.count |
数値 | このビューについて収集されたすべてのリソースの数。 |
view.action.count |
数値 | このビューについて収集されたすべてのアクションの数。 |
シングルページアプリケーション (SPA) の場合、RUM SDK は、loading_type 属性を使用して、initial_load ナビゲーションと route_change ナビゲーションを区別します。ウェブページをクリックすると、ページが完全に更新されずに新しいページが表示される場合、RUM SDK は、loading_type:route_change を使用して新しいビューイベントを開始します。RUM は、履歴 API を使用してページの変更を追跡します。
Datadog は、ページの読み込みに必要な時間を計算する独自のパフォーマンスメトリクス、loading_time を提供します。このメトリクスは、initial_load と route_change の両方のナビゲーションで機能します。
最新のウェブアプリケーションを考慮するために、読み込み時間はネットワークリクエストと DOM のミューテーションを監視します。
Initial Load: 読み込み時間は、次の_どちらか長い方_になります。
navigationStart と loadEventEnd の差。navigationStart と、ページに 100 ミリ秒を超えて初めてアクティビティがないときの差 (進行中のネットワークリクエストまたは DOM ミューテーションとして定義されたアクティビティ)。SPA Route Change: 読み込み時間は、ユーザーのクリックと、ページに 100 ミリ秒を超えて初めてアクティビティがないときの差に等しくなります (進行中のネットワークリクエストまたは DOM ミューテーションとして定義されたアクティビティ)。
RUM SDK は、ハッシュ (#) ナビゲーションに依存するフレームワークを自動的に監視します。SDK は HashChangeEvent を監視し、新しいビューを表示します。現在のビューのコンテキストに影響しない HTML アンカータグからくるイベントは無視されます。
RUM のデフォルトのパフォーマンスタイミングに加えて、アプリケーションで時間がかかっている場所をより柔軟に計測することが可能です。addTiming API を使用すると、パフォーマンスタイミングを簡単に追加できます。たとえば、ヒーロー画像が表示されたときのタイミングを追加します。
<html>
<body>
<img onload="DD_RUM.addTiming('hero_image')" src="/path/to/img.png" />
</body>
</html>
または、ユーザーが初めてスクロールしたとき:
document.addEventListener("scroll", function handler() {
//1度だけトリガーするよう、イベントリスナーを削除
document.removeEventListener("scroll", handler);
DD_RUM.addTiming('first_scroll');
});
タイミングが送信されると、タイミングは @view.custom_timings.<timing_name> (たとえば @view.custom_timings.first_scroll) としてアクセス可能になります。RUM 分析またはダッシュボードでグラフを作成する前に、メジャーを作成する必要があります。
注: シングルページアプリケーションの場合、addTiming API により現在の RUM ビューの開始の相対的なタイミングが発行されます。たとえば、ユーザーがアプリケーションを表示し（初期ロード）、次に別のページを 5 秒間表示して（ルート変更）、8 秒後に addTiming をトリガーした場合、タイミングは 8-5 = 3 秒となります。
