5.2 Waterfall分析

Waterfallチャートとは

Networkパネルの右端に表示される横棒グラフ。各リクエストの開始時刻、所要時間、各フェーズの内訳を視覚的に表現する。

チャートの読み方

• 横軸: 時間（ページ読み込み開始からの経過時間）
• 縦軸: リクエスト（発生順に並ぶ）
• バーの長さ: リクエストの所要時間
• バーの色: 各フェーズの内訳

縦線の意味

タイミングフェーズ

リクエストをクリック → Timingタブで各フェーズの詳細を確認できる。

接続フェーズ

リクエスト/レスポンスフェーズ

バーの色の意味

Waterfallのバーは、フェーズごとに色分けされている。

ボトルネックの特定

キューイング時間が長い

原因: ブラウザの同時接続数制限（HTTP/1.1では同一ドメインに6接続）

対策:

• HTTP/2への移行（多重化で接続数制限なし）
• 重要なリソースの優先度を上げる
• 不要なリソースの削減

DNS Lookupが長い

原因: 多数の外部ドメインへのリクエスト

対策:

• 外部ドメインの数を減らす
• DNS プリフェッチ: <link rel="dns-prefetch" href="//example.com">
• リソースの統合・自己ホスト

Initial connectionが長い

原因: 新規TCP接続のオーバーヘッド

対策:

• HTTP/2でマルチプレキシング
• プリコネクト: <link rel="preconnect" href="//example.com">
• Keep-Aliveの適切な設定

TTFBが長い

原因: サーバー側の処理時間が長い

対策:

• サーバーサイドの最適化（データベースクエリ、キャッシュ）
• CDNの利用
• 静的ファイルの事前生成

Content Downloadが長い

原因: ファイルサイズが大きい、または帯域幅が狭い

対策:

• Gzip/Brotli圧縮
• 画像の最適化（WebP、適切なサイズ）
• コードのminify
• 不要なリソースの削除

リクエストの優先度

ブラウザは各リソースに優先度を割り当て、重要なリソースを先に読み込む。

優先度の確認

列ヘッダーを右クリック → 「Priority」を有効にすると、各リクエストの優先度が表示される。

優先度のヒント

fetchpriority属性で優先度を明示的に指定できる。

<!-- 重要な画像の優先度を上げる -->
<img src="hero.jpg" fetchpriority="high">

<!-- 重要でないスクリプトの優先度を下げる -->
<script src="analytics.js" fetchpriority="low"></script>

よくあるパターン

階段状（良い）

リソースが順次読み込まれ、並列度が高い状態。HTTP/2で多重化されている場合によく見られる。

直列（悪い）

リソースが1つずつ順番に読み込まれている。原因:

• HTTP/1.1での同時接続数制限
• JavaScriptの同期読み込みがブロックしている
• CSSの@importチェーン

大きな空白期間

Waterfall中に何もリクエストがない期間。原因:

• JavaScriptの実行に時間がかかっている
• レンダリングブロッキングリソース

長いTTFBのリクエスト

緑のバー（Waiting）が極端に長い。サーバー側の問題を示す。

サマリーバー

Networkパネル下部に表示される統計情報。

フィルムストリップ

ページ読み込み中のスクリーンショットを時系列で表示。

有効化

Networkパネルの「Capture screenshots」（カメラアイコン）をクリック。

活用方法

• ユーザーがいつページを見られるようになるか視覚的に確認
• どのリソースの読み込みがレンダリングをブロックしているか特定
• スクリーンショットをクリックすると、その時点のWaterfallにジャンプ

分析のTips

キャッシュを無効化して計測

「Disable cache」を有効にして、初回訪問時の読み込みを再現。

複数回計測する

ネットワーク状況は変動するため、複数回計測して平均を取る。

シークレットモードで計測

拡張機能の影響を排除するため、シークレットモードでテスト。

実際のネットワーク条件でテスト

スロットリングを使って、モバイル回線などの低速環境をシミュレート。詳細は5.3 スロットリングを参照。