Application Real-Time Monitoring Service:低速セッション追跡

前提条件

• ブラウザ監視を統合済みであること。詳細については、「ブラウザ監視の概要」をご参照ください。

• SDK 設定を変更します。

  デフォルトでは、ARMS ブラウザ監視 SDK は静的リソース情報をレポートしません。低速セッション追跡機能を使用するには、SDK の config セクションで sendResource を true に設定します。

  <script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"atc889zkcf@8cc3f6354******",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true};
  with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
  })(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
  </script>

• アプリケーションを再デプロイします。

  アプリケーションを再デプロイすると、ページの onload イベントがトリガーされたときに静的リソース情報がレポートされます。これにより、ARMS のブラウザ監視を使用して、ページの読み込みが遅い問題を迅速に特定できます。

エントリポイント

1. ARMS コンソールにログインします。左側のナビゲーションウィンドウで、ブラウザ監視 > ブラウザ監視を選択します。

2. ブラウザ監視ページで、上部のナビゲーションバーでリージョンを選択し、管理したいアプリケーションの名前をクリックします。

3. 左側のナビゲーションウィンドウで、アプリケーション > セッショントレースを選択します。

ユースケース：パフォーマンスボトルネックの特定

このセクションでは、ページのパフォーマンスボトルネックを特定する方法を説明します。

1. 左側のナビゲーションウィンドウで、アプリケーション > Access speedを選択します。チャートには、11:00 時点で完全なページ読み込み時間が 36.7 秒であることが示されています。

   

2. Access speedページで、低速ページセッショントレース (TOP20) セクションまでスクロールします。このセクションには、指定した時間範囲内で最も遅い 20 のセッションが一覧表示されます。

   時間範囲を変更するには、ページの右上隅にある時間ピッカーをクリックし、リストから新しい範囲を選択します。

   11:36:46 のセッションでは、ページ読み込み時間が 36.72 秒となっており、このアクセスがページ読み込み時間の急激な増加の原因であることが特定されます。

3. 低速ページセッショントレース (TOP20) セクションで、ページ列のページ名をクリックします。

   低速読み込み詳細ページが開き、静的リソースの読み込みに関するパフォーマンスウォーターフォール図が表示され、パフォーマンスボトルネックを迅速に特定するのに役立ちます。

4. 低速読み込み詳細ページの上部にある ページ情報セクションで、ページの URL、アクセス時間、完全なページ読み込み時間、DOM 解析時間、クライアント IP アドレス、ブラウザ、オペレーティングシステムを確認します。この情報を使用して、問題がネットワークの問題やその他の要因によって引き起こされているかどうかを判断し、的を絞った最適化を行います。

パフォーマンスの問題を特定する他の方法

Access speedページに加えて、セッショントレースページを使用してパフォーマンスの問題を見つけることもできます。

1. 左側のナビゲーションウィンドウで セッショントレースをクリックして セッショントレースページを開きます。このページには、アプリケーションのセッションが一覧表示されます。ユーザー名、ユーザー ID、セッション ID、アクセス IP、ページ URL、ブラウザ、ブラウザのバージョン、ネットワークタイプ、リージョンでセッションをフィルタリングすることもできます。

2. セッション ID 列の ID をクリックして セッション詳細ページを開き、セッションの概要とトレースを表示します。詳細については、「セッショントレース」をご参照ください。

よくある質問

1. リソース読み込みウォーターフォール図で Size が 0 になるのはなぜですか？

   Size データは PerformanceResourceTiming.transferSize から取得されます。読み取り専用の transferSize プロパティは、フェッチされたリソースのサイズをバイト単位で表します。このプロパティは、リソースがローカルキャッシュから取得された場合、またはクロスオリジンリソースである場合に 0 を返します。

   Chrome ブラウザで F12 キーを押して開発者ツールを開きます。Network タブの Disable cache チェックボックスが選択されていない場合、transferSize の値は 0 になります。

   ソリューション

   Disable cache チェックボックスを選択します。これにより、transferSize の値が正しくレポートされるようになります。

   ▶ 1: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, …}
   ▶ 2: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, …}
   ▶ 3: PerformanceResourceTiming {initiatorType: "link", nextHopProtocol: "h2", workerStart: 0, …}
   ▼ 4: PerformanceResourceTiming
       connectEnd: 410.7099999964703
       connectStart: 410.7099999964703
       decodedBodySize: 232002
       domainLookupEnd: 410.7099999964703
       domainLookupStart: 410.7099999964703
       duration: 195.52999999723397
       encodedBodySize: 59637
       entryType: "resource"
       fetchStart: 410.7099999964703
       initiatorType: "script"
       name: "https://g.alicdn.com/cm-design/arms/1.2.81/scripts/arms/nls/messages_zh.js"
       nextHopProtocol: "h2"
       redirectEnd: 0
       redirectStart: 0
       requestStart: 514.6799999929499
       responseEnd: 606.2399999937043
       responseStart: 562.94999999227
       secureConnectionStart: 410.7099999964703
     ▶ serverTiming: []
       startTime: 410.7099999964703
       transferSize: 60043
       workerStart: 0
     ▶ __proto__: PerformanceResourceTiming
       transferSize: 60043
       workerStart: 0
     ▶ __proto__: PerformanceResourceTiming

