このトピックでは、Application Real-Time Monitoring Service (ARMS) のブラウザ監視におけるページ読み込み速度の検出および分析機能について説明します。
アプリケーションがARMSブラウザ監視機能に接続されると、ページ速度ページで、アプリケーションの以下のパフォーマンスデータを確認できます。
First Paint Time (FPT) や Time to Interactive など、カスタムパフォーマンスメトリクスを手動で報告できます。詳細については、SDKメソッドをご参照ください。
手順
- ARMS console にログインします。左側のナビゲーションペインで、 を選択します。
- ブラウザ監視ページで、上部のナビゲーションバーでリージョンを選択し、管理するアプリケーションの名前をクリックします。
左側のナビゲーションペインで、 を選択します。
ページ速度セクションでは、FPTまたはページビュー（PV）でページをランク付けし、上向きまたは下向きの矢印をクリックして表示順序を変更できます。
ページ読み込み時間の詳細
ページ読み込み時間の詳細セクションの曲線チャートには、指定された時間範囲内のメトリクスの平均値が表示されます。平均値は、一定期間の平均パフォーマンスを反映しています。ただし、この値は極値や大きな変動の影響を受けやすいです。たとえば、アクセスリクエストのネットワーク接続が弱いためにページの読み込み速度が全体的に遅い場合、平均応答時間は長くなります。右上隅の
アイコンをクリックすると、極値を除外できます。これにより、極値が全体的なパフォーマンストレンドに影響を与えることはありません。曲線チャートのデータが急激に増加する場合は、パフォーマンスサンプル分布と低速ページセッショントレース（TOP20）セクションを使用して問題を特定できます。
ページ読み込みデータのウォーターフォールチャート
ページ読み込みウォーターフォールプロットセクションのウォーターフォールチャートは、各ページ読み込みステージの応答時間を順番に示しています。チャートには、指定された時間範囲内の特定のメトリクスの平均値が表示されます。ページ読み込みパフォーマンスを向上させるには、特定の問題に基づいてステージの対策を実施することをお勧めします。
読み込み速度の異なるページの分布
パフォーマンス分布セクションには、読み込み速度の異なるページの分布が表示されます。
パフォーマンス積み上げ面グラフタブには、横軸に時間を使用した積み上げ折れ線グラフが表示されます。各時点での読み込み速度の異なるページの分布を確認できます。
図1. パフォーマンス積み上げ面グラフタブ
パフォーマンスサンプル分布タブでは、時間範囲内で特定の読み込み速度を持つサンプルページの割合を確認できます。たとえば、1秒以内に開くことができるページの数と、ロングテールユーザーのサンプルの割合を確認できます。
図2. パフォーマンスサンプル分布タブ
低速ページセッションのトレース
低速ページセッショントレース（TOP20）セクションでは、ページ読み込みプロセス中の静的リソース読み込みのパフォーマンスウォーターフォールチャートが提供されます。このセクションでは、ページのパフォーマンスデータに基づいて、ページリソースの読み込み状況を確認できます。これにより、パフォーマンスのボトルネックを早期に特定して処理できます。詳細については、セッショントレーシングをご参照ください。
ページ読み込みパフォーマンスに影響を与える要因
ページはユーザーのブラウザに読み込まれます。読み込み時間は、特定の要因によって決まります。これらの要因には、地理的な場所、ネットワークの状態、ブラウザ、キャリアが含まれます。そのため、ブラウザ監視機能では、地理的分布、端末分布、ネットワーク分布、バージョン分布に関する統計情報が提供されます。これにより、パフォーマンスのボトルネックを特定できます。
図3. 端末分布
図4. ネットワーク状態分布
図5. バージョン分布
パフォーマンスメトリクス
表1. Webページの主要なパフォーマンスメトリクス
報告フィールド | 説明 | 式 | 備考 |
FMP | First Meaningful Paint (FMP)。 | 該当なし | なし |
FPT | FPT。 | responseEnd - fetchStart | このフィールドは、リクエストが開始された時点から、ブラウザが最初のバッチのHTMLドキュメントのバイトの解析を開始する時点までの時間を示します。 |
TTI | Time to Interactive (TTI)。 | domInteractive - fetchStart | このフィールドは、ブラウザがすべてのHTMLドキュメントを解決し、ドキュメントオブジェクトモデル（DOM）を構築した後にリソースの読み込みを開始する時点を示します。 |
Ready | HTMLの読み込みが完了するまでに消費された時間。これは、DOMの構築に消費された時間です。 | domContentLoadEventEnd - fetchStart | JSスクリプトがページ上で同期的に実行される場合、JSスクリプトの実行時間は次の式に基づいて計算できます。JSスクリプトの実行時間 = Ready - TTI。 |
Load | ページが完全に読み込まれるまでに消費された時間。 | loadEventStart - fetchStart | このフィールドは、次の式に基づいて計算できます。Load = FPT + DOM + (Ready - TTI) + Res。 |
FirstByte | サーバーから最初データパケットを受信するまでに消費された時間。 | responseStart - domainLookupStart | なし |
表2. 各フェーズで消費された時間を表すフィールド
報告フィールド | 説明 | 式 | 備考 |
DNS | ドメインネームシステム（DNS）クエリに消費された時間。 | domainLookupEnd - domainLookupStart | なし |
TCP | 伝送制御プロトコル（TCP）接続に消費された時間。 | connectEnd - connectStart | なし |
TTFB | Time to First Byte (TTFB)。リクエストへの応答に消費された時間を示します。 | responseStart - requestStart | TTFBはさまざまな方法で計算できます。ARMSでのTTFBの計算方法の詳細については、Google開発定義をご参照ください。 |
Trans | データ転送に消費された時間。 | responseEnd - responseStart | なし |
DOM | DOM解決に消費された時間。 | domInteractive - responseEnd | なし |
Res | リソースの読み込みに消費された時間。 | loadEventStart - domContentLoadedEventEnd | ページ上のリソースを同期的に読み込むのに消費された時間。 |
SSL | Secure Sockets Layer (SSL) 接続に消費された時間。 | connectEnd - secureConnectionStart | このフィールドは、HTTPSを使用してデータが転送される場合にのみ有効です。 |