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

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

このドキュメントは以下のことを説明しています。

  • Webページがどのようにロードされるか
  • リアルユーザーモニタリング(RUM)としても知られるページ読み込みのタイミングをNew Relic Browserがどのように測定するか
このドキュメントは従来の同期ページ読み込みのタイミングを説明したものです。New Relic Browserは非同期ページ読み込みのタイミングも監視できます。

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

以下は通常のWebページ読み込みプロセスを大きな段階で表したものです。


以下の図はこれらの手順を視覚的に表したものです。上記のリストの1〜6の数字項目は以下の図の数字に対応します:
ページ読み込みのタイムラインこの手順はWebページの読み込みに関連しています。New Relic Browserのチャートはそのプロセスの次のセグメントを表示します。
ネットワーク、Webアプリケーション、DOM処理ページレンダリング

  1. ユーザーがブラウザーのハイパーリンクを選択、フォームを送信またはURLをタイプすると、ページ読み込みが開始されます。この段階は、初期リクエストまたはナビゲーション開始とも呼ばれます。ユーザーのアクションによりネットワークを介してリクエストをWebアプリケーションサーバーに送信します。
  2. リクエストがアプリケーションに届き、処理されます。(処理が開始されるまでに少し時間がかかります。リクエストキューまたは他の要素によるためです。)
  3. アプリが処理を完了し、ネットワークを介してHTMLレスポンスをユーザーのブラウザーに返します。この段階はレスポンス開始またはファーストバイトと呼ばれます。
  4. ユーザーのブラウザーがHTMLレスポンスを受け取り、ドキュメントオブジェクトモデルまたはDOMの処理を開始します。
  5. DOMの読み込みが完了します。この時点はDOMの準備完了として知られています。DOMを利用してユーザーのブラウザーはページのレンダリングを開始します。
  6. ユーザーのブラウザーでページのレンダリングが完了し、ウィンドウの読み込みイベントが作動します。(ページが非同期読み込みを利用している場合、ウィンドウ読み込みのイベントが発生した後もいくつかの要素の読み込みが継続する場合もあります。)

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

New Relic Browserは主要なページ読み込みのタイミングセグメントを記録します:ネットワーク、Webアプリケーション時間、DOM処理、ページレンダリング。以下は、ブラウザーのOverviewページのスクリーンショットです。
チャートの色はページ読み込みのタイミングの図の色に対応します。


ブラウザー>概要:読み込み時間チャートはOverviewおよびPage viewsページに表示されます。SPAモニタリングを有効にしていると、このチャートとSPA特有のチャートの両方を利用できます。
以下はブラウザー読み込み時間チャートのセグメントに含まれるアクティビティの説明です。

Webアプリケーション

Webアプリケーション時間はアプリケーションサーバー上で費やす時間です。New Relic APM agentによりページ読み込みのタイミングのブラウザーインストルメンテーションが実行された場合にのみ求められます。

ネットワーク

NetworkレイヤーはHTMLをリクエストし受け取った場合とリダイレクトされた場合にかかる時間です。サーバー上で費やした時間またはアセットが静的である時間は含みません。

ネットワーク時間の測定はリンクを初めてクリックしたところから始まります。ネットワーク時間はDNSへの問い合わせを含み、Webサイト上でリダイレクトされる場合は1つ以上のサイトを参照する時間やTCP(リクエストキューの時間モニタリングを設定していない場合はファイアウォールを含む)、SSL接続時間を含む場合もあります。

すでにリクエストキューの時間のモニタリングを設定していた場合、X-Requestヘッダーの処理後に起こるリクエストキューの時間はネットワーク時間に全く含まれません
リクエストキューの時間のモニタリングをまだしていなかった場合、リクエストキューの時間はすべてネットワーク時間に必ず含まれます

  • Navigation Timing Specification APIを閲覧すると、ネットワーク時間の詳細が表示されます。(古いブラウザーの場合、時間測定は「読み込まれていないイベントの前の部分」から始まります。)
  • コピーまたはペーストによりデプロイされたアプリでは、New Relic BrowserはWebアプリ時間およびキューの時間をNetwork時間に含みます。これは、New Relic Browserが自動インジェクションを使ってアプリケーションの値をBrowser agentに渡すためにサーバーサイドエージェントに依存しているからです。

ブラウザーの観点から見た時にこのバックエンド時間がどのような内訳になるかについてもっと詳しく知りたい人はNew Relic Browserのセッショントレースページを参照してください。セッショントレースはネットワークに関連する取得可能なイベントすべてをレポートしますので、ブラウザーがDNSルックアップやその他のネットワークイベントにおいて何に時間を費やしているかをケースバイケースで閲覧できます。

