Browser Overview ページ: サイトパフォーマンスの概要

New Relic BrowserOverview ページでは、実際のユーザーのブラウザにおけるパフォーマンスに関する各種データをまとめて表示しています。このページは以下の点で役にたちます。

  • ブラウザ視点のアプリのパフォーマンス傾向を把握できます。
  • ページ読み込みタイミングに関する問題の原因分析の効率がよくなります。
  • 他の Browser UI ページへ遷移できます。
New Relic Browser を使い始める方法やアクティブにする方法、UI を最大限に活用する方法など知りたい方は、learn.newrelic.com にアクセスしてください。

Overview ページにアクセスする

ブラウザのパフォーマンスの概要情報を表示する手順は以下の通りです。

  1. rpm.newrelic.com/browser にアクセスし、New Relic Browser インデックスページから任意のアプリを選択します。
  2. Overview ページにある New Relic ページの標準機能を使って、詳細な情報にアクセスできます。
Browser Overview page
rpm.newrelic.com/browser > (選択したアプリ) > Overview: New Relic Browser のアプリ一覧からアプリを選択すると、Overview ページに選択したアプリのブラウザのパフォーマンス概要が表示されます。

Overview ページには以下の情報が含まれます。

読み込み時間用のチャート

Load time (読み込み時間)チャートは、Overview ページのメインのチャートです。ユーザーのブラウザのロード時間の内訳を示したものです。チャートの右上には、現在選択している期間のページ読み込みの平均値が表示されています。Page views ページページ読み込みタイミングプロセスの詳細も表示されます。

読み込み時間チャートの内訳
Load time チャートには以下の情報があります。

ページ読み込みタイミング内の分類 説明
Web application (ウェブアプリケーション) アプリのコードの実行処理時間です。
Network (ネットワーク) インターネットを介したリクエストの往復に要する時間(ネットワーク待ち時間)です。コピー/ペースト方法で Browser 用の JavaScript のスニペットを貼り付けている場合、Network の項目には ウェブアプリケーションの時間も含まれています。
Request queuing (処理待ち) 本番環境がリクエストを受信したタイミングとそれをアプリが処理するタイミングとの差を測定します。
DOM processing (DOM 処理) ブラウザがページの HTML の解析と解釈に費やした時間です。測定には、ブラウザのDOMContent イベントを使っています。
Page rendering (ページ描画) ブラウザが HTML の表示、インライン JavaScript の実行、画像の読み込みに費やした時間です。測定には、Load イベントを使っています。
シングルページアプリ (SPA) の監視による読み込み時間

SPA 監視を有効にしている場合、Load time チャートにはデフォルトで SPA のデータが表示されます。SPA チャートでは以下の区分けで読み込み時間を表示します。

  • Initial page load (初期ページ読み込み): は、URL の読み込みや再読み込みによる従来の URL の変更。
  • Route change (ルート変更): URL のリロードを必要としないビューの変更または更新。
  • Custom (カスタム): Browser API を使って生成されたカスタムイベント。

SPA 監視のページ読み込みタイミングは、標準のページ読み込みタイミングとは異なる方法で行われています。標準ページ読み込みタイミングにチャートの表示を戻したい場合は、は、チャートのタイトル横にあるドロップダウンを選択し、Page view load time を選択します。

読み込み時間チャートの機能
読み込み時間チャートから以下のことができます。

したいこと やること
デプロイ、システム停止、Apdex 設定の変更タイミングを知りたい。

チャート上にイベントと変更を示す垂直線があるかを確認します。

  • 黒の垂直線: Apdex の設定変更
  • 青の垂直線: デプロイ
  • 赤いの垂直線または領域: システム停止

垂直線にマウスオーバーすると、詳細情報が表示されます。

チャートの表示形式を変更したい。
Browser load time chart display options

ヒストグラムとパーセントの表示に切り替えるには、チャートのタイトル横のドロップダウンから、選択できるアイコンを選択します。

過去のデータと比較したい。 Compare with yesterday and last week[昨日と先週の値と比較する]チェックボックスを選択すると、オーバーレイで昨日と先週の同じ曜日の測定値と本日の値を比較表示します。SPA チャートでは使用できません。
Browser と APM を切り替えたい。

New Relic APM も利用している Browser アプリの場合は、以下の方法で APM に切り替えられます。

  • APM の Overview ページを表示するには、App server リンクを押します。
  • Browser Overview ページへ戻るには、APM Overview ページでBrowser リンクを押します。

Apdex チャート

Apdex チャートには、選択している期間におけるエンドユーザー Apdexと、その期間の平均値が表示されます。New Relic APM も利用している Browser アプリの場合、チャートにはアプリサーバーの pdex データも表示されます。

Apdex チャートには SPA データは使用されません。標準ページビューの時間データのみ使います。

このチャートの他の機能は次のとおりです。

したいこと やること
Browser と APM を切り替えたい

New Relic APM も利用している Browser アプリの場合は、以下の方法で APM に切り替えられます。

  • APM の Overview ページを表示するには、App server リンクを押します。
  • Browser Overview ページへ戻るには、APM Overview ページでBrowser リンクを押します。
View Apdex thresholds Apdex チャートのタイトルの横にある question mark 上にマウスオーバーすると、ブラウザと(利用している場合は)APM の両方に設定されている Apdex の閾値も表示されます。

スループットチャート

Throughput (スループット)チャートには、ブラウザのスループットを分あたりのページ数(ppm: pages per minute)として表示します。チャートの右上の値は、現在選択している時間帯における平均値です。

SPA 監視が有効であり、Overview ページに SPA load time チャートが表示されている場合は、Throughput チャートの内容は SPA のデータとなります。が使用されます。

APM で表示される分あたりのアプリケーションサーバーのリクエスト数(rpm: requests per minutes)と、ブラウザのページ読み込みタイミングに表示される分あたりのページ数(ppm: pages per minute)は異なる測定値を示すことに注意してください。

セッショントレース、JavaScript エラー、AJAX の情報の表示

この機能が利用できるかは、契約プランによって異なります。

契約プランによっては、以下の表とチャートが Overview ページに表示されます。

  • Recent session traces (直近のセッショントレース): Session traces ページを要約した内容を表示。
  • JavaScript errors (JavaScript エラー): JS errors ページを要約した内容を表示。
  • AJAX response time (Ajax レスポンスタイム): AJAX ページを要約した内容を表示。

関連情報

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