AIを使用して英語から翻訳されました
この記事はAI技術を使用して翻訳されています。正確性を維持するよう努めていますが、一部の詳細が元のテキストと完全に一致しない場合があります。情報に不明点がある場合は、英語版をご参照ください。
Session Replayでリプレイを視聴する際、Network Detailsはユーザー体験のフリクションの潜在的な原因（遅いまたは失敗しているリクエストなど）を特定するのに役立ちます。
Network Detailsのウォーターフォールチャートは、ウェブページの読み込みに関連するネットワークトラフィックを時系列で表現したもので、ブラウザが送信するすべてのHTTPリクエストおよびページビュー中に行われるすべての追加リクエストを含みます。
セッションのパフォーマンスを分析する2つの方法：
- Network Detailsチャートの探索：タイミングの内訳、HTTPヘッダー、リクエストレベルの詳細を含む完全な技術データにアクセス
- Network Details Summary（AI主導）：技術的な専門知識なしでわかりやすいインサイトと優先順位付けされた推奨事項を取得
主なユースケース
最も一般的なユースケースのいくつかと、それぞれの実行方法について詳しく学びましょう：
ユーザーのフリクションやフラストレーションの根本原因を発見する
リプレイを視聴しているときに、ユーザーのフラストレーション（レイジクリック、長時間待機、期待通りに動作しないインターフェースなど）を観察することがあります。
Network Details機能を使用して、このフラストレーションの根本原因を発見し、その時点で影響を与えている可能性のある関連リクエストを特定できます。
ユースケースの実行方法
フラストレーションを観察した瞬間にSession Replay Playerを一時停止するか、イベントストリーム内の特定のフリクションイベント（例：レイジクリック）をクリックします。
次に、Network Detailsを開き、同じ時間帯に発生しているリクエストを確認します（縦のバーはNetwork DetailsとSession Replay Player間で同期されています）。
Network Detailsは、タグが読み込まれる前にエラーが発生したかどうかを確認するのにも役立ちます。この場合、エラーはタグによってキャプチャされません。Network Detailsを使うことで、タグが読み込まれる前のすべてのリソースイベントを観察できます。
エラーや遅いリクエストがユーザー体験に与える影響を確認する
Network Detailsを確認することで、ユーザーの体験に潜在的な影響を特定できます。JSやAPIのエラーは影響を及ぼす可能性があり、通常は続くはずの他のリクエストが消えたり、新たなリクエストが送信されたりすることがあります（例えば、エラーを収集するためなど）。
Network Detailsを使用することで、技術チームはエラーの影響をより正確に評価できます。
ユースケースの実行方法
カルーセル読み込みスクリプトでエラーが発生した場合、Network Detailsを調べるとカルーセルの画像が読み込まれていないことがわかるかもしれません。
サードパーティのプロダクト推薦APIで500エラーが発生した場合、Network Detailsを調べると、推奨された商品の価格を取得するためのファーストパーティのプロダクト情報APIへの後続の呼び出しが送信されていないことがわかるかもしれません。
Network Detailsを開いた後、失敗しているか非常に時間がかかっているものを確認できます。その後、Session Replay Playerで関連する瞬間を再生して、ユーザー体験にどのような影響があったかを確認し、技術チームとさらに調査するかどうかを判断できます。
ページの読み込みに悪影響を与えるリソースを理解する
ページの読み込み時間（Largest Contentful Paint指標（LCP）など）を改善するのは、何を改善すべきかわからないと骨が折れます。
Network Details機能を使えば、ページの読み込み時間を延ばしているリソースを簡単に確認できます。
ユースケースの実行方法
LCP値が2.5秒未満になったことが一度もないユーザーのセグメントを作成します。次に、このセグメントをSession Replayで使用して、そのようなセッションの例を確認します。
ページビューを視聴するとき、Network Detailsを開いてページビューの開始時に読み込まれたリソースを確認します。長い読み込み時間の原因となっているリソースがすぐにわかります。
Network Detailsを探る
Network Detailsウォーターフォールへのアクセス
リプレイを視聴中に、プレイヤーの下部にあるOpen Network Detailsボタンをクリックします。
ウォーターフォールビューのサイズを変更するには、青いバーを上下にドラッグします（下図の赤枠で強調表示）。
タイミング
「Timings」をクリックすると、ページのパフォーマンス指標の表示/非表示を切り替えられます。これらの指標のいずれかにチェックを入れたり外したりして、ウォーターフォールレポートに縦線として表示するかどうかを選択できます。これにより、関連するネットワークトラフィックとともに分析できます。
注：Core Web Vitalsのタイミングは現在利用できません。
カラムのカスタマイズ
「Customize columns」をクリックして、表示したいカラムを並べ替えられます。表示可能なカラムは、URL、Domain、Status、Type、Size、Protocol、Scheme、Time、Initiator Typeです。
注：Status（200、301、404など）カラムはChromeブラウザでのみ利用可能で、セキュリティポリシーによってブロックされていない場合に限ります。
フィルタ
「URL」カラムは「URL filter」フィールドにキーワードを入力してフィルタリングできます。また、「Type」カラムは表示したいコンテンツを選択してフィルタリングできます（例：「All」、「Document」、「Stylesheet」など）。
注：「Websocket」は、Session ReplayのNetwork Detailsウォーターフォールで利用できない唯一のフィルタです。
ウォーターフォール
ウォーターフォールを使用して、すべてのHTTPリクエストの順序付きリストを表示します。
デフォルトで表示される情報は以下の通りです：
- URL：URL（リソースの名前）。名前にホバーすると完全なURLが表示されます。
- ステータス：HTTPステータス（200、301、404など）
- タイプ：コンテンツタイプ
- サイズ：レスポンスサイズ
- 時間軸上のプログレスバー：これはリプレイのタイムラインと同期しており、接続確立からレスポンス受信までの異なるステップの内訳が表示されます。
「Timings」カラムのリクエストにホバーすると、タイミングの内訳と合計タイミングが表示されます。
リプレイ開始前後に始まったリクエスト
Session ReplayはTracking Tagが読み込まれた後にセッションの記録を開始します。Network Detailsのリクエストはページビューの開始時から収集されるため、一部のデータリクエストはリプレイ開始前に行われている可能性があります。
Network Detailsウォーターフォールでは、タイムライン上にリプレイに対応するエリアが斜線の背景で表示されるため、どのリクエストがリプレイ前後に発生したかを理解できます。
Network Details Summaryでパフォーマンスを分析する
Network Details Summaryは Senseの機能です。Generative AIを使用して特定のページビューのネットワークデータをわかりやすい言葉で要約し、何が起きているのか、なぜ重要なのか、次に何をすべきかを迅速に理解できます。
要約はセッション内の単一ページビューに範囲が限定されています。分析対象のURLは要約の上部に表示され、常に正確に何が分析されているかがわかります。
Network Details Summaryの生成方法
- リプレイを開き、プレイヤーの「Network Details」セクションまでスクロールします。
- Network Detailsセクションの上部にある「Summarize Network」ボタンをクリックします。
- 要約がネットワーク詳細の横にある全高パネルで開きます。
以前にSession Replay Summaryを生成していた場合は、 Network Details Summaryに置き換えられます。
Network Details Summaryの理解
要約は2つのセクションに分かれています：
主要なインサイト
ネットワークパフォーマンスの状態をわかりやすく解説し、リクエストのタイミングやユーザー体験への影響について具体的に言及しています。
潜在的な問題
検出された各問題には以下が含まれます：
- 問題を説明する短いラベル
- 関係する指標やユーザーへの影響を含む問題の説明
- 問題を修正するための具体的で実行可能な推奨事項
要約は一度に1つのページ閲覧を対象としています
要約を生成する前に、分析したいページ閲覧に移動してください。
別のページ閲覧に移動した場合は、更新された結果を得るために再度要約をトリガーしてください。
よくある質問
なぜリクエストの転送サイズが表示されないのですか？
これにはいくつかの理由があります：
- リクエストがクロスオリジンのドメインから来ている可能性があります。この場合、サイズを収集できません。
- リクエストがすでにキャッシュにあるため、ユーザーがリソースを読み込んでいない可能性があります。
なぜリクエストのタイミング内訳が表示されないのですか？
リクエストがクロスオリジンのドメインから来ている場合、タイミングの詳細はアクセスできません。さらに、転送サイズなどの特定の情報は収集できません。
合計時間にはリクエストの潜在的なブロック時間が考慮されていることに注意してください。
Session ReplayのNetwork Details機能はシングルページアプリケーション（SPA）で動作しますか？
Session ReplayのNetwork Detailsでは、SPAページのページ閲覧中に読み込まれたリソースを見ることができます。
SPAページは「通常の」ウェブページのように読み込まれないため、特定のリクエスト（例えばドキュメントリクエスト）は表示されません。
さらに、標準のタイミングは人工的なページ閲覧では利用できません。これは自然なページ読み込みのタイミングに関連しているためです。
タイミング内訳で見られるリクエストのブロック時間とは何ですか？
リソースをダウンロードする際、ブラウザは各オリジンごとに開ける接続数に制限があります。そのため、ダウンロード待ちのリソースは接続が利用可能になるまでブロックされます。これがブロック時間です。
リクエストの合計時間にはブロック時間が含まれていることに注意してください。
なぜSession ReplayのNetwork DetailsタイムラインがSession Replayのタイムラインと一致しないのですか？
Session ReplayのNetwork Detailsタイムラインの黒い縦線がSession Replayタイムラインの開始時点ではなく、その前に始まっていることに気づくかもしれません。例えば、リプレイが5秒の時に、Network Detailsの縦線が7秒にある場合があります。
これは、Session Replayがタグがページに読み込まれた瞬間から記録を開始するためです。
しかし、タグが読み込まれる前に発生したNetwork Detailsは収集可能です。
このため、Network Detailsタイムラインの開始はリプレイの開始前に発生したリクエストから始まります。
なぜ一部のリクエストがNetwork Detailsタイムラインに表示されないのですか？
いくつかのリクエストがネットワーク詳細に表示されない理由は以下の通りです：
- タグの開始が遅れ、以前に発生したリクエストを含むバッファを埋めるため（一部のリクエストが欠落することがあります）
- リダイレクトに関するAPIの制限
- iFrameからのリソースは収集できない場合があります。
- ネットワークレベルのリクエストのみがキャプチャ可能であり、Content Security Policy（CSP）によってブロックされたリクエストは表示されません。
- TBCリダイレクション
ヘッダーやペイロードにアクセスできますか？
ブラウザ、ウェブサイト、またはAPIによって課されるセキュリティ制限のため、ヘッダーやペイロードの内容にアクセスすることは通常不可能です。
イベントストリームでAPIエラーが表示されているのに、ネットワーク詳細のタイムラインではエラーとしてマークされていません。なぜですか？
これは以下の2つの理由で発生することがあります：
- リプレイで使用されているウェブブラウザがGoogle Chromeではない。
- 利用可能な情報の収集を妨げるCORS制限（Access-Control-Allow-Origin）がある。
ネットワーク詳細サマリーには何が含まれていますか？
AIが分析する内容：
- リクエストのタイミング、サイズ、件数
- HTTPステータスコードとリソースタイプ
- サニタイズされたURL（パス名とホスト名のみ）
- 集計されたページレベルのパフォーマンス統計
決して送信されないもの：
- リクエストまたはレスポンスのヘッダー（クッキーや認証トークンは含まれません）
- リクエストまたはレスポンスの本文内容
- 個人識別情報（ユーザーID、セッションID、IPアドレス）
- ウェブサイトからのユーザー生成コンテンツ