すべてのプロダクト
Search

このプロダクト

    :低速セッション追跡

    ドキュメントセンター

    :低速セッション追跡

    最終更新日:Dec 30, 2024

    Application Real-Time Monitoring Service (ARMS) の低速セッション追跡機能は、ページ読み込みプロセス中の静的リソース読み込みのパフォーマンスウォーターフォールチャートを提供します。ページパフォーマンスデータに基づいて、ページリソースの読み込み状況を確認できます。これにより、パフォーマンスのボトルネックをできるだけ早く特定して処理できます。

    前提条件

    重要 静的リソースの読み込みデータは、ページの読み込み中に報告され、大量のデータが報告されます。読み込み時間が 8 秒を超える場合は、すべてのデータが報告されます。読み込み時間が 2 秒から 8 秒の場合は、データの 5% がサンプリングされて報告されます。読み込み時間が 2 秒未満の場合は、データは報告されません。アプリケーションで高いページパフォーマンスが必要な場合は、静的リソースの読み込みに関するデータレポートを有効にしないことをお勧めします。
    • アプリケーションが ARMS フロントエンド監視に接続されていること。詳細については、ブラウザ監視の概要 を参照してください。
    • ARMS フロントエンド監視 SDK の構成が変更されていること。

      デフォルトでは、SDK はページに読み込まれた静的リソースに関するデータを報告しません。このようなデータを取得し、低速セッション追跡を有効にするには、SDK の リソースを送信trueconfig ファイルで パラメータを に設定します。次のコードは、SDK 構成の例を示しています。

      <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}; // sendResource パラメータを true に設定します。
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>
    • アプリケーションが再デプロイされていること。

      アプリケーションが再デプロイされると、ページで onload イベントがトリガーされたときに、現在のページに読み込まれた静的リソースに関するデータが報告されます。その後、ARMS フロントエンド監視機能を使用して、ページの読み込みが遅い問題を特定できます。

    セッション追跡ページに移動する

    1. ARMS console にログインします。左側のナビゲーションペインで、ブラウザ監視 > Browser Monitoring を選択します。
    2. ブラウザ監視 ページで、上部のナビゲーションバーでリージョンを選択し、管理するアプリケーションの名前をクリックします。
    3. 左側のナビゲーションペインで、アプリケーション > セッション追跡 を選択します。

    ユースケース：ページパフォーマンスのボトルネックを特定する

    次の例は、ページパフォーマンスのボトルネックを特定する方法を示しています。

    1. 左側のナビゲーションペインで、アプリケーション > ページ速度 を選択します。結果は次の図のようになります。11:00 にページ全体の読み込み時間が 36.7 秒に達しています。
      Page Load Time Details section
    2. ページ速度 ページで、右側のスクロールバーをドラッグして 低速ページセッション追跡 (上位 20) セクションに移動します。このセクションには、指定された期間内でページの読み込み速度が最も遅い上位 20 のセッションがリストされます。

      指定された期間を変更するには、このセクションの右上隅にある時計アイコンをクリックして値を選択します。

      次の図に示すように、11:36:46 にセッションのページ読み込み速度が 36.72 秒に達しています。このアクセスは、ページ読み込み時間が急激に増加した直接の原因です。

      Slow Page Session Trace (TOP20) section
    3. 低速ページセッション追跡 (上位 20) セクションで、ページ 列の関連ページの名前をクリックします。

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

      Page Resource Loading Waterfall section
    4. ページ情報低速読み込みの詳細 ページの上部にある
      Slow Loading Details page
      セクションで、クライアント IP アドレス、ブラウザ、オペレーティングシステムなどのアクセス情報を表示します。これは、原因をさらに特定し、ボトルネックのトラブルシューティングを行うのに役立ちます。たとえば、ボトルネックがネットワークの状態によって引き起こされているかどうかを判断できます。

    パフォーマンスのボトルネックを特定する別の方法

    ページ速度 ページに加えて、セッション追跡 ページでパフォーマンスのボトルネックを特定することもできます。

    1. 左側のナビゲーションペインで、セッション追跡 を選択します。セッション追跡 ページで、アプリケーションのすべてのセッションを表示します。ユーザー名、ユーザー ID、セッション ID、IP アドレス、ページ URL、ブラウザ、ブラウザのバージョン、ネットワーク接続タイプ、リージョンなどの条件に基づいてセッションをフィルタリングできます。
      ARMS Browser Monitoring: Session Tracking - Sessions
    2. セッション ID 列で、詳細を表示するセッションの ID をクリックします。セッションの詳細 ページで、セッションの概要とセッション追跡を表示できます。詳細については、セッション追跡 を参照してください。

    FAQ

    1. リソース読み込みのウォーターフォールチャートで サイズ パラメータの値が 0 になるのはなぜですか？

      サイズは、PerformanceResourceTiming.transferSize インターフェースによって取得されます。transferSize パラメータの読み取り専用属性は、抽出されたリソースのサイズを 8 ビット単位で示します。リソースがオンプレミスのキャッシュから取得された場合、またはクロスオリジンリソースである場合、このパラメータの戻り値は 0 になります。

      Chrome ブラウザを開き、F12 キーを押して開発者ツールパネルを開きます。ネットワーク タブの キャッシュを無効にする が選択されていない場合、transferSize パラメータの値は 0 になります。

      Disable Cache Disabled

      解決策

      キャッシュを無効にする を選択します。すると、transferSize パラメータの値が表示されます。
      Transfersize Normal
    2. リソース読み込みのウォーターフォールチャートで 時間 パラメータの値が 0 になるのはなぜですか？

      時間は、PerformanceResourceTiming.duration メソッドによって取得されます。 静的リソース読み込みのウォーターフォールチャートでは、時間 パラメータの値が 0 になることがあります。これは、リクエストが max-age メソッドによって制御される長いキャッシュにヒットするためです。

      解決策

      Chrome ブラウザを開き、F12 キーを押して開発者ツールパネルを開きます。ネットワーク タブの キャッシュを無効にする をクリアし、ページを更新します。すると、ネットワークアクセス時間が表示されます。

    3. 時間パラメータの戻り値が 0 になるのはなぜですか？

      API リクエストによって返される多くの時間関連パラメータの値は、0 になる場合があります。これは、同一オリジンポリシーにより、クロスオリジンリソースを取得する時点が 0 になるためです。次の属性が関係しています。

      • redirectStart
      • redirectEnd
      • domainLookupStart
      • domainLookupEnd
      • connectStart
      • connectEnd
      • secureConnectionStart
      • requestStart
      • responseStart

      解決策

      Timing-Allow-Origin 構成 (例: Timing-Allow-Origin:*) をリソースレスポンスヘッダーに追加します。

    4. API 読み込みのウォーターフォールチャートは、どの時間範囲で API 読み込みの状態を表示しますか？

      次の情報は、API 読み込みのウォーターフォールチャートの時間範囲の開始と終了を示しています。

      • 開始：ページの読み込みが開始された時点
      • 終了：ページが完全に読み込まれた時点 + 1 分

      API 読み込みのウォーターフォールチャートは、ページ読み込み中のリクエストされた API の全体的な状態を示します。

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

      API 読み込みのウォーターフォールチャートの応答時間は、ページリソース読み込みのウォーターフォールチャートの応答時間よりも数ミリ秒長くなります。これは、2 つの値が異なる方法で取得されるためです。API 読み込みのウォーターフォールチャートの応答時間は、API がリクエストを送信した時点からデータが返される時点まで計算されます。ページリソース読み込みのウォーターフォールチャートの API 応答時間は、ブラウザが提供する performance.getEntriesByType('resource') メソッドを呼び出すことによって取得されます。

      数ミリ秒の差は、パフォーマンスのボトルネックのトラブルシューティングには影響しません。

    6. API 読み込みのウォーターフォールチャートのタイムラインの開始はいつですか？

      API 読み込みのウォーターフォールチャートのタイムラインの開始は、API がリクエストを送信した時点とページの fetchStart パラメータの値が返された時点の差です。このタイムラインは、API がページ読み込み中にリクエストを送信した時刻とその応答時間を表示します。

    参考文献