ページのパフォーマンスの監視
Incident Management が一般に使用できるようになりました。 Incident Management が広範に使用できるようになりました。

ページのパフォーマンスの監視

ユーザーがウェブサイトのページを訪問すると、新しい RUM ビューイベント が作成されます。このビューにはページの読み込みおよびパフォーマンスのライブメトリクスが含まれます。パフォーマンスメトリクスは、ページの読み込みが終わると定期的に Datadog へ送信されます。Datadog UI に表示される前の数秒間は空白になることがあります。

パフォーマンスのボトルネックを特定

ページのパフォーマンスを低下させている要因を見つけるには

  1. アプリケーションに RUM ブラウザモニタリングをセットアップして構成します。
  2. RUM Applications ページで、Performance Overview ダッシュボードを開きます。モニター中のページの概要が表示されます。フィルターを使用してパフォーマンスの問題を絞り込み検索し、特定します。
  3. 問題のあるページが見つかったら、概要ダッシュボードからすばやく RUM ビューに移動します。View RUM events をクリックして具体的な問題を RUM Explorer で開き、特定のユーザービューをクリックして確認します。ウォーターフォール形式のサイドパネルには、リソースの読み込み時間などのパフォーマンス詳細が表示されるため、ボトルネックやその他の問題を解決するのに役立ちます。
    パフォーマンス概要ダッシュボードから、パフォーマンス詳細へ移動し問題を特定したビューを表示

ビューのパフォーマンスメトリクス

パフォーマンスメトリクスは、各ビューに対して収集されます。デフォルトで収集(現在のページビュー情報、GeoIP データ、ブラウザ情報など)され、Global Context で拡張された RUM コンテキストと使用すると、このメトリクスで問題が発生している場所を的確に把握できます。

以下のパフォーマンスメトリクスは、調査を開始するための重要な要素となります。

  • Time To First Byte: サーバーのリクエスト処理にかかる時間。サーバーが遅い場合は、APM を使用してサーバー側の遅延原因を理解します。
  • First Contentful Paint: 何かが表示されるまでの時間。RUM ウォーターフォールで、ブロックされているリソースや、ブラウザによるコンテンツのレンダリングを阻止している長時間タスクをチェックします。
  • Loading Time: ページがインタラクティブになるまでの時間。RUM ウォーターフォールで、読み込もうとしているアセットが多すぎるかどうか、レンダリングをブロックしているリソースがあるか、などをチェックします。

すべてのパフォーマンスメトリクス

すべての RUM イベントタイプのデフォルト属性に関する詳細は、収集されるデータをご覧ください。サンプリングまたはグローバルコンテキストに関する情報は、高度なコンフィギュレーションをご覧ください。下記の表には、Datadog 専用のメトリクスと、Navigation Timing API および Paint Timing API から収集されるパフォーマンスメトリクスが示されています。

属性タイプ説明
view.time_spent数値(ns)現在のビューに費やした時間。
view.loading_time数値(ns)ページの準備が整い、ネットワークリクエストまたは DOM ミューテーションが現在発生していない状態になるまでの時間。詳細
view.first_contentful_paint数値(ns)ブラウザによりテキスト、画像(背景画像を含む)、白以外のキャンバス、または SVG が最初にレンダリングする時間。ブラウザのレンダリングの詳細については、w3 定義を参照してください。
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_loadroute_change の両方のナビゲーションで機能します。

読み込み時間はどのように計算されますか?

最新のウェブアプリケーションを考慮するために、読み込み時間はネットワークリクエストと DOM のミューテーションを監視します。

  • Initial Load: 読み込み時間は、次の_どちらか長い方_になります。

    • navigationStartloadEventEnd の差。
    • または、navigationStart と、ページに 100 ミリ秒を超えて初めてアクティビティがないときの差 (進行中のネットワークリクエストまたは DOM ミューテーションとして定義されたアクティビティ)。
  • SPA Route Change: 読み込み時間は、ユーザーのクリックと、ページに 100 ミリ秒を超えて初めてアクティビティがないときの差に等しくなります (進行中のネットワークリクエストまたは DOM ミューテーションとして定義されたアクティビティ)。

Hash SPA ナビゲーション

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 秒となります。

その他の参考資料