ページビュー:ページのパフォーマンスを理解する
ページビュー:ページのパフォーマンスを理解する

ページビュー:ページのパフォーマンスを理解する

New Relic Browserのページビューページではサイトのページのパフォーマンスを深く洞察することができます。並び替えの機能を使うことで、パーセンテージで示したページの読み込み時間とその平均値、またスループットなどの詳細を見ることができます。
また、該当する場合は、多く表示されたウェブページの詳細な情報、タイミングやスループットの詳細、そしてブラウザートレースやセッショントレースへのリンクも取得することができます。
SPA(シングルページ アプリケーション)モニタリングを選択された場合は、ページビューは異なります。SPAのページビューについての関連情報は、New Relic UIでSPAデータを表示するをご覧ください。

サマリー情報を表示する

New Relic BrowserはURLとしてページをリストします。これによって、accounts/*/applications/*といった特定のフロントエンドのページビューを簡単に見極めることができます。

New Relic APMでも監視されているブラウザーアプリでは、ApplicationsController#Showといったバックエンドのトランザクションに関連するページビューを見ることも可能です。


Browser > Browser アプリ > (選択したアプリ) > ページ ビュー:このページは、ページの読み込み時間、スループット、主要なトランザクションやトレースに関する詳細な情報を提供します。
エンドユーザーがどのページを見ているかについての詳細情報を見るには:

  1. New Relic のメニューバーからBrowser > Browser アプリ > (選択したアプリ) >  ページビューを選択します。
  2. 時間枠または並び替えの順番を選択する、またはデフォルト値をつかいます。
  3. 可能な場合は、ビューの種類でページ読み込みのタイミングの情報の表示をチャート(デフォルト)、ヒストグラム、またはパーセンタイルから選びます。
  4. 特定のトランザクションについてのサマリー情報を表示するには、リスト上のトランザクション名にマウスオーバーします。

ページ読み込みのタイミングの詳細を検証する

Browserのページの読み込み時間チャート表示では、ページ読み込みの平均値をセグメントまでブレイクダウンして表示します。このチャートはBrowserのOverviewページBrowsersの詳細ページにも表示されます。


Browser > Browser アプリ> (選択したアプリ) > ページビュー:Browserのページ読み込み時間のチャートでは、エンドユーザー体験(リアルユーザーモンタリング、またはRUMとも呼ばれます)を示すセグメントにブレイクダウンされたページの読み込み時間の平均値を表示します。
ページ読み込みのタイミング処理で表示されるものは以下となります:

  • リクエストキューイング(黒):ウェブサーバーとアプリケーション間のウェイトタイムを示します。数の大きいとアプリケーションサーバーがビジーであることを示します。
  • ウェブアプリケーション(紫):アプリケーションのコード内で使われた時間を示します。
  • ネットワーク(茶):ネットワークのレイテンシー、またはリクエストがインターネットを一周して戻ってくるまでの時間を示します。
  • DOM処理(黄):ブラウザー内でパースまたは変換されたHTMLを示します。これはブラウザーの「DOMContent」イベントで計測されます。
  • ページレンダリング(青):ブラウザー内でHTMLを表示、インラインのJavaScriptの実行、また画像の読み込みを行います。これはブラウザーの読み込みイベントで計測されます。
  • 「追加の」タイミングデータJavaScript APIをお使いの場合は、「追加の」タイミングデータがこのチャートに表示されます。
コピー/ペーストでデプロイされたアプリについては、New Relic Browserはウェブアプリとネットワークタイム内のキュータイムを含みます。

ページビューの詳細を検証する

New Relicの標準のユーザーインターフェースの機能ページの機能を使うことで詳細にドリルダウンすることができます。さらに特定のページビューに関する詳細を見るには、リストから名前を選択してください。個別のページビューを閉じてページビューページに戻るには、X(閉じる)を選択してください。
リストに表示されたそれぞれのページビューは追加のドリルダウン詳細を含む場合があります。例えば:

  • ページ読み込みのパフォーマンス:ページ読み込みのタイミングをブレイクダウンしたデータ、スループット、セッショントレース、またブラウザートレース(取得可能な場合)
  • 以前のパフォーマンス:応答時間、Apdexの比較データ、また最後に選択された時間枠内、先日の分、また先週分のスループットのデータ
  • AJAXコール:エンドポイントに関わる詳細情報を示したリンクと表(エンドポイント、平均応答時間、スループット、または呼び出しの合計ごとに行の並び替えが可能)
  • APMのトランザクション(New Relic APMでも監視されているアプリが対象):呼び出し時間の合計、平均応答時間、呼び出し回数、またNew Relic APMのトランザクションページへのリンクを示した表


Browser > Browser アプリ > 選択したアプリ > ページビュー > (選択されたトランザクション):アプリによっては、個々のトランザクションは追加のドリルダウン詳細へのリンクがある場合があります。これにはページ読み込みのパフォーマンス、以前のパフォーマンス、AJAXコール、そしてAPMのトランザクションが含まれます。

追加のAPM監視アプリのオプションを使う

これらの機能へアクセスできるかどうかはサブスクリプションレベルによって異なります。

New Relic APMでも監視されているブラウザーアプリでは追加機能が使える場合があります。これらの機能を使うためには(利用可能な場合):選択されたトランザクションのAPMトランザクションタブで、リストからAPMトランザクションを選択してください。次に、New Relic APMから次のオプションのいずれかを選択してください。

  • キートランザクションで追跡(新しいキートランザクション作成する
  • キートランザクション既存のトランザクションを表示する
  • トランザクショントレース > (選択されたトレース)表示する

SPA ページビュー

これらの機能へアクセスできるかどうかはサブスクリプションレベルによって異なります。

New Relicではシングルページアプリ(SPA)のモニタリングが可能です。SPAモニタリングを選択された場合は、ページビューのページのユーザーインターフェースが異なります。この機能に関する情報については、New Relic Broser UIでSPAデータを見るをご覧ください。

関連情報

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

  • ページ読み込みのタイミング処理(タイムセグメントや色を含むオーバービュー、アプリサーバーのリクエストとページ読み込みのタイミング、外れ値との差異)
  • リクエストキューイングとフロントエンドの時間をトラッキング(New Relicでの処理時間の計測方法)

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