ページパフォーマンスはユーザーエクスペリエンスに大きく影響し、ユーザーリテンションの重要な要素です。そのため、フロントエンドパフォーマンスのモニタリングと分析は非常に重要です。
前提条件
フロントエンドアプリケーションを ARMS に接続します。詳細については、「ブラウザ監視の統合概要」をご参照ください。低速なページ読み込みの診断
次の例では、低速なページ読み込みをトラブルシューティングする方法を示します：
-
ARMS コンソールにログインします。左側のナビゲーションウィンドウで、を選択します。
-
[ブラウザ監視] ページで、上部のナビゲーションバーでリージョンを選択し、管理するアプリケーションの名前をクリックします。
- 左側のナビゲーションウィンドウで、を選択します。
- [ページ読み込み時間詳細] および ページ読み込みウォーターフォール図 セクションで主要なパフォーマンスメトリクスを分析し、異常を特定します。
図 1. ページ読み込み時間詳細 
図 2. ページ読み込みのウォーターフォールプロット 
- ページのロード詳細ページ読み込みウォーターフォール図セクションの が高い場合、またはセクションにおける DNS ルックアップ、TCP 接続、SSL 接続の時間が長い場合、ページの読み込みの遅延はネットワークの問題が原因である可能性が高いです。ネットワークを調査する必要があります。
- [ページ読み込み詳細]ページ読み込みウォーターフォール図 セクションのリクエスト応答とコンテンツ転送の時間が長い場合、低速なページ読み込みは低速な API リクエストが原因である可能性があります。さらに調査するには、ステップ 5 に進みます。
- [ページ読み込み詳細]ページ読み込みウォーターフォール図 セクションの DOM 解析とリソースの読み込み時間が長い場合、低速なページ読み込みはフロントエンドリソースの読み込みが遅いことが原因である可能性があります。さらに調査するには、ステップ 6 に進みます。
- 低速な API リクエストを診断します。左側のナビゲーションウィンドウで、を選択します。
- [API リクエスト] タブで、ターゲット API を見つけ、操作 列の 分析 をクリックします。
- API details タブで、Request Details セクションの右上隅にある View Trace をクリックして、フロントエンドで費やされた合計時間とバックエンドアプリケーションのトレースを表示します。
[トレース] タブのテーブルでは、[呼び出しタイプ] が
Frontendのspanは合計時間を表し、[呼び出しタイプ] が のspanはバックエンドアプリケーションの処理時間を表します。[タイムライン]span- バックエンドアプリケーションの処理時間は短いが、合計時間が長い場合は、API リクエストのネットワーク転送時間が長いことを示します。この場合、API details ページで、Request Details セクションの右上隅にある セッションの表示 をクリックして、ネットワークタイプ、リージョン、ブラウザ、デバイス、オペレーティングシステムなどのセッション情報を表示します。
- バックエンドアプリケーションの処理時間が長い場合は、バックエンドサービスのパフォーマンスに問題があることを示します。この場合、メソッドスタック 列の虫眼鏡アイコンをクリックします。次に、メソッドスタック ダイアログボックスで呼び出しスタックを表示して、バックエンドトレースのボトルネックを特定できます。
- 低速なフロントエンドリソースを診断します。左側のナビゲーションウィンドウで、を選択します。
- Access speed ページで、[低速ページセッショントレース (上位 20)] セクションで、低速セッションのページ名をクリックします。
このセクションでは、低速セッションがテーブルに一覧表示されます。テーブルには、[ページ]、[セッション ID]、[ブラウザ]、[完全読み込み時間 (ms)]、および [開始時間] の列が含まれます。読み込み時間を使用して、ターゲットの低速セッションを特定できます。セッショントレース ページで、[ページリソース読み込みのウォーターフォール] セクションでは、低速なページ読み込みの原因となったリソースの詳細を表示できます。
詳細情報
- ページ速度：ページ読み込みメトリクスと、ARMS がそれらをどのように測定するかについて説明します。
- ARMS ブラウザ監視による JS エラーの診断：ブラウザ監視を使用して JavaScript エラーをトラブルシューティングする方法について説明します。