Networkパネル
ネットワークを通じたリソース取得のタイムラインの様子
読み込みに時間のかかるリソースの特定をする
Disable cacheにチェックを付けてcmd-rすればキャッシュされずにリロード
青い線はDOMContentLoadedイベントの発生時点
ここに至るまでが遅ければスクリプトによる読み込みブロック
赤い線はLoadイベントの発生時点
ここに至るまでが遅ければリソースの容量が大きすぎる
項目
Connection Setup
HTTPよりも低レイヤであるTCP,TLSなどの接続確立の時間など
Queueing
Stalled
DNS Lookup
initial connection
TCPでの接続を確立するのにかかる時間
多いということはサイトが持続的接続をしていないということ
KeepAliveをすれば減らせる
SSL
Request/Response
Request sent
Wating
リクエストがサーバーに送られる時間+サーバーの処理時間+レスポンスの最初の1byteが返ってくるまでの時間
リクエストを送信し終えてから、最初のデータを受け取るまでにかかる時間
これが遅いと、サーバー側での処理に時間がかかっているということ
対策: CDN, キャッシュ, DNSとか
Content Download
コンテンツの最初のバイトから全てを受け取るまでの時間
これが大きければリソースがでかすぎる
圧縮などで対応
ネットワークパネルのべんりしゅう