Google Chrome Networkタブの見方

GoogleのChromeブラウザのNetworkタブの見方です。

確認環境
・Windows 10

目次

手順 デベロッパーツールを開いて位置を変更する
  Networkタブで計測する
  計測した結果を確認する

デベロッパーツールを開いて位置を変更する

Google Chromeを立ち上げて、F12キーを押すとデベロッパーツールが表示されます。

右上の点がある箇所をクリックしてDock sideの選択でデベロッパーツールの表示箇所を変更できます。

左から全画面、左寄せ、下寄せ、右寄せがあります。
以後の図は下寄せです。

Networkタブで計測する

デベロッパーツールで図の1の箇所の「Network」タブを押します。

計測する

2の箇所はNetworkを計測するボタンです。

丸い箇所をクリックすると計測が始まります。計測中はボタンが赤になります。
再度ボタンを押すと計測が止まります。ボタンの色は黒になります。

クリアボタン

丸のボタンの横にあるのは、クリアボタンです。計測した結果をクリアします。

キャッシュ

3の箇所の「Disable Cache」は、チェックを入れるとキャッシュを無効にします。
計測するのでチェックを入れます。

ログの結果

「Disable Cache」の左にある「Preserve log」にチェックを入れると、リロードしたときも前回の計測した結果(ログ)は消されず残ります。
チェックを外してリロードすると、今回の計測した結果(ログ)のみ表示されます。

計測した結果を確認する

画面をリロードすると実施結果のログが表示されます。

項目のソート

オレンジ枠の項目をクリックするとソートができます。
一番右のWaterfallは、それぞれのファイルがどれくらいの時間がかかったかがわかる項目です。

転送されたサイズの値

デベロッパーツールの一番下の箇所は、実行された結果が数値で表示されます。

requestsは、一覧の「Name」にあるダウンロードしたファイルの数です。
transferredは、一覧の「Size」にあるダウンロードしたファイルの全容量です。圧縮されたサイズです。
Loadは、完了した時間です。

実際のサイズの値

resourcesは、右上にあるアイコンをクリックし、「Use Large request rows」にチェックをいれると表示される下の行の値の合計です。圧縮前の値です。

https://developers.google.com/web/tools/chrome-devtools/network/reference

ファイルの数を絞る

以下の赤枠の箇所を選択するとログのファイルの種類が限定されて表示されます。

jsをクリックするとjsファイルのみ表示されます。

jsファイルをクリックすると、Headers,Preview,Response,Timingのタブが表示されそれぞれ確認できます。バツのアイコンを押すと閉じます。

Waterfallの詳細を確認する

上記の図のWaterfallにある赤枠の箇所にカーソルを当てると以下の詳細が表示されます。

Waiting(TTFB)のTTFBは、Time To First Byteの略で、最初の1バイト(First Byte)が到着するまでの時間です。この時間は短いほうがよいです。上記図では、75ミリ秒となっています。
この値が大きいときは、サーバーか、ネットワークの問題があるといえます。

関連の記事

Google Chrome キャッシュを削除する方法

△上に戻る