Synthetics Resources: 読み込み時間の理解

Resources ページでは、サイト上の各リソースの読み込み時間のパフォーマンスを知ることができます。resources load time [リソース読み込み時間]グラフ, time spent by third parties [サードパーティ別の消費時間]グラフ、irregular response codes[不正なレスポンスコード]グラフからは、各情報の概要を知ることができます。リソース一覧から、サイズの大きい CSS や画像などのインパクトの大きいリソースを特定できます。

また、1つのリソースのパフォーマンス情報を集約したリソースの詳細なメトリクスを含む特定のリソースを調べることができます。さらに深く移動して、そのリソースの 1つの読み込みに対しての情報を表示できます。そして、そのリクエストヘッダーやレスポンスヘッダーから、パフォーマンスの問題を特定することもできます。

Resources ページの表示

モニターの Resources ページを表示するには、New Relic のメニューバーから Synthetics > (selected monitor) > Resources へアクセスします。

screen-synthetics-resources.png
Synthetics > (選択したモニター) > Resources: Resources ページでは、サイトの各リソースのパフォーマンスを解析できます。そして、個々のリソースの読み込みに関する詳細なメトリクスを見ることができます。

Resources メトリクスの理解

Resources ページでは、サイト上の各リソースのパフォーマンスを知ることができます。

  • Resources List [リソース一覧]: average download time [平均ダウンロード時間]別に監視対象のサイトのリソースを一覧表示します。これを参考に、ダウンロード時間を減らして、サイトのパフォーマンスを最適化しましょう。Search all resources [全リソースの検索]フィールドを使って、検索することにより、特定のリソースの読み込み時間も確認できます。リソースを選択すると、個々のリソースのメトリクスを表示します
  • Resources Load Time [リソースの読み込み時間]: (jpegjsonjavascript などの) リソースの種類別に分類し、全リソースの合計読み込み時間をグラフ表示します。このグラフから、サイトの読み込み時間が、時間の経過とともにどのように変化するかを理解することができます。
  • Time Spent by Third Parties [サードパーティ別消費時間]:
    ウェブフォント、埋め込みの Twitter のタイムライン、外部ホストの画像などの全サードパーティのリソースの合計読み込み時間をグラフ表示します。このグラフから、サードパーティのサイトがサイトのパフォーマンスにどのように影響していのかを知ることができます。
  • Irregular Response Codes [不正なレスポンスコード]: モニターが受信した不正な HTTP レスポンスコード( HTTP ステータスコードとも言う)の数をグラフ化したものです。このグラフには、300 番台 (リダイレクト)、400番台 (クライアントエラー)、500番台 (サーバーエラー)の全レスポンスが含まれます。100番台と 200番台のレスポンスは含みません。また、カスタム・レスポンスコードの数も収集します。

このメトリクスを分析することで、問題のあるリソースを追跡し、パフォーマンスを改善することができます。

リソースの詳細なメトリクスの確認

サイトの各リソースの詳細なメトリクスも確認できます。詳細なメトリクスを見るには、リソースを探すか、単に, Resources ページから気になるリソースを選択するだけです。リソースを選択すると、そのリソースのメトリクスの概要や、個々のリソースの読み込みを確認できます。

  • Max duration [最大処理時間]、Min duration [最小処理時間]、Avg duration [平均処理時間]: 選択されている期間におけるリソースの読み込み時間に関するメトリクスです。
  • For 50% of requests [リクエストの 90% の処理時間]: リクエストの早い順の上位 50% の最大ダウンロード時間。これは、このリソースに対するリクエストの 50% が表示されている時間より短い時間で完了したことを意味します。
  • For 90% of requests [リクエストの 90% の処理時間]: リクエストの早い順の上位 90% の最大ダウンロード時間。これは、このリソースに対するリクエストの 90% が表示されている時間より短い時間で完了したことを意味します。
  • Average load time [平均読み込み時間]:
    Graphs the average load time for this resource over the 選択されている期間におけるリソースの平均読み込み時間をグラフ表示します。このグラフを使うと、(画像サイズを小さくしたり、CSS の縮小化など)サイトの最適化かうまく行っているかを検証できます。

チャートの要素を隠したり、再表示したり、地域でフィルターしたり、リソース結果のリストを Download time [ダウンロード時間]順や DNS lookup 順に並べ替えたりできます。リソース名にマウスオーバーすると、フルパスを表示します(動的に生成されたリ非常に長いソース名の場合に便利です)。

screen-synthetics-individual-resource-metrics.png
Synthetics > (選択したモニター) > Resources > (選択したリソース): 個々のリソースを選択すると、そのリソースのパフォーマンスに関する詳細なメトリクスを確認できます。

個々のリソースの読み込みの確認

特定のリソースの詳細なメトリクスから、個々のリソースの読み込みを確認することができます。それにより、パフォーマンスが遅い原因についてより深く理解することができます。問題が発生した箇所を理解するために、合計の接続時間の内訳を確認したり、リクエストヘッダーやレスポンスヘッダーを調べることもできます。

screen-synthetics-individual-resource-results.png
Synthetics > (選択したモニター) > Resources > (選択したリソース) > (選択したリソース読み込み): 個々のリソース読み込みを選択すると、接続時間、リクエストヘッダー、レスポンスヘッダーの詳細な情報を見ることができます。ネットワークのタイミング構造は、HTTP Archive 1.2 仕様を利用しています。

ページ機能

Resources ページでは以下の機能を利用できます。

したいこと やること
結果のリストを並び替えたい

Sort By ドロップダウンから、並び順を選択します。

select the sort by field to filter and sort your results

Sort by Average download time [平均ダウンロード時間]で並び替えると、読み込みの遅いリソース順のリストを見ることができます。Average size [平均サイズ]を指定すると、サイズの大きいリソース順となります。

チャート用の非表示/再表示したい

チャートの要素を選択すると、非表示/再表示を行います。

switch monitors by selecting the monitor name

リソースを探したい Search all resources [全リースを検索]フィールドにリソース名の一部を入力します (例: search-icon.pnglatest.json)。任意のリソースを選択すると、そのリソースの詳細なメトリクスが表示されます。
別のモニターへの簡単アクセスした

サイドメニューにあるドロップダウン アイコンを押します。最近のモニターのリストから選択するか、Search by monitor name [モニター名で検索]フィールドに名前を入力して、最近のモニターリストを絞り込んで、選択します。

switch monitors by selecting the monitor name

期間を変更したい タイムピッカーを使うと、結果の数を調整できます。

関連情報

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