2. リソース読み込みウォーターフォール図で Time が 0 になるのはなぜですか？

   Time データは PerformanceResourceTiming.duration から取得されます。ウォーターフォール図で静的リソースの読み込みを表示すると、場合によって Time の値が 0 になります。これは、リクエストがキャッシュにヒットし、max-age を使用する長期キャッシュポリシーによってコントロールされるためです。

   ソリューション

   Chrome ブラウザで F12 キーを押して開発者ツールを開きます。Network タブの Disable cache チェックボックスを選択してページをリフレッシュします。これにより、ネットワークリクエストにかかった時間が表示されるようになります。

3. 多くの時間関連の戻り値が 0 になるのはなぜですか？

   多くの時間関連の API 値が 0 であることに気づくかもしれません。これは、同一オリジンポリシーにより、クロスオリジンリソースのタイミング情報が 0 に設定されるために発生します。これは主に次のプロパティに影響します：

   • redirectStart

   • redirectEnd

   • domainLookupStart

   • domainLookupEnd

   • connectStart

   • connectEnd

   • secureConnectionStart

   • requestStart

   • responseStart

   ソリューション

   レスポンスヘッダーに Timing-Allow-Origin ヘッダーを追加します。例：Timing-Allow-Origin: *。

4. API 読み込みウォーターフォール図はどの期間を表しますか？

   API 読み込みウォーターフォール図は、次の期間に対応します：

   • 開始時刻：ページが読み込みを開始した時刻

   • 終了時刻：完全なページ読み込み時間の 1 分後

   API 読み込みウォーターフォール図は、ページの読み込みプロセス中に行われたすべての API リクエストを可視化します。

5. API 読み込みウォーターフォール図の持続時間が、ページリソース読み込みウォーターフォール図の持続時間と異なるのはなぜですか？

   API 読み込みウォーターフォール図の持続時間は、ページリソース読み込みウォーターフォール図よりもわずかに長くなる場合があります。この違いは、値の計算方法が異なるために発生します。API チャートはリクエスト送信からレスポンス受信までを測定するのに対し、ページリソースチャートはブラウザの performance.getEntriesByType('resource') API を使用します。

   このわずかな時間の違いは、パフォーマンスボトルネックの特定能力には影響しません。

6. API 読み込みウォーターフォール図のタイムラインの開始時刻は何を表しますか？

   API ウォーターフォール図のタイムラインの開始時刻は、API リクエストが開始された時刻とページの fetchStart 時刻との差です。このタイムラインは、ページの読み込みプロセス中における API リクエストの開始点と持続時間を示します。

詳細情報

• ページ速度

• ブラウザ監視のよくある質問