ページ読み込みが遅いとユーザーエクスペリエンスが低下し、トラブルシューティングも困難です。ユーザーごとの読み込み時間はリージョン、ネットワーク、ブラウザ、キャリアによって異なるため、問題を再現することが難しい場合があります。ほとんどのブラウザ監視ツールは PerformanceTiming オブジェクトに依存していますが、このオブジェクトはページ全体の読み込み時間のみを取得し、スクリプト、スタイルシート、画像などの個別の静的リソースは除外されます。リソースレベルでの可視性がないと、パフォーマンスボトルネックを特定できません。
Application Real-Time Monitoring Service (ARMS) ブラウザ監視では、遅延セッション追跡機能によりこの課題を解決します。具体的には、特定のユーザー会話におけるページ読み込みの様子を正確に再現する、リソースレベルのウォーターフォール図を提供します。本ガイドでは、リソースレポートの有効化、遅延セッションの特定、およびウォーターフォール図の読み取りによる根本原因の特定方法について説明します。
前提条件
ARMS ブラウザ監視に接続された Web アプリケーションがあること。詳細については、「CDN を使用したブラウザ監視の実装」をご参照ください。
セットアップ時に ページリソースレポートを有効化 していること。
重要ARMS ブラウザ監視 SDK はデフォルトで静的リソースデータをレポートしません。遅延セッション追跡にはこのオプションが必要です。この設定が無効の場合、ウォーターフォール図にはリソースレベルのデータが表示されません。
仕組み
ページリソースレポートが有効になっている場合、ARMS ブラウザ監視 SDK は、ページにロードされたすべての静的リソースのタイミングデータを取得します。低速なセッションは、[ページ速度] ページの [低速ページセッショントレース (TOP20)] リストに自動的に表示されます。セッションを選択すると、各リソースがどのようにロードされ、どこで時間が費やされたかを可視化するウォーターフォール図が開きます。
読み込みが遅いページの特定
次の 2 つの方法を使用できます。集計されたページ速度メトリックから問題のあるページを特定する方法と、調査対象のユーザーまたはセッションが既知の場合に直接セッショントレースを検索する方法です。
方法 1：ページ速度メトリックから開始する
ARMS コンソール にログインします。左側のナビゲーションウィンドウで、 を選択します。
ブラウザ監視 ページで、上部のナビゲーションバーからリージョンを選択し、対象アプリケーションの名前をクリックします。
左側のナビゲーションウィンドウで、 を選択します。ページ速度 ページには、時間経過に伴うページ読み込みメトリックが表示されます。パフォーマンス劣化を示す読み込み時間のスパイクを探します。たとえば、11 時 00 分にページの完全読み込みに 36.7 秒かかっています。これらのメトリックの詳細については、「ページ読み込み速度」をご参照ください。
下にスクロールして 遅延ページセッショントレース (TOP20) セクションを開きます。リストには、選択した時間範囲内で最も遅い 20 件のセッションが表示されます。各エントリには、ページ URL、セッション時刻、合計読み込み時間が表示されます。この例では、11 時 36 分 46 秒に 36.72 秒かけて読み込まれたセッションが、ページ読み込み時間のスパイクの原因となっています。
ページ 列のページ名をクリックして、遅延読み込みの詳細 ページを開きます。
セッションの詳細を確認します。
ページ情報（上部セクション）：このセッションのクライアント IP アドレス、ブラウザ、オペレーティングシステムが表示されます。これにより、問題が特定のブラウザ、リージョン、またはデバイスに限定されているかどうかを判断できます。
ページリソース読み込みウォーターフォール（下部セクション）：セッション中に読み込まれたすべての静的リソースのウォーターフォール図が表示されます。各バーは 1 つのリソースを表し、そのタイミングの内訳を示します。
方法 2：セッショントレースを直接検索する
調査対象のユーザー名、ユーザー ID、またはセッション ID が既に分かっている場合は、この方法を使用します。
ARMS コンソール にログインします。左側のナビゲーションウィンドウで、 を選択します。
ブラウザ監視 ページで、上部のナビゲーションバーからリージョンを選択し、対象アプリケーションの名前をクリックします。
左側のナビゲーションウィンドウで、 を選択します。
セッションリスト セクションで、ユーザー名、ユーザー ID、またはセッション ID でセッションをフィルターし、対象のセッションを特定します。
セッション名をクリックして セッション追跡の詳細 ページを開き、ウォーターフォール図を確認します。
セッショントレースの詳細については、「遅延セッション追跡」をご参照ください。
ウォーターフォール図の読み取り
ウォーターフォール図は主要な診断ツールです。各水平バーは 1 つのリソース（JavaScript ファイル、CSS ファイル、画像、フォントなど）を表します。バーのタイムライン上の位置は読み込み開始時刻を示し、長さは読み込みに要した時間を示します。
リソースタイミングフェーズ
ウォーターフォール図の各バーは、タイミングフェーズに分解できます。これらのフェーズを理解することで、ボトルネックがネットワーク関連、サーバー関連、帯域幅関連のいずれによるものかを特定できます。
| フェーズ | 測定内容 | 診断 |
|---|---|---|
| DNS ルックアップ | ドメイン名を IP アドレスに解決するまでの時間 | 値が高い場合は DNS 解決に問題があることを示します。DNS プリフェッチや高速な DNS プロバイダーの使用を検討してください。 |
| TCP 接続 | サーバーとの TCP 接続を確立するまでの時間 | 値が高い場合はネットワーク遅延が疑われます。より近い CDN エッジノードが利用可能かどうかを確認してください。 |
| SSL/TLS ハンドシェイク | HTTPS 接続における TLS ハンドシェイクに要する時間 | 値が高い場合は、TLS セッション再開の導入や TLS 1.3 へのアップグレードを検討してください。 |
| Time to first byte (TTFB) | リクエスト送信から応答の最初のバイト受信までの時間 | 値が高い場合はサーバー側の処理が遅いことを示します。バックエンド API のパフォーマンスを調査してください。 |
| コンテンツダウンロード | レスポンスボディ全体をダウンロードするのに要する時間 | 値が高い場合はリソースサイズが大きいか帯域幅が低いことを示します。圧縮やリソースサイズの削減を検討してください。 |
一般的なウォーターフォールパターン
| パターン | 意味 | 推奨対応策 |
|---|---|---|
| タイムラインの早い段階で長いバーがある | ブロッキングリソースにより、その後のすべてが遅延している | リソースの defer 読み込みまたは async 読み込みを実施する |
| 多数のバーが順番にスタックしている | リソースが並列ではなく逐次的に読み込まれている | レンダリングをブロックするリソースや HTTP/1.1 の接続制限を確認する |
| 他のリソースよりも著しく長いリソースがある | 単一の大きなリソースまたは遅いリソース | リソースの圧縮、CDN の利用、またはサーバー応答時間の最適化を実施する |
| リソース開始前に長いギャップがある | ブラウザが前提条件の完了を待っている | 依存関係チェーンと読み込み順序を確認する |
| 複数のバーで DNS/接続フェーズが長い | 多くの異なるドメインに対して繰り返し接続が確立されている | サードパーティドメインの数を削減するか、接続のプリロードを実施する |
| 特定のリソースでダウンロードフェーズが大きい | 圧縮されていない、またはサイズが大きすぎるリソース | gzip/Brotli 圧縮を有効化し、画像を最適化するか、JavaScript および CSS をミニファイする |
診断チェックリスト
ウォーターフォール図を開いたら、以下の一般的な問題を確認してください。
圧縮されていないテキストリソース：gzip または Brotli 圧縮なしで配信される JavaScript、CSS、HTML ファイル。
サイズが大きすぎるリソース：最適化可能な個別のリソース（ミニファイ、圧縮、分割など）。
キャッシュの活用不足：ブラウザキャッシュなしで繰り返し読み込まれるリソース。
Cache-Controlヘッダーを確認してください。遅いサードパーティリソース：ページレンダリングをブロックする外部スクリプト（アナリティクス、広告、ソーシャルウィジェットなど）。
レンダリングをブロックするリソース：
<head>内の CSS または同期 JavaScript により、初回描画が遅延している。
次のステップ
アラートの設定：問題発生後に気づくのではなく、ページ読み込み時間がしきい値を超えた際に通知を受け取るようにアラートルールを作成します。詳細については、「ブラウザ監視のアラートルールの作成と管理」をご参照ください。