ページの読み込み速度の低下は、ユーザーエクスペリエンスに大きな影響を与え、ユーザーロイヤルティを左右します。そのため、フロントエンドのパフォーマンス監視と分析は特に重要です。このトピックでは、Application Real-Time Monitoring Service (ARMS) ブラウザ監視機能を使用してページの読み込み速度の低下を診断する方法について説明します。
前提条件
アプリケーションが ARMS ブラウザ監視機能によって監視されていること。詳細については、「Web アプリケーションの監視」を参照してください。
ページの読み込み速度の低下の診断
次の例は、トラブルシューティング手順を示しています。
ARMS console にログオンします。左側のナビゲーションペインで、 を選択します。
ブラウザ監視 ページで、上部のナビゲーションバーでリージョンを選択し、管理するアプリケーションの名前をクリックします。
左側のナビゲーションペインで、 を選択します。
ページ読み込み時間詳細 セクションと ページ読み込みウォーターフォールプロット セクションで、主要なパフォーマンスメトリックの値が正常かどうかを確認します。
図 1. ページ読み込み時間詳細セクション
図 2. ページ読み込みウォーターフォールプロットセクション
ページ読み込み時間詳細 セクションの First Paint Time パラメータの値、または ページ読み込みウォーターフォールプロット セクションの DNS Lookup、TCP Connection、SSL Connection パラメータの値が大きい場合、ページの読み込み速度の低下はネットワークが原因である可能性があります。この場合は、ネットワークを確認してください。
ページ読み込み時間詳細 セクションの DOM Ready パラメータの値、または ページ読み込みウォーターフォールプロット セクションの Time to First Byte(TTFB) および Content Download パラメータの値が大きい場合、ページの読み込み速度の低下は API リクエストの遅延が原因である可能性があります。この場合は、手順 4 を実行して問題を診断します。
ページ読み込み時間詳細 セクションの Fully Loaded Time パラメータの値、または ページ読み込みウォーターフォールプロット セクションの DOM Parsing および Resource Download パラメータの値が大きい場合、ページの読み込み速度の低下はフロントエンドリソースの読み込みの遅延が原因である可能性があります。この場合は、手順 5 を実行して問題を診断します。
左側のナビゲーションペインで、 を選択します。
API リクエスト タブで、表示する API を見つけて、分析操作 列の をクリックします。
API 詳細 タブで、呼び出しトレースの表示リクエスト詳細 セクションの右上隅にある をクリックして、フロントエンドの全体的な応答時間とバックエンドアプリケーションのコールシーケンス図を表示します。
バックエンドアプリケーションの処理時間は短いのに全体的な応答時間が長い場合は、API リクエストがサーバーに送信されてからデータがフロントエンドに返されるまでの時間が長くなっています。この場合は、セッションの表示リクエストの詳細API 詳細 タブの セクションの右上隅にある をクリックします。次に、ネットワーク接続タイプ、リージョン、ブラウザ、デバイス、オペレーティングシステムなどのアクセス情報を表示します。
バックエンドアプリケーションがアクセスリクエストの処理に時間がかかる場合は、バックエンドの処理パフォーマンスが低下しています。この場合は、詳細 列の虫眼鏡アイコンをクリックします。詳細 ダイアログボックスで、バックエンドトレースのどの部分が時間のかかる原因となっているかを確認して、問題を特定します。
左側のナビゲーションペインで、 を選択します。
低速ページ セッショントレース(上位20)ページ速度 ページの セクションで、低速セッションのページ名をクリックします。
ページリソース読み込みウォーターフォールセッショントレース ページの セクションで、ページの読み込み速度の低下を引き起こしているリソースの詳細を表示できます。