ページが重い原因は、
どの通信に時間がかかっているかを見ないと分かりません。
その確認に使うのが、
**デベロッパーツールの「ネットワークタブ」**です。
このページでは、
ネットワークタブの
使い方・見方・確認ポイントをまとめています。
ネットワークタブの使い方
デベロッパーツールでネットワークタブを使うには、「ネットワークタブ」を開きます。
「ネットワークタブ」を開いたら、
- Ｆ５を押す
- または、ブラウザの更新ボタン（🔄）を押す
すると、「ネットワークタブ」の画面が更新されて、
資源が割り当てられる順番に、データの流れを確認することができます。
ネットワークタブの見方
デベロッパーツールのネットワークタブでは、
１つの資源に対して
- 名前（データセット名）
- ステータス（完了コード）
- タイプ（document,script,stylesheet,text/html等）
- イニシエーター
- サイズ
- 時間
- 優先度（最高,高,中,低）
- ウォーターフォール
等を確認することが出来ます。
表示項目は、選択して選べるので、他にも表示できる項目があります。
ネットワークタブの確認方法
ネットワークタブでは、資源がスムーズに割り当てられているか？を確認します。
最後の行に
- リクエスト件数（画像・CSS・JS・広告・フォントなど）
- 転送量（KB）
- リソースの件数（MB）
- 終了時間（秒）（すべての通信が終わるまでの時間）
- DOMContentLoaded（秒）（画面の骨組みが表示された時間）
- 読込時間（秒）（見た目がほぼ完成した時間）
※この内容は
Google Chromeデベロッパーツールについての一部です。
→ ハブページはこちら
コメント