Webサイトが重い、ログインが遅い、ボタンを押しても反応がない…😇
こんなとき、つい「回線が悪いのかな？」「サーバーが落ちてる？」で終わりがちですが、実は原因はけっこう分解できます。
そのときに使えるのが、Chromeに標準で入っている「開発者ツール（DevTools）」です。
難しそうに見えて、見る場所を絞れば初心者でも十分使えます👍
この記事では
「通信がどれだけ走ってるか」
「何が遅いのか」
「どこで止まってるのか」
を、Chromeの画面で“見える化”する方法をまとめます。
はじめに
- Aさん
- このサイト開くの遅すぎる！ネットが原因なのかな…
- Bさん
- ネットかもしれないけど、実は“画像が重い”とか“広告が多い”とか“どこかの通信が失敗して待たされてる”とかもあるよ！
Chromeなら“どの通信に何秒かかったか”が一覧で出るよ😊
1 .まず結論：見るのは「Network」タブだけでOK
開発者ツールは機能が多いですが、今回使うのはほぼ「Network（ネットワーク）」です。
できること
・どんな通信が発生したか一覧
・どれが遅いか
・失敗してる通信があるか
・どこに接続してるか
・通信量が多すぎないか
2 .開発者ツールの開き方3パターン
一番かんたんなのはこれ👇
パターン1：右クリックから
ページの何もない所で右クリック
→「検証」をクリック
パターン2：ショートカット
Windows：F12
Mac：Option + Command + I
パターン3：メニューから
Chrome右上「︙」
→ その他のツール
→ デベロッパーツール
3 .Networkタブの基本操作
開いたら「Network」を押します。
まずONにしたい設定
・左上の丸が赤い状態（録画中）になっているか確認
・「Preserve log」をON（ページ遷移してもログが残る）
・「Disable cache」をON（キャッシュの影響を減らす）
※開発者ツールを開いている間だけ有効
使い方の流れ
1 Networkを開く
2 画面をリロード（F5）
3 一覧に通信がズラッと出る
4 遅いもの・赤いものを探す
4 .見方のコツ：一覧の「重要カラム」だけ読む
Networkの表には色々ありますが、最初はここだけでOKです。
・Status（200 / 301 / 404 / 500 など）
・Type（画像、スクリプト、XHRなど）
・Size（どれくらい重い？）
・Time（何秒かかった？）
ざっくりの目安
・Timeが長いもの → 遅い原因の候補
・Statusが赤や4xx/5xx → エラーの可能性
・Sizeが大きい → 画像や動画が重い可能性
5 .まずチェックしたい「よくある症状」と見えるポイント
ここからは、ありがちな困りごと別に「どこを見るか」を整理します😊
症状A：ページの表示が遅い
チェック
・Timeが長い行を探す
・Typeが「img」「media」「font」などで重いものがないか
・大きい画像が何枚も読み込まれてないか
よくある原因
・画像が大きい
・外部のタグ（解析や広告）が遅い
・フォント読み込みが遅い
症状B：ログインや検索ボタンが反応しない
チェック
・Typeが「Fetch」「XHR」の通信を探す
・Statusが400/401/403/500になってないか
・クリックした瞬間に通信が走っているか、そもそも通信してないのか
よくある原因
・APIがエラー（500）
・権限不足（401/403）
・入力値ミス（400）
・通信自体が発生していない（フロント側の不具合）
症状C：たまに遅い、たまに切れる
チェック
・Timeが「たまに」長い
・同じ通信が何回もリトライしてる
・Statusが0や（failed）になっている
よくある原因
・ネットワークが不安定
・DNSやプロキシの影響
・外部サービス側の混雑
6. Waterfall（滝のような形状の棒グラフ）で「詰まり」を見る
Networkの右側に、棒が並ぶグラフが出ます。これがWaterfallです。
イメージ
通信A |■■■■■■■■■■|
通信B |■■■■|
通信C |■■■■■■■■■■■■|
これで分かること
・どれが先に始まって、どれが後なのか
・“待たされてる時間”があるか
・何がボトルネックか（太く長い棒が犯人候補）
7 .「どこで遅いの？」を分解する
遅い通信をクリックすると、詳細が見れます。
その中の「Timing」が超重要です。
Timingでよく見る項目
・Queueing / Stalled（順番待ち）
・DNS Lookup（名前解決）
・Initial connection（接続）
・SSL（暗号化の握手）
・Waiting（TTFB：サーバー応答待ち）
・Content Download（ダウンロード）
読み方
・Waitingが長い → サーバー側の処理が遅い可能性
・DNS/Connection/SSLが長い → ネットワーク経路やセキュリティ機器の影響の可能性
・Downloadが長い → ファイルが重い可能性
8. 再現テストができる：回線をわざと遅くする
「自分のPCだと速いけど、現場の人は遅い」ってときありますよね😅
そんなときは、Chromeで回線をわざと遅くできます。
Network上部の「No throttling」をクリック
→ 例：Fast 3G / Slow 3G を選ぶ
これで
・遅い環境でどこが詰まるか
・画像や動画が効きすぎてないか
が見えます。
9 .共有したいとき：HARでログを保存できる
「この結果をIT担当に見せたい！」ってときは、HARが便利です。
Networkの一覧で右クリック
→「Save all as HAR with content」
HARは“通信の記録ファイル”です。
どの通信が遅いか、何が失敗してるかを共有できます。
注意
ログにはURLや一部データが入ることがあります。
社外共有する場合は取り扱い注意です。
10 .これだけ覚えるチェックポイントまとめ
| 目的 | 見る場所 | 目安 | よくある原因 |
|---|---|---|---|
| 遅い原因を探す | Time / Waterfall | 長い行が怪しい | 画像重い、外部タグ遅い |
| 失敗を探す | Status | 4xx/5xx/(failed) | 権限、サーバーエラー |
| サーバーが遅いか判定 | TimingのWaiting | Waiting長い | サーバー処理、混雑 |
| 回線が原因か判定 | TimingのDNS/SSL | DNS/SSL長い | ネットワーク機器、経路 |
| 再現 | Throttling | 3Gで崩れるか | 画像やJSが重い |
まとめ
Chromeの開発者ツールは難しく見えますが、
Networkだけに絞れば「遅い理由」をかなり説明できます😊
・遅いのは“回線”とは限らない
・どの通信が遅いかは一覧で見える
・Timingで「どこで遅いか」まで分解できる
・HARで共有すれば、相談もスムーズ
「なんとなく遅い」を、「ここが遅い」に変えるだけで、対応のスピードが一気に上がります👍
ご相談ください
「ソフトが不安定で困っている」
「安全に導入・運用したい」
そんな時に、ぜひご相談ください😊
・Webが遅い原因を切り分けたい
・VPNやプロキシの影響があるか見たい
・社内ネットワークの見直しをしたい
・ログの見方が分からないので整理してほしい
まずはお気軽にどうぞ📩
私たちと一緒に働いてみませんか？
インフラ・ネットワーク・クラウド――
あなたの技術が、誰かの「困った」を支える力になります。