リソースロード統計

ホーム画面 > プロジェクト選択 > 統計 > リソース負荷統計

リソース負荷統計は、ウェブページの性能改善に必要な判断基準を提供します。 ウェブページのリソース別性能データを視覚化して性能推移、応答時間、サイズを一目で表示します。 これにより、各リソースがページロードに与える影響を把握し、性能ボトルネックを分析できます。 ロード時間の長いリソースを識別し、大容量リソースを最適化し、サードパーティ（3rd party）リソースが全体性能に与える影響を点検できます。

ノート

収集データの詳細については、次の文書を参照してください。

リソースロード統計を確認する

ページのロード時間を短縮し、ユーザーエクスペリエンスを向上させるために必要なデータを提供します。 性能低下の原因を明確に把握でき、改善作業をより効果的に進めることができます。

1. 統計 > リソース負荷統計メニューに移動します。

2. 時間で性能指標を照会する日時を設定します。

   • 設定可能な時間範囲: 最小5分、最大3日

   • データ照会単位: 2時間以下 → 5分単位、2時間超過 → 1時間単位

3. 統計基準で希望の項目を選択します。 詳細については、統計基準の文書を参照してください。

4. 画面右上のボタンをクリックします。

5. 選択した時間範囲の性能指標が各セクションにチャートと一覧で表示されます。

   • グラフにマウスをオーバーすると、その時間帯の詳細指標を確認できます。

統計基準を選択する

統計基準は、ユーザーが分析しようとする統計指標を次の選択した基準で確認できるオプションです。

統計基準	説明
平均	各リソースの平均ロード時間を計算して統計を提供します。 全体の性能を把握するのに役立ちます。
最大値	各リソースの最大ロード時間を基準に統計を提供します。 ページロード時間が最も非効率なリソースを把握できます。 リソースの応答時間やサイズの大きい区間を分析するのに活用できます。
最小値	各リソースの最小ロード時間を基準に統計を提供します。 ページロード時間が最も早いリソースを確認できます。

リソースタイプ別ロード数の推移

リソースタイプ別のロード数を時間単位で視覚化します。 特定のリソースタイプのロード比率が過度に高い場合、性能ボトルネックが発生する可能性があります。 その場合、該当リソースの原因を分析して最適化を進めてください。

• 円形チャートはリソースタイプ別の比率を表示します。 チャートにマウスをオーバーすると、そのリソースの比率をツールチップで確認できます。

• 棒グラフは時間単位のリソースロード数の推移を表示します。 グラフにマウスをオーバーすると、その時間帯のリソースタイプ別ロード数をツールチップで確認できます。 ユーザーが特定の時間を棒グラフで選択すると、リソースロード数 Top 10 - 経過時間、サイズおよびリソースグループ一覧セクションのデータを選択した時間範囲に合わせて更新します。

ノート

リソースタイプの詳細については、次の文書を参照してください。

リソースロード数 - 経過時間

ロード数が最も多い上位10個のリソースの応答時間をチャートと一覧で提供します。 トラフィックが集中したリソースの性能への影響を素早く把握できます。 時間帯別の応答時間の推移を合わせて確認して、特定の時間に発生する遅延を分析できます。 応答時間が長いリソースを中心にサーバー処理時間とネットワーク遅延を点検し、最適化に活用できます。

リソースロード数 - 件数

ロード数が最も多い上位10個のリソースのサイズをチャートと一覧で提供します。 ウェブページの読み込み性能低下を引き起こす大容量リソースを確認できます。 画像の最適化、JSバンドリングおよび圧縮によりページ性能を改善できます。

リソースグループ一覧

ウェブページにロードされたすべてのリソースを一覧で提供します。 各リソースの詳細な性能指標を確認できます。 リソースのロードパスとリクエスト件数を分析して、不要な繰り返しリクエストを減らすことができます。 外部リソース（3rd party）のリソースホストカラムを確認して他社APIやCDNの性能状態を点検できます。 詳細については、次の文書を参照してください。

• テーブルのヘッダーカラムをクリックすると、そのカラムを基準に一覧をソートできます。

• ヘッダーカラムにマウスをオーバーすると、そのカラムの説明をツールチップで確認できます。

アイコン項目	説明
	CSVボタンをクリックすると、照会結果をCSVファイルとして保存できます。 - CSVファイル名: Resource_LoadStatistics_YYYYMMDD_HHMMSS.csv形式
カラム設定	カラムを非表示にしたり、追加したり、順序を変更できます。 詳細については、カラム設定の文書を参照してください。
	新しいウィンドウアイコンをクリックすると、リソースグループ一覧を新しいウィンドウで確認できます。