リクエストキューが設定されていても、フロントエンドのサーバー設定はネットワーク時間に影響します。これはフロントエンドサーバーが実際にリクエストを受け取り、処理するまではキューの時間のヘッダーを追加しないからです。フロントエンドサーバーが接続するために利用するリスナーソケットにリクエストをバックログとして残すことを開始しリクエストが溜まるようにフロントエンドサーバーが設定されている場合、ブラウザーモニタリングでネットワーク時間が増加するのを閲覧できます。キューの時間のヘッダーが原因でこのリスナーソケットでバックログが生じるわけではありません。

DOM処理

DOM処理はHTMLを構文解析してDOMにして、同期スクリプトを取得または実行するのにかかる時間です。このフェーズでブラウザーが画像のダウンロードを開始すると、ページ読み込みのタイミングが画像読み込み時間を記録します。

DOM処理やページレンダリングレイヤーはアセットが静的である(明らかにページの読み込み後に取得されたのではないアセット)ネットワーク時間を含みます。しかし、サーバーまたはコンテンツ配信システム(CDN)が処理を完了した後にページ上のスクリプトが動的に画像タグを挿入し、画像をロードした場合、ページ読み込みのタイミングは画像読み込み時間を記録できません。

ページレンダリング

PageレンダリングフェーズはDOM処理の完了からウィンドウ読み込みイベントの実行までの時間です。このフェーズはページコンテンツのブラウザーサイドの処理を測定し、しばしばスクリプトや静的なアセットが読み込まれる時間を含みます。

リクエストキュー

アカウントがNew Relic BrowserとNew Relic APMの両方にリンクしている場合、リクエストキューは読み込み時間チャートに表示されます。New Relicでは、リクエストキューは生産システムへのリクエストの入力からリクエストがアプリケーションに届くまでの時間を意味します。生産インフラの内容次第では、この時間に入力をリクエストする実際のキューが含まれる場合がある、またはこの時間が時間を食うその他の機能(例えば、負荷分散または内部のネットワーク遅延)を意味する場合もあります。リクエストのエンキューに関してもっと詳しく知りたい人はリクエストキューとフロントエンド設定の追跡を参照してください。New Relic Browserがこれらの時間情報を収集する仕組みはNavigation Timing Specification APIを利用するブラウザーの能力によって違います。ブラウザーエージェントAPIを利用してカスタマイズしたページ読み込みのタイミングイベントを追加できます。SPAモニタリングを有効にしており、SPA読み込みの時間チャートに関する情報が必要な場合はBrowser Overviewページのドキュメンテーションを参考にしてください。

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

同一のアプリケーションでアプリサーバートランザクション数(分またはrpmあたりのリクエスト)はしばしばブラウザートランザクション数(分またはppmあたりのページ表示数)より多くなります。より詳しく知りたい人はアプリサーバーリクエストがブラウザートランザクション数を大きく超えるを参照してください。

外れ値

アプリケーションの性能が非常に高くても、ブラウザーやプラットフォーム、ネットワークが遅いと全体のレスポンス時間が遅くなります。外れ値によるこのような差を最小限に止めるには、アプリケーションのBrowser Apdex T設定の4.5倍以上のエンドユーザーのレスポンスタイムをApdex Tの4.5倍または13.5秒のどちらかで高い方の設定値以下に維持し、測定します。

例えば、アプリケーションのエンドユーザーApdex Tしきい値が8秒である場合、これらのレスポンス時間は36秒以下に維持されます。こうすることで、これらのレスポンス時間がアプリケーション全体に及ぼす影響を最小化しながら「不満」Apdexスコアを計算できます。

例えば、New RelicのSPAモニタリングでは、外れ値は別の方法で処理されています。最初のページ読み込みまたはルート変更が30秒に達すると、そのイベントは無効な値と見なされ放棄されます。

関連情報

追加のドキュメンテーションリソースは次のとおりです。

  • ページ読み込みのタイミングのインストルメンテーション(JavaScript要素とデータ送信)
  • キャッシュページ(New Relic agentのキャッシュページ処理の仕組みおよびキャッシュページがブラウザートレースに影響する仕組み)
  • セッション追跡(アプリケーションセッション計算がページのスループットに関連する仕組み)

New RelicのオンラインテクニカルコミュニティでBrowserモニタリングについて議論しましょう!トラブルシューティングや質問をしたり、JavaScriptエラーレポートAJAXタイミングの詳細を話し合うことができます。