ページロードタイミングのプロセス

このドキュメントは、以下について説明します:

  • Webページの読み込みの仕組み
  • New Relic Browserが、リアルユーザー監視(RUM)とも呼ばれるページ読み込みタイミングを測定する仕組み

これは、従来の同期型ページ読み込みタイミングを解説したものです。New Relic Browserは、非同期型のページ読み込みタイミングも監視できます。

ページ読み込みのプロセス

以下に示すのは、大半のWebページ読み込みにおける主要なステップになります。図表の1~6の数は、その下に続くステップと一致しています。

browser-pageload-timeline.png
ページ読み込みのタイムライン: Webページの読み込みに伴うステップになります。New Relic Browserのチャートは、このプロセスにおける以下のセグメントを表示できます:ネットワークWebアプリケーションDOM処理、そしてページレンダリング
  1. ページ読み込みは、ユーザーがハイパーリンクの選択、フォームの提出、あるいはブラウザへのURL入力を行うと開始します。これを、初期リクエストまたはナビゲーション開始とも言います。ユーザーのアクションは、ネットワークをまたいで、Webアプリケーションサーバーにリクエストを送信します。
  2. リクエストが、アプリケーションに到達して処理されます。(リクエストの処理が開始されるまで、多少の時間がかかる場合があります。この原因として、リクエストキューイングもしくはその他の要因が考えられます。)
  3. アプリケーションが処理を終え、ネットワークをまたいでユーザーのブラウザにHTMLレスポンスを返信します。これを、レスポンススタートもしくは最初の1バイトとも言います。
  4. ユーザーのブラウザがHTMLレスポンスを受け取り、ドキュメントオブジェクトモデル、もしくはDOMの処理を開始します。
  5. DOMの読み込みが終了します。この時点をDOMレディと呼びます。DOMを使用して、ユーザーのブラウザがページレンダリングを開始します。
  6. ユーザーのブラウザでページレンダリングが終了し、Window読み込みイベントが発火されます。(非同期読み込みを使用するページでは、一部の要素がWindow読み込みイベント後も読み込まれ続ける可能性があります。)

New Relic Browserにおけるページ読み込み時間のチャート

New Relic Browserは、Browser Overviewページページビューで主要なページ読み込みタイミングのセグメントをキャプチャーします。SPA監視を有効にしている場合は、このチャートとSPA特有のチャートの双方にアクセスできます。チャートでは、以下の内容が表示されます:

  • ネットワーク
  • Webアプリケーション時間
  • DOM処理
  • ページレンダリング
  • リクエストキューイングなど、その他の該当するセグメント

チャートの色は、ページ読み込みタイミング図表の色と一致します。

Browser読み込み時間チャート
rpm.newrelic.com/browser > (アプリケーションを選択) > Overview:読み込み時間チャートは、概要ページビューに表示されます。

New Relic Browserがこうした時間を収集する方法は、ブラウザがNavigation Timing Specification APIを使用できるかどうかに左右されます。カスタムページ読み込みタイミングのイベントは、BrowserエージェントAPIで追加できます。

以下に示すのは、Browser読み込み時間のチャートセグメントに含まれるアクティビティの詳細です。

Webアプリケーション

Webアプリケーション時間には、アプリケーションサーバー上で費やした時間も含まれます。これは、New Relic APMエージェントが、ページ読み込みタイミングのブラウザ計測を提供した場合にのみ判断できます。

ネットワーク

ネットワーク層には、リダイレクトならびにHTMLのリクエストと受け取りにかかった時間が含まれます。サーバー上あるいは統計的アセットに費やした時間は含まれません。

ネットワークの時間測定は、リンクを初めてクリックした時から始まります。ネットワーク時間には、DNSのほか、 ご利用サイトでリダイレクトがある場合は複数のルックアップ、TCP(リクエストキュー時間監視を設定済みでなければファイアウォールを含む)、そしてSSL接続時間が含まれます。

  • リクエストキューイング監視を設定した場合、ネットワーク時間にはXリクエストヘッダ後に発生するいずれのリクエストキュー時間も含まれません
  • リクエストキューイング監視を設定していない場合、ネットワーク時間にはXリクエストヘッダ後に発生するすべてのリクエストキュー時間が含まれます

Navigation Timing Specification APIは、ネットワーク時間の詳細な内訳を提供します。(古いブラウザの場合、タイマーは「unloadイベント前」に始まります。)

