Resource Waterfall は、ページが行ったすべてのリクエストをタイムライン上に描画します。各バーは、FCP、LCP、DOMContentLoaded、および読み込みのマーカーを使用して、実際のフェーズ (キュー、DNS、TCP、TLS、待機、ダウンロード) に分割されます。
ページが遅いと感じるとき、疑問は常に同じです。「何を待っているのか?」ブラウザ自体の答えは [ネットワーク] パネルにあります。つまり、DevTools を開いて、検査しているページにドロワーをドッキングし、読み込みの開始をキャッチするために再読み込みします。
Resource Waterfall は、そのタイムラインをページの横のフローティング パネルに配置します。すべてのリクエストは、開始時刻によって配置されたバーとして表示され、実際の経過時間 (キューに入れられているか停止しているか、DNS ルックアップ、TCP 接続、TLS ハンドシェイク、サーバーの待機、ダウンロード) によってセグメント化されています。長い青色のセグメントは遅いサーバーです。緑色の長いものは太いヤスリです。長い灰色のものは、リクエストが順番を待っていることを意味します。この区別によって、何を修正する必要があるかが決まります。
タイムライン上の破線のマーカーには、最初のコンテンツフル ペイント、最大のコンテンツフル ペイント、DOMContentLoaded およびロードが表示されるため、どのリクエストがユーザーに何も表示される前に終了し、どのリクエストがその後も継続しているかを確認できます。レンダリング ブロッキング リソースとキャッシュ ヒットは各行にフラグが付けられ、単一のブロッキング フィルターによりリストを実際に最初のペイントを遅らせているものに絞り込みます。
タイプでフィルターしたり、URL で検索したり、最も遅いまたは最大で並べ替えたりして、最悪の犯罪者をすばやく見つけます。任意の行をクリックすると、完全な URL、プロトコル、転送およびデコードされたサイズ、ステータス、完全なフェーズの内訳が表示されます。パネルが開いている間に到着したリクエストは直接ストリーミングされ、JSON のエクスポートによってマイルストーンを含むタイムライン全体がコピーされるため、パフォーマンスの結果をスクリーンショットなしで他の人に渡すことができます。
各バーはキュー、DNS、TCP、TLS、待機、ダウンロードに分割されているため、遅いサーバー、ファット ファイル、キューにあるリクエストはすぐに区別できます。
FCP、LCP、DOMContentLoaded、および読み込みの破線は、ユーザーがコンテンツを表示する前に完了したリクエストと、その後も実行中のリクエストを示します。
ワンクリックすると、最初のペイントを実際に保留しているリソースのリストが縮小され、合計ブロック数が概要バーに表示されます。
キャッシュから提供されるリソースは、謎のゼロバイト行として表示されるのではなく、マークとラベルが付けられるため、キャッシュが実際に機能していることを確認できます。
タイプ (ドキュメント、CSS、JS、画像、フォント、XHR、メディア) で絞り込み、URL で検索するか、最も遅いまたは最大で並べ替えて、最悪の攻撃者に数秒でアクセスします。
マイルストーン、合計、リクエストごとのフェーズを含むウォーターフォール全体を JSON としてコピーし、チケットに添付したり、後の実行と比較したりできます。
レンダリングをブロックするリソースをフィルターして、訪問者と表示されるコンテンツの間に存在する正確なスタイルシートとスクリプトを確認します。
最も遅い順に並べ替えると、分析、フォント、またはチャット プロバイダーがトップに表示され、コードとは関係のない長い待機フェーズが表示されます。
フェーズ カラーを読んでください。待機に費やされる時間はバックエンドまたは CDN の問題であり、ダウンロードに費やされる時間はファイル サイズの問題です。修正方法はそれぞれ異なります。
リロードして、アセットがキャッシュから取得されていることと、転送サイズがデコードされたサイズよりもはるかに小さいことを確認し、圧縮が実際に有効であることを証明します。
タイムラインを JSON としてエクスポートし、チケットに添付すると、次の人はセッションを再現する代わりに同じ数字を見ることができます。
DevSuite Pro ドックで Resource Waterfall アイコンをクリックします。ページがこれまでに読み込んだものはすべてタイムラインにすぐに表示されます。
パネルを開いた状態で再ロードして、ドキュメント自体やペイント マイルストーンを含む最初のリクエストからの負荷をキャプチャします。
ブロック チップを押してレンダリング ブロック リソースのみを表示するか、js や img などのタイプを選択します。最も遅い順に並べ替え、最悪の違反者を一番上に置きます。
行をクリックすると、完全な URL、プロトコル、サイズ、ステータス、ミリ秒単位のフェーズごとの内訳が表示され、必要に応じて URL をコピーします。
JSON をエクスポートすると、マイルストーンと合計を含む完全なタイムラインがコピーされ、すぐにチケットに貼り付けたり、前後の記録として保存したりできます。