リソースロード統計の詳細

リソース負荷統計画面のリソースグループ一覧の 詳細アイコンをクリックすると、選択したリソースグループの統計を表示するリソースロード統計の詳細ウィンドウに移動します。

• リソースロードタイムライン

  選択したリソースグループの全体ロード性能を提供します。 リソースの総ロード時間と段階別所要時間を平均値で表示し、ブラウザアプリケーションのロード性能を一目で把握できます。 詳細については、次の文書を参照してください。

• リソースページのロード時間の推移

  選択したリソースグループの期間別ページロード時間を確認します。 指標選択ボックスで様々な性能指標を選択できます。 性能指標の詳細については、次の文書を参照してください。

• リソースページのロードサイズの推移

  選択したリソースグループの時間帯別にロードされたページリソースの総サイズを確認できます。 ページのロードサイズの推移によって、ネットワーク負荷とページ最適化状態を分析できます。

• リソースページのロード数の推移

  選択したリソースグループの時間帯別にロードされたリソース数を確認できます。 リソース数が急増したり、異常に増加したりする場合、特定のページで過剰なリソースリクエストが発生したことを確認できます。

• DNS時間 / サーバー接続時間 / FirstByte時間 / ダウンロード時間

  時間帯別にDNS照会にかかった平均時間、サーバー接続設定にかかった平均時間、最初のバイト受信にかかった平均時間、リソースダウンロードにかかった平均時間を確認します。

• リソースグループ一覧

  選択したリソースグループに含まれる個別リソースの様々な性能指標を確認できる一覧です。

照会結果をフィルタリングする

照会した統計データをドメイン、性能指標（byte、ms）、リソース経路を基準にフィルタリングして、希望する項目を集中分析します。

1. 画面上部のフィルター入力欄をクリックします。

2. フィルターを追加ウィンドウでフィルターを指定します。 フィルタータグはフィルターキー、条件、検索値の順序で入力します。

   • ドメイン分類オプションを使用すると、リソースを提供する主体を区別できます。 詳細については、ドメインフィルターを参照してください。

ドメインフィルター

ドメイン分類オプションを活用すると、リソースを提供する主体を区別し、性能に影響を与える要因が内部（1st Party）か外部（3rd Party）かを把握できます。 ウェブページの性能を最適化する際に、どこでボトルネックが発生するかを効果的に分析できます。

• 1st Party: 自社で提供するリソースのみをフィルタリングできます。 ウェブサーバーや独自にホスティングされたリソースなどが該当します。

  Tips

  1st Partyリソースを確認して、内部サーバーの性能ボトルネックを点検します。

• 3rd Party: 外部サービスが提供するリソースです。 CDNリソース、外部API（例: Google Analytics）、他社ライブラリなど、外部ドメインからロードされるすべてのリソースが含まれます。

  Tips

  3rd Partyリソースの応答時間を分析して、外部サービスやCDNの性能がウェブページに与える影響を評価します。

フィルターキー、条件、検索値の入力

• フィルターキー入力時、リソース path、リソース type、性能指標（byte、ms）オプションを提供します。

• 条件入力時、フィルターキーがリソース path、リソース typeの場合は一致、不一致オプションを提供し、性能指標の場合は>、<、<=、>=、==オプションを提供します。

• 検索値入力時、一致検索（>、<、<=、>=、==）の場合は青色で、除外検索（不一致）の場合は赤色でハイライト表示します。

ノート

選択できる性能指標の詳細については、次の文書を参照してください。

フィルタータグの削除

• タグのXアイコンをクリックすると、適用されたタグを削除できます。

• 入力欄の全削除アイコンをクリックすると、全てのタグを削除できます。

リソースタイプ

以下は、WhaTapブラウザモニタリングで定義するリソースタイプのガイドです。

リソースタイプ	説明
script	JavaScriptファイルリソースです。 例えば、.jsファイル、フロントエンドコードの実行および動的機能に必要なスクリプトファイルです。
image	画像ファイルリソースです。 例えば、.png、.jpg、.svgなど、様々な画像フォーマットを含みます。
fetch	ブラウザーからデータを取得するHTTPリクエストです。 主にAPI呼び出しやJSONデータリクエストに使用されます。
css	スタイルシートファイルリソースです。 ウェブページのレイアウトとデザインを定義するCSSファイルです。
font	ウェブフォントリソースです。 例えば、.woff、.ttf、.otfなどのフォントファイルを含みます。
xhr	XML HTTP Requestを通じて取得するリソースです。 主に非同期データリクエスト（例: AJAX呼び出し）に使います。
media	オーディオ、ビデオなどのメディアファイルリソースです。 例えば、.mp4、.mp3、.wavなど、様々なメディアフォーマットを含みます。
beacon	navigator.sendBeacon()を使用して非同期データをサーバーに送信するリクエストです。
document	HTMLドキュメントそのもので、ページを構成する主要なコンテンツリソースです。
other	その他として分類されるリソースです。 明確なタイプとして区分されないリソースを含みます。

