リソースのロード問題の診断

Web ページのパフォーマンスの問題を診断するため、HTML と JavaScript がダウンロードしているリソースのタイミングを参照する必要があります。 トランザクション追跡ビューアの[ブラウザ タイミング]タブでは、追跡に関連する HTTP 要求への応答でダウンロードされたリソースを可視化できます。 ブラウザ タイミングは、トランザクション追跡全体で累積的で順番に生成されるデータを表します。 追跡データに関する詳細情報を検査できます。 ハード ページとそのリソース、およびソフト ページに関連するリソースのデータが表示されます。 (ソフト ページ自体のデータは表示されません)リソースはデフォルトで灰色であり、各フェーズは独自の色を持っています。 ウォーターフォール表現は、トランザクション追跡にさまざまな要因がどのように関わっているかを理解するために役立ちます。 このビューは、ブラウザの開発者ツールのウォーターフォール ビューと同様に動作します。
apmdevops106
Web ページのパフォーマンスの問題を診断するため、HTML と JavaScript がダウンロードしているリソースのタイミングを参照する必要があります。 トランザクション追跡ビューアの[ブラウザ タイミング]タブでは、追跡に関連する HTTP 要求への応答でダウンロードされたリソースを可視化できます。 ブラウザ タイミングは、トランザクション追跡全体で累積的で順番に生成されるデータを表します。 追跡データに関する詳細情報を検査できます。 ハード ページとそのリソース、およびソフト ページに関連するリソースのデータが表示されます。 (ソフト ページ自体のデータは表示されません)リソースはデフォルトで灰色であり、各フェーズは独自の色を持っています。 ウォーターフォール表現は、トランザクション追跡にさまざまな要因がどのように関わっているかを理解するために役立ちます。 このビューは、ブラウザの開発者ツールのウォーターフォール ビューと同様に動作します。
以下の手順に従います。
  1. ビジネス トランザクション
    ]タブで、目的のトランザクション追跡をクリックします。
    個別のトランザクション コンポーネントは、グラフィカル スタック (ウェディング ケーキ) に表示されます。
  2. スタック表示のコンポーネントを上から下に確認し、期間中のコール シーケンスを理解します。 異常に長いコンポーネント トランザクション時間は、問題の根本原因を表示している可能性があります。
  3. 目的のコンポーネントをクリックします。
  4. [ブラウザ タイミング]
    タブをクリックします。
  5. リソースのロード問題を診断するために、タブに表示される情報を確認します。
[ブラウザ タイミング]タブは 3 つの部分から構成されます。
  • リソースのダウンロードをトリガした、トレース内のコンポーネントに関する情報が含まれる、サマリ領域。
  • 時間範囲を絞り込むことで、特定のリソースを重点的に見ることができる、タイムライン。 タイムライン範囲では、すべてのリソースを前後関係の中で表示して、グリッドに表示される期間を絞り込むことができます。 端のマーカをドラッグする、または中間で行全体をドラッグして、範囲を変更できます。
  • 各リソースに関する詳細の行を表示する、グリッド。
グリッドには、以下のタイプの行が含まれます。
  • ページ ロード行
    選択されたトレースがハード ページのロードを表している場合、ページ自体がグリッドで表されます。 (ソフト ページのロードは単に JavaScript を使用して既存のページを更新します。)グリッドの最後の列には、選択した時間範囲が 10 個の同じ期間に分かれて表示されます。 灰色のバーはページ ロードの全体の継続時間を表し、色付きのバンドはページ ロードのさまざまな「フェーズ」を表します。 全体の期間には、ブラウザ タイミングの期間が含まれているため、フェーズの期間の合計はページ ロードの全体の期間に満たない場合があります。 ブラウザ タイミングの期間には、ネットワークに関連するタイミングとブラウザ コンテキストの切り替えが含まれています。 トレースのタイミングの内訳を表示するには、フェーズをマウスでポイントします。
    ページ リソースのロードは、以下のフェーズの一部またはすべてを持つことができます。
    • リダイレクト
    • AppCache
    • DNS
    • TCP
    • 要求
    • 応答
    • 処理
    • ロード
    ブラウザ エージェントは、ほとんどのフェーズを直接報告しますが、2 つのフェーズは、以下の図に示すように計算されます。
  • AppCache: DNS (ドメイン ルックアップ) - 取得
  • 処理: Dom 完了 - 対話型 Dom
  • ページ ロード フェーズ
  • リソース ロード行
    リソースのフェーズは、スタック(ウェディング ケーキ)には表示されません。そのためフェーズの RAW データを表示することはできません。 ページがダウンロードする各リソースには、[ブラウザ タイミング]グリッドの行があります。 ページ ロード情報と同様、グリッドのグラフィック上にマウスをポイントして、各リソースの詳細を表示できます。 リソース URL へのネットワーク アクセスがあれば、
    [リソースの表示]
    をクリックして新しいタブでリソースを表示できます。
    リソースのロードは、以下のフェーズの一部またはすべてを持つことができます。
    • AppCache
    • DNS
    • TCP
    • 要求
    • 応答
    • コールバック実行時間
    ページがダウンロードするリソースは、ページのロードと同じように表示されますが、フェーズがいくらか異なります。 ブラウザ エージェントは、AppCache を除くすべてのフェーズをレポートします。 AppCache は DNS - 取得として計算されます。 以下の図は、リソースのロードのフェーズを示しています。
    リソース ロード フェーズ
    Firefox[ネットワーク]タブでは、リソースのトレース値が同じトレースのタイミング値と一致しない可能性があります。 さらに、[ブラウザ タイミング]タブは[ネットワーク]タブに表示される、いくつかのリソースを表示しません。 Firefox[ネットワーク]タブのタイミング値は、要求開始から応答終了である一方、ブラウザ タイミング期間はネットワークに関連するタイミングおよびブラウザ コンテキストの切り替えを含むため、値の不一致はすべてのリソースに対して発生します。 [ブラウザ タイミング]タブで欠落しているリソースは、デフォルトで除外されます(構成不可)。 これらのリソースには、プロファイルの設定およびメトリックの応答を送信するための、クライアントのリクエストが含まれます。 ブラウザ タイミングは、ブラウザ エージェントによって必要とされるリソースの、ページ メトリックをレポートしません。 期間の値を調整するためにコールバック実行時間が追加されるため、すべてのブラウザで合計継続時間の値が一致しない可能性があります。
注:
タイミングは、1 ミリ秒単位で切り上げまたは切り下げされる場合があります。