今回やること
NetworkのWaterfallは、通信の時間軸を表示する場所です。
Waterfallを見ると、何が遅いのか、どの順番で読み込まれているのかが分かります。
Step 1: Networkを開いてリロードする
DevToolsを開き、Networkタブを選びます。
Cmd/Ctrl + Shift + I
その後、ページをリロードします。
Cmd/Ctrl + R
Waterfall列に、各ファイルの読み込み時間が横棒で表示されます。
Step 2: 長い棒を探す
まずは、横に長いリクエストを探します。
よく遅くなるもの:
- 大きい画像
- 外部フォント
- 外部スクリプト
- API通信
- リダイレクト
長い棒がある場合、そのリクエストをクリックして詳細を見ます。
Step 3: SizeとTimeを見る
同じ遅さでも原因は違います。
| 状態 | 考え方 |
|---|---|
| Sizeが大きい | ファイル自体が重い |
| Timeが長い | 通信や待ち時間が長い |
| Sizeは小さいが遅い | サーバ応答や外部接続が遅い可能性 |
画像が数MBあるなら、まず画像最適化を考えます。
Step 4: Timingを見る
リクエストをクリックし、Timingを見ると内訳が分かります。
見る項目:
- Queueing
- Stalled
- DNS Lookup
- Initial connection
- SSL
- Waiting for server response
- Content Download
すべてを暗記する必要はありません。まずは、どこが長いかを見ます。
Step 5: Waitingが長い場合
Waiting for server response が長い場合、サーバが返事をするまで時間がかかっています。
考えること:
- API処理が重い
- DBが遅い
- 外部API待ち
- サーバが遠い
- キャッシュされていない
静的ファイルでは短く、動的APIでは長くなることがあります。
Step 6: Content Downloadが長い場合
Content Download が長い場合、返ってきたファイルのダウンロードに時間がかかっています。
考えること:
- 画像が大きい
- JavaScriptが大きい
- CSSが大きい
- 通信環境が遅い
この場合は、ファイルサイズ削減が効きやすいです。
Step 7: 順番を見る
Waterfallは、読み込み順も分かります。
たとえば、重要な画像が後ろの方で読み込まれていると、ファーストビューの表示が遅く感じます。
確認すること:
- HTMLが先に読まれているか
- CSSがブロックしていないか
- 重要画像が遅れていないか
- 外部スクリプトが先に詰まっていないか
実践メモ: Waterfallは「何が重いか」だけでなく「何が先に読まれているか」を見るための道具です。
まとめ
DevTools Waterfallでは、長いリクエスト、Size、Time、Timing、読み込み順を確認します。
表示が遅い時は、感覚で直す前に、Waterfallで画像、JS、CSS、API、外部リソースのどれが詰まっているかを見ます。
次に読む記事
← 一覧に戻るPR
PR
