ページ読み込みタイミング処理

ここでは以下のことを説明しています。

  • ウェブのページ読み込みがどのように行われるのか
  • New Relic Browser がページ読み込みタイミング(リアルユーザー監視 (RUM) とも呼ばれる)をどのように測定するのか
ここでは、従来の同期でのページ読み込みタイミングについて説明しています。また、New Relic Browser は、非同期のページの読み込みタイミングも監視することもできます。

ページ読み込みタイミングのプロセス

ここでは、一般的なウェブのページ読み込みで行われているメインのステップを紹介します。図中の数字の1から6は、以下のステップの番号に対応しています。

browser-pageload-timeline.png
ページ読み込みのタイムライン: ページの読み込みに含まれる手順。New Relic Browser のチャートには、Network (ネットワーク), Web application (Web アプリ)DOM processing (DOM 処理)Page rendering (ページ描画) といった区分けが表示されます。
  1. ユーザーがハイパーリンクを選択したり、フォームを送信したり、ブラウザに URL を入力すると、ページ読み込みが開始されます。これは、初期リクエストナビゲーション開始と呼ばれます。ユーザーのアクションによって、ネットワークを介してウェブアプリケーションサーバーにリクエストが送信されます。
  2. アプリケーションはリクエストを受信します。リクエストが処理されるまでに時間がかかることがあります。その場合、リクエストの処理待ちだったり、それ以外の要因が原因の可能性があります。
  3. アプリの処理が終了し、ネットワークを介してユーザーのブラウザに HTML レスポンスを返します。これは、レスポンス開始ファーストバイトと呼ばれます。
  4. ユーザーのブラウザは HTML レスポンスを受信し、ドキュメント・オブジェクト・モデル (DOM)の処理を開始します。
  5. DOM の読み込みが完了した状態です。このタイミングは、DOM ready として知られています。DOM を使って、ブラウザはページ描画を開始します。
  6. ページ描画が終了すると、window load イベントが発生します。非同期読み込みを使っているページでは、window load イベントが発生した後でも読み込みを続ける要素があることがあります。

New Relic Browser のページ読み込み時間チャート

New Relic Browser は、Browser Overview ページPage views ページに表示されるページ読み込みタイミングの主要なパートのデータを収集します。SPA 監視機能を有効にすると、このチャートと SPA 固有のチャートの両方にアクセスできるようになります。チャートには以下の情報が表示されます。

  • Network (ネットワーク)
  • Web application time (ウェブアプリの処理時間)
  • DOM processing (DOM 処理)
  • Page rendering (ページ描画)
  • リクエストの処理待ちなどの処理。

以下のグラフ内の色は、ページ読み込みタイミングチャートの色と同じ意味を持ちます。一致します。

Browser load time chart
rpm.newrelic.com/browser > (選択したアプリ) > Overview: 読み込み時間チャートは、Overview ページと Page views ページに表示されます。

New Relic Browser が上記の時間データを収集する方法として、ナビゲーションタイミング APIを利用しています。そのためその実装は、ブラウザによって異なる可能性があります。Browser エージェント APIを使って、カスタムのページ読み込みタイミングイベントを追加することもできます。

Browser の読み込み時間チャートの各区分けに含まれる内容は以下の通りです。

ウェブアプリケーション
アプリケーション・サーバーの時間は、サーバーの処理時間です。New Relic APM エージェントによって、ページ読み込みタイミング計測用のコードが埋め込まれた場合のみ、この項目は存在します。
ネットワーク
ネットワーク層は、リダイレクトと HTML のリクエストと受信にかかる時間を含んでいます。静的なアセットにやサーバーに関する処理時間は含まれません。

ネットワーク時間の計測は、リンクを最初にクリックしたときが開始時点です。ネットワーク時間には、DNS が含まれているため、サイトでリダイレクトしている場合、1 回以上のルックアップ処理が含まれる場合があります。また、リクエストの処理待ち時間の監視を設定していない場合、ファイアーウォールを含む) TCP そして SSL 接続時間 も含みます。

  • リクエスト処理待ち時間の監視を設定済みの場合は、X-Request ヘッダー後に発生するリクエスト処理待ち時間は、ネットワーク時間には、含まれません
  • リクエスト処理待ち時間の監視を設定していない場合は、ネットワーク時間には、すべてのリクエスト処理待ち時間が含まれます