カラムを設定する

リソースグループ一覧でテーブルヘッダーカラムを非表示にしたり、必要な項目を追加できます。 カラムの順序を変更することもできます。 カラム設定ボタンをクリックします。

ノート

左の一覧を（昇順）/ （降順）アイコンをクリックしてソートできます。

カラムの追加

1. カラム設定ウィンドウの左側の一覧から追加するカラム項目を選択します。

   • すべてのカラム項目を選択するには、左の一覧の上段にあるすべて選択をクリックします。

2. 選択したカラム項目が右側の表示項目に追加されたことを確認します。

3. ご希望のカラム項目をすべて追加したら確認ボタンをクリックします。

ノート

カラム項目の詳細については、次の文書を参照してください。

カラムを削除する

1. カラム設定ウィンドウの表示項目で、削除するカラム項目の右側にあるをクリックします。

2. 左側の一覧で削除したカラム項目のチェックボックスが解除されたことを確認します。

3. ご希望のカラム項目をすべて削除したら確認ボタンをクリックします。

カラム順序の変更

カラムの順序を変更できます。

1. カラム設定ウィンドウの表示項目で、順序を変更する項目をドラッグして目的の位置に移動し、カラムの順序を変更します。

2. すべての設定を完了した後は確認ボタンをクリックします。

カラム設定を初期化する

変更をすべてキャンセルして初期化できます。

1. カラム設定ウィンドウの 初期化ボタンをクリックします。

2. 初期化設定を反映するには、確認ボタンをクリックします。

AI分析で照会結果を解釈する

オプションバーのAI分析ボタンをクリックすると、画面に照会されたリソース別の件数とサイズ、ロード時間のサマリーをWhaTap AIが読み取り、分析結果を提示します。容量の大きいリソースやサードパーティリソースがページロードに与える影響を絞り込む際に活用できます。ボタンはアイコンのみ表示され、マウスを乗せるとツールチップで名称を確認できます。

1. 照会条件を指定し、 ボタンをクリックしてデータを照会してください。

2. オプションバーのAI分析ボタンをクリックしてください。

3. 画面右側にAI分析ドロワーが開き、結果がストリーミング形式で表示されます。

• リソース統計は遅延時間とともにリソースサイズを軸として扱うため、分析結果もリソースタイプとサードパーティかどうかを基準に提示されます。

• 時間の入力が有効でない場合はボタンが非活性になります。マウスを乗せると有効でない時間が選択されました。という理由を確認できます。

ノート

AI分析の共通動作および分析に使用するデータ範囲については、次の文書を参照してください。

カラムと用語案内

カラム	単位	説明
数	件数	リソースがリクエストされた合計数です。
経過時間	ミリ秒	リソースを完全に読み込むのにかかった時間です。
ダウンロード時間	ミリ秒	リソースをサーバーからダウンロードするのにかかった時間です。（responseStartからresponseEndまでの時間）
リダイレクト時間	ミリ秒	リソースのロード中のリダイレクトにかかった時間です。（redirectStartからredirectEndまでの時間）
リソースタイプ	テキスト	リクエストしたリソースのタイプです。 詳細については、次の文書を参照してください。
リソースホスト	テキスト	リソースを提供するサーバーのホスト名です。
リソースパス	テキスト	リクエストしたリソースのURLパスまたはファイルパスです。
バージョン	テキスト	リソースのバージョン情報です。
サーバー接続時間	ミリ秒	リソースをリクエストするクライアントとサーバーとのネットワーク接続にかかった時間です。
サイズ	バイト（Byte）	リクエストしたリソースのデータサイズです。
環境	テキスト	リソースがロードされた実行環境です。 例: 開発環境、運用環境など
DNS時間	ミリ秒	ドメイン名の照会にかかった時間です。（domainLookupStartからdomainLookupEndまでの時間）
FirstByte時間	ミリ秒	サーバーから最初のバイト（Byte）を受信するまでの時間です。（requestStartからresponseStartまでの時間）
SSL時間	ミリ秒	HTTPS接続時、TLSハンドシェイクにかかった時間です。（connectEndからsecureConnectionStartまでの時間）

ノート

Navigation timingについての詳細は、次の文書を参照してください。