コピー/ペースト手法を用いてデプロイしたアプリケーションの場合、New Relic Browserではネットワーク時間のWebアプリケーションとキュー時間が含まれます。これは、New Relic Browserが自動インジェクションを通じてBrowserエージェントにアプリケーション値を渡すにあたって、サーバーサイドのエージェントに依存していることが原因です。

このバックエンドの時間をブラウザの観点から見て分析した詳細に関しては、セッショントレースページを利用してください。セッショントレースは、入手可能なすべてのネットワーク関連イベントについてレポートするため、ブラウザがDNSルックアップやその他のネットワークイベントにどのように時間を費やしているのか、ケース毎に確認できます。

リクエストキューイングを設定した場合でも、フロントエンドサーバーの設定がネットワーク時間に作用します。これは、フロントエンドサーバーが実際にリクエストを受け入れて処理するまで、キューイング時間ヘッダは追加されないことが原因です。フロントエンドサーバーの何かしらの設定によって、リクエストがバックログに保留され始め、フロントエンドサーバーが接続を受け入れる際に使用するリスナーソケットに列を作るようになった場合、ブラウザ監視におけるネットワーク時間が増加することになります。キューイング時間ヘッダは、絶対にこのリスナーソケットのバックログを説明することはできません。

DOM処理

DOM処理は、HTMLをDOMにパースして、同期スクリプトを検索または実行するまでにかかる時間です。この段階でブラウザが画像ダウンロードを開始した場合、ページ読み込みタイミングは画像の読み込み時間をキャプチャーします。

DOM処理とページレンダリング層には、統計的アセットのネットワーク時間も含まれます(ページ読み込み後に明確に検索されてはいないアセット)。ただし、ページのスクリプトがサーバーまたはコンテンツデリバリーシステム(CDS)の終了後に動的に画像タグを挿入して、画像を読み込んだ場合、ページ読み込みタイミングは画像読み込み時間をキャプチャーできません。

ページレンダリング

ページレンダリング時間は、DOMが完了してからWindow読み込みイベントまでの間を指します。この段階は、ページコンテンツのブラウザサイドの処理を測定し、多くの場合はスクリプトと統計的アセットの読み込み時間を含みます。

リクエストキューイング

リクエストキューイングは、ご利用のアカウントがNew Relic BrowserとNew Relic APMの双方をリンクしている場合に読み込み時間チャートに表示されます。New Relicでは、リクエストキューイングはリクエストが本番環境システムに入ってから、アプリケーションに到達するまでの時間を指します。本番環境インフラの特性次第で、この時間はリクエストが入力する実際のキューを含むか、時間のかかるその他の関数を表す場合があります(負荷バランシングや内部ネットワークレイテンシーなど)。

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

アプリケーションサーバートランザクションの数(1分あたりのリクエストもしくはrpm)は、同一のアプリケーションのブラウザトランザクションの数(1分あたりのページもしくはppm)よりも大きいことがよくあります。詳しくは、トラブルシューティングの手順を参照してください。

外れ値

ご利用のアプリケーションがどれだけ優れたパフォーマンスを示しているとしても、必ず一部の遅いブラウザ、プラットフォーム、そしてネットワークによって総合的な集約レスポンスタイムの表示は遅れます。外れ値による非対称を最小限に留めるため、ページ読み込みタイミングはアプリケーションのBrowser Apdex T設定の4.5倍以上のエンドユーザーレスポンスタイムを固定して、Apdex Tの4.5倍もしくは13.5秒のうちどちらか大きい方に縮小します。(ヒストグラムの外れ値は95%でカットオフされます。)

たとえば、ご利用のアプリケーションのエンドユーザーApdex T閾値が8秒の場合、こうしたレスポンスタイムは36秒で固定されます。これによって、こうしたレスポンスタイムがアプリケーション全体に及ぼす影響を最小限に留めながらも、「挫折した」Apdexスコアを考慮できます。

New RelicのSPA監視では、外れ値の扱いが異なります。初期ページ読み込みまたはルート変更の時間が30分に達すると、このイベントは無効データとして扱われ、破棄されます。

その他のヘルプ

その他のドキュメンテーションには、以下の資料があります。

  • ページ読み込みタイミングの計測 (JavaScript要素、データ送信)
  • キャッシュ済みページ(New Relicエージェントがキャッシュ済みページをどのように扱うのか、またブラウザトレースがキャッシュ済みページによってどのような影響を受けるのか)
  • セッション追跡(アプリケーションのセッションカウントが、そのページスループットとどのように関連しているか)

推奨する詳細情報: