英語からAIを使用して翻訳されました
この記事はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。
セッションリプレイでリプレイを視聴しているとき、ネットワークの詳細を使用すると、ユーザーエクスペリエンスにおける摩擦の潜在的な原因（遅いリクエストや失敗したリクエストなど）を特定できます。
ネットワークの詳細のウォーターフォールチャートは、ウェブページの読み込みに関連するネットワークトラフィックの時間的な表現であり、ブラウザによって送信されたすべてのHTTPリクエストと、ページビュー中に行われたすべての追加リクエストを含みます。
主なユースケース
最も一般的なユースケースとそれぞれの実行に関する提案について詳しく学びましょう：
ユーザーの摩擦やフラストレーションの根本原因を発見する
リプレイを視聴していると、ユーザーのフラストレーション（怒りのクリック、長時間待っているユーザー、期待通りに動作しないインターフェースなど）を観察することがあります。
ネットワークの詳細機能を使用して、このフラストレーションの根本原因を発見し、その瞬間に影響を与える可能性のある関連リクエストを特定できます。
ユースケースの実行方法
フラストレーションを観察した瞬間にセッションリプレイプレーヤーを一時停止するか、イベントストリーム内の特定の摩擦イベント（例：怒りのクリック）をクリックします。
次に、ネットワークの詳細を開き、同じ時間に発生しているリクエストを確認します（縦のバーはネットワークの詳細とセッションリプレイプレーヤーの間で同時に同期されています）。
ネットワークの詳細は、タグが読み込まれる前にエラーが発生したかどうかを確認するのにも役立ちます。この場合、エラーはタグによってキャプチャされません。ネットワークの詳細を使用すると、タグが読み込まれる前のすべてのリソースイベントを観察できます。
エラーや遅いリクエストがユーザーエクスペリエンスに与える影響を確認する
ネットワークの詳細を確認することで、ユーザーのエクスペリエンスに対する潜在的な影響を特定できます。JSやAPIのエラーは、通常続くはずの他のリクエストが消失したり、新しいリクエストが送信されたりする可能性があります（例えば、エラーを収集するために）。
ネットワークの詳細を使用することで、技術チームはエラーの影響をより良く評価できます。
ユースケースの実行方法
カルーセルの読み込みスクリプトでエラーが発生した場合、ネットワークの詳細を調べるとカルーセル画像が読み込まれていないことが示されるかもしれません。
サードパーティ製品推奨APIで500エラーが発生した場合、ネットワークの詳細を調べると、推奨された製品の価格を取得するためのファーストパーティ製品情報APIへのその後の呼び出しが送信されていないことが示されるかもしれません。
ネットワークの詳細を開いた後、失敗したものや非常に長いものを確認できます。その後、セッションリプレイプレーヤーで関連する瞬間を視聴して、ユーザーエクスペリエンスにどのように影響したかを確認し、技術チームとさらに調査することを決定できます。
ページの読み込みに悪影響を与えるリソースを理解する
ページの読み込み時間（例えば、Largest Contentful Paintメトリック（LCP））を改善することは、何を改善すればよいか分からないと面倒です。
Network Details機能を使用すると、ページの読み込み時間を増加させているリソースを簡単に確認できます。
ユースケースの実行方法
LCP値が2.5秒未満になったことがないユーザーのセグメントを作成できます。次に、このセグメントをSession Replayで使用して、そのようなセッションの例を確認します。
ページビューを見ているときに、Network Detailsを開き、ページビューの最初に読み込まれたリソースを確認します。長い読み込み時間を引き起こしているリソースをすぐに確認できます。
Network Detailsのウォーターフォールの概要
Network Detailsのウォーターフォールにアクセスする
リプレイを見ているときに、プレーヤーの下部にあるOpen Network Detailsボタンをクリックします。
ウォーターフォールビューのサイズを変更するには、青いバーを上下にドラッグします（下の赤でハイライトされています）。
タイミング
'タイミング'をクリックして、ページのパフォーマンスメトリックを表示/非表示にします。これらのメトリックのいずれかにチェックを入れたり外したりして、ウォーターフォールレポートに垂直線として表示するかどうかを選択できます。これにより、関連するネットワークトラフィックと共に分析できます。
なお、Core Web Vitalsのタイミングは現在利用できません。
列のカスタマイズ
'列のカスタマイズ'をクリックして、表示したい列を並べ替えます。表示する項目を選択できます：URL、ドメイン、ステータス、タイプ、サイズ、プロトコル、スキーム、時間、イニシエータータイプ。
なお、ステータス（200、301、404など）列は、Chromeブラウザでのみ利用可能で、セキュリティポリシーによってブロックされていない場合に限ります。
フィルター
'URL'列をフィルタリングするには、'URLフィルター'フィールドにキーワードを入力するか、'タイプ'列をフィルタリングして表示したいコンテンツを選択します（例：'すべて'、'ドキュメント'、'スタイルシート'など）。
なお、'Websocket'はSession ReplayのNetwork Detailsウォーターフォールでは利用できない唯一のフィルターです。
ウォーターフォール
ウォーターフォールを使用して、すべてのHTTPリクエストの順次リストを表示します。
デフォルトで表示される情報には以下が含まれます：
- URL：リソースの名前であるURL。名前にマウスを合わせると、完全なURLが表示されます。
- ステータス：HTTPステータス（200、301、404など）
- タイプ：コンテンツタイプ
- サイズ：レスポンスサイズ
- 時間軸上のプログレスバー：これはリプレイのタイムラインと同期しており、接続の確立からレスポンスの受信までのさまざまなステップの内訳が表示されます。
'タイミング'列のリクエストにマウスを合わせると、タイミングの内訳と合計タイミングが表示されます。
リプレイ開始前後のリクエスト
セッションリプレイは、トラッキングタグが読み込まれるとセッションの録画を開始します。ネットワーク詳細のリクエストは、ページビューの開始時から収集されます。したがって、リプレイの開始前にいくつかのデータリクエストが行われている可能性があります。
ネットワーク詳細のウォーターフォールでは、タイムライン上にハッチ背景でリプレイに対応するエリアが表示され、リプレイの前後にどのリクエストが発生したかを理解できます。
よくある質問
なぜリクエストの転送サイズが見えないのですか？
これにはいくつかの理由があります：
- リクエストがクロスオリジンドメインから来ている可能性があります。この場合、サイズを収集できません。
- リクエストがすでにキャッシュにあるため、ユーザーがリソースを読み込んでいない可能性があります。
なぜリクエストのタイミングの内訳が見えないのですか？
リクエストがクロスオリジンドメインから来ると、タイミングの詳細にアクセスできません。さらに、転送サイズなどの特定の情報を収集できません。
合計時間は、リクエストの潜在的なブロッキング時間を考慮に入れています。
セッションリプレイのネットワーク詳細機能はシングルページアプリケーション（SPA）で機能しますか？
セッションリプレイのネットワーク詳細を使用すると、SPAページのページビュー中に読み込まれたリソースを見ることができます。
SPAページは「通常の」ウェブページのように読み込まれないため、特定のリクエスト（ドキュメントリクエストなど）を見ることができません。
さらに、人工的なページビューでは標準のタイミングが利用できません。これは自然なページ読み込みタイミングに関連しています。
タイミングの内訳で見ることができるリクエストのブロッキング時間とは何ですか？
リソースをダウンロードする際、ブラウザは各オリジンに対して開いている接続の数が限られています。したがって、ダウンロードを待っているリソースは接続が利用可能になるまでブロックされます。これがブロッキング時間です。
リクエストの合計時間にはブロッキング時間が含まれています。
なぜセッションリプレイのネットワーク詳細タイムラインがセッションリプレイのタイムラインと一致しないのですか？
セッションリプレイのネットワーク詳細タイムラインの黒い縦線が、セッションリプレイのタイムラインの開始時ではなく、その前に始まることに気付くかもしれません。たとえば、リプレイが5秒の場合、ネットワーク詳細タイムラインの縦線が7秒にあることに気付くかもしれません。
これは、セッションリプレイがタグがページに読み込まれるとすぐに録画を開始するためです。
ただし、タグが読み込まれる前に発生したネットワーク詳細を収集することができます。
これが、ネットワーク詳細タイムラインの開始がリプレイの開始前に発生したリクエストから始まる理由です。
なぜ一部のリクエストがネットワーク詳細のタイムラインに表示されないのですか？
一部のリクエストがネットワーク詳細に表示されない理由はいくつかあります：
- タグが遅れて開始し、前に発生したリクエストを含むバッファを埋める可能性があるため（そのため、一部のリクエストが欠落することがあります）
- リダイレクトに関するAPIの制限
- 一部のリソースはiFrameから来るため、収集できません。
- ネットワークレベルのリクエストのみがキャプチャできるため、コンテンツセキュリティポリシー（CSP）によってブロックされたリクエストは表示されません。
- TBCリダイレクション
ヘッダーやペイロードにアクセスできますか？
ヘッダーやペイロードの内容へのアクセスは、通常、ブラウザ、ウェブサイト、またはAPIによって課せられたセキュリティ制限のため不可能です。
イベントストリームにAPIエラーが表示されますが、ネットワーク詳細のタイムラインではエラーとしてマークされていません。なぜですか？
これは2つの理由で発生する可能性があります：
- リプレイに使用されているウェブブラウザがGoogle Chromeではない。
- 収集可能な情報を妨げるCORS制限（Access-Control-Allow-Origin）がある。