Navigation Timing API は、ネットワーク時間に関する詳細な内訳のデータを提供しています (古いブラウザでは、タイマーは、「アンロードイベント前」に開始します。)

コピー&ペーストの方法で、New Relic Browser をデプロイしたアプリでは、New Relic Browser は、ネットワーク時間には、ウェブアプリと処理待ち時間を含みます。なぜなら、New Relic Browser は、サーバーサイドのエージェントによって、自動埋め込みされるブラウザのエージェントへアプリケーションの値を渡すからです。

「バックエンド」の処理の時間がどのような打ち合わけになるのか、ブラウザの視点から詳細を見るには、Session トレースページを使ってください。セッショントレースは、利用可能なイベントに関する全ネットワークについてのレポートです。DNS ルックアップや他のネットワークイベントに掛かった時間をケースバイケースで見ることができます。

リクエストキューが設定されていても、ネットワーク時間は、フロントエンドサーバーの準備の影響を受けます。フロントエンドサーバーが、実際にリクエストを受信してから、処理するまで、キューイング時間ヘッダーを追加しないためです。フロントエンドのサーバーが、すぐに処理できないリクエストを未処理分として受け付け始めると、ネットワーク時間に処理開始までの待ち時間も含まれることになります。キューイング時間ヘッダーは、このリスナー・ソケット内の未処理分を考慮することはできません。
DOM 処理
DOM 処理は、HTML を解析し、DOM を構築し、同期スクリプトを取得し、実行するのに掛かった時間です。ブラウザがこのフェーズでイメージのダウンロードを開始した場合、ページ読み込みタイミングは、画像読み込み時間をキャプチャします。

DOM 処理やページのレンダリング層では、静的なアセット(ページ読み込み後、明示的に取得しないアセット)をネットワーク時間に含めます。しかし、サーバーや CDN の処理終了後に、ページ内のスクリプトがイメージタグの挿入やイメージの読み込みを直接行った場合、ページ読み込みタイミングは、イメージ読み込み時間をキャプチャできません。

ページ描画
ページ描画では、DOM の構築が完了してから、Window のロードイベントが開始されるまでの時間です。ページ内容のブラウザサイドの処理を計測します。これは、スクリプトや静的なアセットの読み込み時間も含まれます。
リクエスト処理待ち
New Relic Browser と New Relic APM の両方を利用している場合、リクエストの処理待ちは、表示されます。New Relic におけるリクエストの処理待ちとは、本番システムがリクエストを受信したタイミングとアプリケーションで処理を開始する間の時間を指します。本番インフラの構成等によって、この時間は、リクエストが追加される実際のキューでの待ち時間が含まれている場合もあれば、ロードバランサーや内部のネットワーク遅延などの他の時間がかかる処理を表しいてる場合もあります。

アプリサーバーのリクエスト 対 ブラウザのトランザクション

同じアプリであっても、アプリサーバーのトランザクション数(1分あたりのリクエスト数(rpm)) は、ブラウザのトランザクション数(1分あたりのページ数(ppm)よりも多くなることがあります。これについての詳しい説明は、アプリサーバーのリクエストが、ブラウザのトランザクションを大幅に上回ることについてをご覧ください。

外れ値

どんなに良いパフォーマンスを示していたとしても、遅いブラウザや遅いプラットフォーム、遅いネットワークの存在のため、全体のレスポンスタイムが遅いとみなされる場合があります。外れ値が引き起こす歪みを最小限に抑えるに、ページ読み込みタイミングでは、Browser の Apdex T の設定値の 4.5倍よりも大きいエンドユーザーのレスポンスタイプは、Apdex T の 4.5倍 もしくは 13.5秒のいずれか大きい方に制限して、スケーリングします。

例えば、エンドユーザー用の Apdex T の閾値を 8 秒に設定している場合は、レスポンスタイムは、最大で(Apdex T の4.5倍の) 36 秒に制限されます。これにより、外れ値による全体のレスポンスタイムへの影響を最小限に抑えつつ、正確な「不満」な Apdex スコアを維持しています。

New Relic の SPA 監視機能を使っている場合、外れ値の処理方法が異なります。初期ページ読み込みやルート変更の処理時間が 30分 を超えると、そのイベントは無効なデータとみなされ、破棄されます。

関連情報

関連する情報は以下のとおりです。