シンセティック・モニタリングでのWaterfallの使い方

はじめに

ウォーターフォール・チャートは、ページがレンダリングされる際に読み込まれるすべてのリソースを表示し、パフォーマンスの問題を診断し、読み込み時間を最適化するのに役立ちます。迅速なAI主導のインサイトが必要な場合でも、詳細な技術的分析が必要な場合でも、ウォーターフォールのデータはページの遅延原因と優先的に修正すべき点を理解するのに役立ちます。

ウォーターフォールで分析できる内容：

• ページ読み込みパフォーマンス：遅い読み込みリソース、レンダーブロックするスクリプト、ユーザー体験に影響を与えるボトルネックを特定
• リソースのタイミング：各アセット（画像、JavaScript、スタイルシート、サードパーティツール）がいつ読み込まれ、どれくらい時間がかかるかを確認
• サードパーティの影響：外部スクリプトやサービスがページパフォーマンスに与える影響を理解
• ネットワークリクエスト：HTTPリクエスト、応答時間、接続の詳細を分析ウォーターフォール・チャートは、ウェブページの読み込みが遅い理由を理解し、優先的に修正すべき点を特定するのに役立ちます。

分析方法は2通りあります：

• ウォーターフォール・サマリー（AI主導）：技術的な専門知識がなくてもわかりやすい言葉でインサイトと優先順位付けされた推奨事項を取得
• 詳細なウォーターフォール・チャート：タイミングの内訳、HTTPヘッダー、リクエストレベルの詳細を含む完全な技術データにアクセス

インタラクティブなウォーターフォールは、Synthetic Monitoringレポート（単独および比較レポート）およびSynthetic Monitoringのシナリオ機能の詳細なステップレポート内でアクセスできます。

ウォーターフォール・サマリーでパフォーマンスを分析

ウォーターフォール・サマリーとは？

ウォーターフォール・サマリーは、生成AIを使用して複雑なネットワーク・ウォーターフォール・チャートをわかりやすく非技術的な言葉に翻訳し、技術的なウォーターフォールの専門知識がなくてもパフォーマンスの問題を迅速に特定し、伝えるのに役立ちます。

ウォーターフォール・サマリーを使うと、以下が可能です：

• 技術的なチャートを解釈せずにパフォーマンスの問題を理解
• 最初に修正すべき最大の問題を迅速に特定
• チームにパフォーマンスの問題を明確に説明
• 優先順位付けに関するデータに基づいた決定を行う

重要：ウォーターフォール・サマリーにアクセスするには、AIスケジュールがContentsquareとの契約に含まれているか、アカウントの管理者ユーザーによって承認されている必要があります。Sense機能のアクティベート方法について詳しくはこちら。

ウォーターフォール要約の生成

任意のシンセティック・モニタリング・レポートからウォーターフォール要約を生成する方法は2つあります：

レポートページから：

1. 表示したいレポートの「表示」をクリックします。
    
2. レポートをスクロールダウンします。

3. 「ウォーターフォールを要約」をクリックしてウォーターフォール要約のサイドパネルを開きます。

   

ウォーターフォールチャートを表示している場合

1. シンセティック・モニタリング・レポートを開き、「ウォーターフォールセクション」に移動します。

2. ページ上部の「ウォーターフォールを要約」をクリックしてウォーターフォール要約のサイドパネルを開きます。

   

AI生成の説明と技術的詳細の両方を提供する要約がサイドパネルに表示されます。 

ウォーターフォール要約の理解

各要約は、パフォーマンスの問題を理解し対応するために、3つの主要なセクションに整理されています：

• 主要なインサイト：ロード時間、JavaScriptタスク、ユーザー体験に影響を与えるリソースの問題など、主なパフォーマンス検出結果のわかりやすい内訳。
• 潜在的な問題：大きなJavaScriptバンドル、高いリクエスト数、レンダーブロックリソースなど、検出されたパフォーマンスのボトルネックに関する情報。
• 推奨事項：特定された各問題に対処するための実行可能な提案で、詳細を展開可能。

ヒント：要約をコピーして他のチームメンバーと共有できます。 
 

詳細なウォーターフォールチャートでパフォーマンスを分析する

チャートの内訳

タイミング

タイミングセクションには、ページのすべてのパフォーマンス指標の値がリストされています。ウォーターフォール上に表示したい指標（縦線として）を選択し、関連するネットワークトラフィックとともに分析できます。

Largest Contentful Paint（LCP）を選択すると、LCPが画像によってトリガーされた場合に関連するリクエストが表示されます。

長時間タスク

長時間タスク（ブラウザが50ms以上ビジー状態）とTotal Blocking Timeの値。Max Potential FIDに関連する長時間タスクは異なる色でハイライトされています。

ウォーターフォール

ウォーターフォールは、すべてのHTTPリクエストの順次リストを表示します。

デフォルトでは、レポートは以下を表示します：

• HTTPメソッド（ほとんどの場合はGETまたはPOST）。
• URL（名前にホバーすると完全なURLが表示されます）
• HTTPステータス（200、301、404など）
• レスポンスサイズ
• 接続確立からレスポンス受信までの異なるステップの内訳を含む、時間軸上の配置

ウォーターフォールの詳細値

リクエストの表現にホバーすると、リクエストおよびレスポンス時間のマイルストーンに関する詳細な値が得られます。

• DNS Lookup: DNS解決に必要な時間。
• Connecting: HTTP通信に必要なTCP（および場合によってはSSL）接続を確立するのにかかる時間。
• Waiting: HTTPリクエスト送信からレスポンス受信開始までの時間。
• Receiving: レスポンスの受信開始から終了までの時間。

インターネットユーザーの状況を現実的に再現するために、Synthetic MonitoringはDNS Lookupを除くすべてのステップにレイテンシを注入します。したがって、観測される遅延はすべて、テストに設定された接続の性質に依存します。特にConnectingステップは、TCP接続およびSSL接続（該当する場合）の両方でレイテンシの影響を受けます。

DNS LookupおよびConnectingのステップは常に存在するわけではないことにご注意ください。DNS解決はドメインごとに一度だけ必要であり、既存のTCP接続が使用されない場合にのみTCP（および該当する場合はSSL）接続が必要です。

リソースに関する詳細情報を見る

任意のラインをクリックすると、特定のリクエスト/レスポンスに関する詳細情報が表示されます。

リクエストの完全なURL、関連するIPアドレス、リクエストのHTTPヘッダー、そして最後にレスポンスのHTTPヘッダーを確認できます。

フィルタとカスタマイズ

• 「カラムのカスタマイズ」をクリックして表示設定をカスタマイズします。

• 「URLフィルタ」を使用して、完全なURLに選択したテキストを含むリクエストのみを表示します

リクエストはタイプ（Script、XHRなど）によってもフィルタリングできます。

これら2種類のフィルタは独立しても、組み合わせて使用することも可能です。ウォーターフォールの左下のエリアには、フィルタリングされた要素の数と重みがリクエストの合計に対して表示されます。

任意のカラム名をクリックすると、その情報の値に基づいてウォーターフォールの要素を並べ替えられます。最初のクリックで昇順に並べ替えられ、2回目のクリックで降順に並べ替えられます。

ヒント: サードパーティのコンテンツ（外部依存関係）を調査する良い方法は、Domain と Initiator のカラムを表示し、それらのカラムでソート機能を使用することです。