Browser Overview ページ:ウェブサイトのパフォーマンスサマリー
Browser Overview ページ:ウェブサイトのパフォーマンスサマリー

Browser Overview ページ:ウェブサイトのパフォーマンスサマリー

アプリのリアルユーザーのブラウザーパフォーマンスの情報はNew Relic BrowserOverview ページにまとめて表示されます。Overveiwページで可能なことは次のとおりです:

  • アプリのブラウザー側のパフォーマンスの傾向を表示
  • ページ読み込みタイミングの問題を素早くトラブルシュート
  • 他のBrowser UIのページにナビゲート
New Relic Browserの導入、有効化や設定の方法、またユーザーインターフェースを最大限に活用するためのビデオライブラリーについては、learn.newrelic.comをご覧ください。

Overviewページを見る

New Relic Browserの Overviewを見るには:

  1. rpm.newrelic.com/browserにアクセスして、インデックスにあるアプリを選択してください。
  2. そのアプリのOverviewページに移動します。


Browser > (選択されたアプリ) > OverviewNew Relic Browserのアプリインデックスからアプリケーションを選択すると、Overviewページにブラウザーパフォーマンスのサマリーが表示されます。

Overviewページに表示される項目は:

  • 読み込み時間のチャート
  • Apdexスコアのチャート
  • スループットのチャート
  • Browser Proでは: JavaScriptエラーAJAXの応答時間、そしてブラウザーのセッショントレース

読み込み時間のチャート

読み込み時間は、Overviewページの中心となるチャートです。ここでは、ユーザーが使っているブラウザーの読み込み時間、またチャートの右上隅に表示されている選択期間内の平均値を表示します。より詳細なチャートはPage views ページに表示されます。
読み込み時間のチャートは下記に示すセグメントに分けられます:

ウェブアプリケーション アプリのコードで使われた時間
ネットワーク リクエストがインターネット内で一周するのにかかった時間(ネットワークレイテンシー)
コピー/ペーストを使ってデプロイされたアプリについては、ネットワークの計測はウェブアプリケーションの時間を含みます。
リクエストキューイング 生産環境およびそれを処理するアプリケーションを組み込みに関わるリクエスト間でかかった時間
DOM処理 ページのHTMLのパース、解釈、実行にかかった時間
これはブラウザーのDOMContentイベントによって計測されます。
ページレンダリング ブラウザーがHTMLの表示やインラインのJavaScriptの実行、また画像の読み込みにかかった時間
これはブラウザーの読み込みイベントによって計測されます。


これらのセグメントがどのように定義されているかの詳細は、ページ読み込みタイミングの処理をご覧ください。

SPAモニタリングを有効にしている場合は、読み込み時間のチャートはデフォルトではSPAデータを表示します。標準のチャート表示に戻るには、チャート名の横にあるドロップダウンメニューからPage viewの読み込み時間を選択してください。

SPAのチャートは下記のセグメントに分けられます:

初回のページ読み込み 元来のURLの読み込み/再読み込みによる変更の語幹処理
ルート変更 URLの再読み込みを必要としない表示の変更または更新
カスタム Browser APIを用いて作成されたカスタムイベント

SPAに関する用語について、またSPAの読み込みタイミングの処理がどのように異なるかの詳細ついては、SPAデータを理解するをご覧ください。
また、読み込み時間のチャートには次の機能もあります:

目的 手段
デプロイメントや停止状態の検索、Apdexの設定変更を行う チャート内の縦線は、注目すべきイベントや変更を示します:

  • 黒縦線:Apdexの設定変更
  • 青縦線:デプロイメント
  • 赤縦線または範囲:停止状態

詳細を表示するには、縦線にマウスオーバーしてください。

チャートのデータ形式を変更する ブラウザーの読み込み時間チャート表示の設定
ヒストグラムとパーセンテージの表示を切り替えるには、チャート名のドロップダウンか設定可能なオプションを選択してください。チャートの設定の詳細については、チャートの表示を選択するをご覧ください。
過去のデータと比較する 昨日、先週のデータと比較するのチェックボックスを選択し、比較結果を表示するオーバーレイをご覧ください。この機能はSPAチャートでは使うことはできません。
BrowserとAPMを切り替える New Relic APMをお使いの場合は、アプリサーバーのリンクを選択することでAPMとBrowserを切り替えることができます。Browser Overviewに戻るには、APMOverviewページからBroswerのリンクを選択してください。

Apdexチャート

Apdexチャートは、選択された時間内のエンドユーザーのApdex、およびその時間内の平均値を表示します。New Relic APMをお使いの場合は、アプリサーバーのApdexデータも合わせて表示します。Apdexの説明については、Apdex: ユーザーの満足度を測定をご覧ください。

ApdexチャートはSPAのデータを使用せず、元来のページ読み込みタイミングのみを使用します。

このチャートの他の機能には下記が含まれます:

目的 手段
BrowserとAPMを切り替える New Relic APMをお使いの場合は、チャートはAPMとBrowserの表示を切り替えることができます。

  • アプリサーバーのリンクを選択すると、APMOverviewページを表示させることができます。
  • BrowserのOverviewページに戻るには、APMのOverviewページからBrowserのリンクを選択してください。
Apdex のしきい値を見る Apdexチャート名の横にある『?』アイコンにマウスオーバーすると、Browserおよび(お使いの場合は)APMで設定したApdexのしきい値を見ることができます。

スループットチャート

スループットチャートはブラウザーのスループットを毎分のページ数(ppm)として表示します。チャート右上の値は、選択された時間内における平均値を示します。
SPAモニタリングが有効で、SPA読み込み時間のチャートが表示されている場合は、スループットチャートはSPAデータも合わせて使用します。

アプリサーバーの毎分のリクエスト(rpm)は、ブラウザーのページ読み込みタイミングの毎分のページ数(ppm)とは異なる値を表示することがあります。詳細についてはページ読み込みタイミングの処理をご覧ください。

セッショントレース、JavaScriptエラー、AJAX

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

サブスクリプションレベルに応じて、Overviewページで下記の表やチャートが表示されます。

  • 直近のセッショントレースセッショントレースーページの概要を示します。
  • JavaScriptエラーJS エラーページの概要を示します。
  • AJAX応答時間AJAXページの概要を示します。

New Relic の標準のページ機能
その他にも、ほとんどのNew Relic製品のページが持っている標準の機能があります。詳細については、New Relicの標準のページ機能をご覧ください。

関連情報

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

ページ読み込みタイミングの使用方法

    (JavaScriptの構成、データの送信)

  • ブラウザーモニタリングとパフォーマンスのインパクト(モニタリングを即座に開始するために、New Relic BrowserがウェブページのデータパケットをどのようにJavaScriptに組み込んでいるか)
  • ブラウザーモニタリングと検索エンジンの最適化 (フロントエンドのパフォーマンスの可視性を最大限まで高め、全体のページの読み込み時間とSEOに与える影響を最小限にするためにJavaScriptがどのように使われているか)

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