本文へスキップ

ページロード分析

ホーム画面 > プロジェクト選択 > 分析 > Page Load Hitmap

ページ読み込み イベントは、ウェブ アプリケーションにアクセスしたエンド ユーザーがページの読み込みを完了したときに発生するイベントです。 ページ読み込みイベントをヒットマップチャート形式で提供し、各イベントに関する詳細情報をタイムライン形式で確認することができます。 これにより、Webページの読み込みを妨げている原因を特定するのに役立ちます。 次の情報を含みます。

  • ページロード イベント区間別の詳細時間情報

  • ロードしたリソースの詳細

  • ブラウザエラーデータ

ページロードイベント一覧確認​

単一のページごとに読み込みイベントを分析できます。 ページ読み込みの性能を分析するために、ヒットマップと様々な指標を提供します。

ページ読み込みヒットマップ

指示線1 Page Load Hitmapウィジェットのチャート領域をドラッグしてください。 ドラッグした領域のページロードイベント一覧が画面下に表示されます 指示線 2 ページリストに読み込み、ページグループ別に分類して、画面の右側の 指示線 4 ページグループリストに読み込みます。 指示線3 ページURLで目的のページ一覧を検索できます。

ページロードヒットマップ​

Page Load Hitmap ウィジェットは、時間の経過に伴う ページロードレスポンス時間を分布図チャートとして表示します。

  • 横軸はページロードイベントの終了時間です。

  • 縦軸はページロードイベントの経過時間です。

  • 空色 → 青色 → 藍色 順に正常ページロードイベントを表現します。

  • 黄色 → オレンジ色 → 赤色 順にエラー発生ページロードイベントを表現します。 エラーページ読み込みイベントは、ページの読み込み中にブラウザーエラーが発生した場合です。

ページ一覧​

Page Load Hitmapウィジェットからドラッグした領域のページ読み込みイベントがページリストウィジェットのテーブルに表示されます。 一覧で各項目の左端の詳細表示アイコンを選択するとページロード詳細ウィンドウが表示されます。

ページリスト ウィジェットのテーブルには、次の基本情報が含まれます。

  • 開始時間：ページロード イベントの開始時間

  • 経過時間：ページロード イベント完了までの所要時間

  • ページURL：エンドユーザーがアクセスしたページのURLパス

  • WEBブラウサ：エンドユーザーが使用したブラウザーの種類

  • デバイス：エンドユーザーが使用した機器の種類

  • OS：エンドユーザーが使用する機器のオペレーティングシステムの種類

  • クライアントIP：エンドユーザーが使用するデバイスのIPアドレス

テーブルに他の情報カラムを追加したり、追加したカラムを非表示にすることもできます。 ページリストウィジェットの右上のカラムアイコンボタンを選択してください。

ノート

  • ページ一覧のうち、ブラウザエラーデータを含むページロードイベントは赤色で表示されます。

    ブラウザエラーデータ

  • WhaTapは、クライアントに関する情報をデフォルトで保存します。

ページ一覧のフィルタリング​

ページ一覧を対象に検索ワードを入力し、一致する対象をフィルタリングできます。 参照基準は次のとおりです。 目的の項目を選択し、検索ワードを入力してエンターキーを押すか検索アイコンボタンを選択してください。

  • ページURL
  • WEBブラウサ
  • デバイス
  • OS
  • クライアントIP
  • ユーザーID

ページグループ一覧​

ページグループ一覧

Page Load Hitmapウィジェットでドラッグした領域のページ読み込みイベントをページ·グループごとに確認できます。 一覧から項目を選択すると、選択したページグループに対応するページロードイベントのみページリストに表示されます。

ページ読み込みイベント詳細情報​

ページリストで各項目の一番左の詳細を見るアイコンを選択すると、ページロード詳細ウィンドウが表示されます。 ページ読み込みの性能を分析するために様々な指標を提供し、性能に影響を与える要因を特定することができます。

ページロード詳細

URLリスト​

ページリストの項目をURL基準で確認できます。 URLリストのソートは、経過時間です。 URL項目を選択するとページロードイベントの詳細情報を指示線 2右側の画面に表示することができます。

  • 各項目の青色の棒グラフは、ページロードの経過時間です。
  • 各項目の棒グラフの右側の時間は、ページロードの開始時間です。

概要(ページロードイベント要約)​

概要タブでは、ページ読み込みのプロセス中に区間別でかかった時間をグラフチャートとして提供します。 これにより、ページ読み込みプロセスの遅い区間を特定することができます。

  • ページ情報：エンドユーザーの接続環境、接続ページ情報、ユーザーID、セッションID情報を提供します。

  • ページロード時間情報：ページロード時の区間別の所要時間を確認することができます。

    • redirect：ブラウザーがリダイレクトに要した時間

    • cache：ブラウザーがキャッシュされたリソースを検索するのにかかる時間

    • dns：ブラウザーがドメインを検索するのにかかる時間

    • wait：ブラウザーが ページロードに必要なデータへのレスポンスを待つのにかかる時間

    • download：ブラウザーがサーバーからリソースをダウンロードするのにかかる時間

    • render：サーバーからダウンロードしたリソースを画面にレンダリングし ページロード イベントを完了するのにかかる時間

リソース一覧​

ブラウザーがサーバーからダウンロードするリソースは、ページ読み込みの性能に大きな影響を与える可能性があります。 リソースリストは、読み込み速度が遅いリソースやファイルサイズが大きいリソースをすばやく特定することができます。

リソース一覧

各リソースの開始時間に基づいてタイムラインチャートを提供し、ロード速度が遅いリソースを特定できます。 各リソースのファイルサイズを参照し、パフォーマンスに影響を与える部分を改善することができます。 各リソースをクリックするとリソース詳細ウィンドウから詳細な時間情報を確認できます。

リソース詳細

ブラウザーエラーを確認する​

ブラウザのエラーデータを含むページロードイベントの場合、赤色で表示されます。 リソースリストでエラーが発生したステップを確認することができます。

リソースリスト-エラーデータ

  1. リソースリストでエラーが発生したステップを選択すると、エラースタックウィンドウが表示されます。

    エラースタック

  2. Uploadボタンを選択してください。

  3. コードスタックのソースマップファイルを選択してください。

難読化されたスタック情報とJavaScriptのソースマップ情報を比較して、実際にエラーが発生したコードを確認できます。

ユーザーセッション分析​

ユーザーセッション分析

ユーザーセッションを基準にウェブページと相互作用しながら発生させたイベントやエラーなどを時間順に確認することができます。 ユーザーセッション分析についての詳細は、次の文書を参照してください。