業務でフロントエンドのパフォーマンス改善を行うにあたり、
Chrome DevToolsの基本機能について学習した内容を備忘録としてアウトプットする。
本記事はNetworkパネルにフォーカスした内容となっている。
そもそもDevToolsとは、デベロッパーツール＝開発者向けツールとして、モダンブラウザには標準装備されているもので、ここではGoogleのChrome DevTools (バージョン: 86) について取り上げる。
DevToolsはブラウザ上で右クリックから検証で開く、またはF12で開く事が出来る。
Networkパネル
Networkパネルでは対象ページのネットワークを通じたリソースの取得状況を可視化する事が出来るので、基本的にはリソースの読み込みに時間がかかっている部分の特定に利用する。
パネルを表示した状態で、計測したい対象ページを開く事で取得されるリソースの状況が表示される仕組みになっている。尚、macOSであれば、Command + R コマンドで素早くページリロードが出来る。
再読み込みに関してはキャッシュが効いているかも確認が可能である。キャッシュが効いていれば、Sizeに（memory cache）や(disk cache)などと表示される。
初回読み込みの状況を正確に計測する為にキャッシュを無効にするにはDisable cacheにチェックを入れれば良い。
Preserve log
Preserve log にチェックを入れるとリダイレクト前のリクエスト・レスポンスのデータが、Networkパネルの中に残るようになる。
Online
Fast 3G、Slow 3Gなどを選択すると3G環境を再現する事が出来る。
Filter、他
文字通り表示するリソースをフィルタリングする事が出来る。
単純に右側のファイル形式を選択すれば、CSSだけ、JSだけで表示する事も可能。
Waterfallの青いラインがDOMContentLoaded、赤いラインがLoadの発生時点で示す。
DOMContentLoadedとはDOM構築が完了した時点で発火するイベント、LoadはDOM構築に加えて画像やスクリプトの読み込みが完了した時点で発火するイベントの事である。
それぞれ到達するまでの時間がパネル最下部に表示される仕様となっている。
Waterfall上にマウスカーソルを合わせる事でリソースの詳細を個々に確認する事が出来る。
Resource Scheduling
リクエストの順番決定する為のスケジューリングに要した時間
Queueing
レンダリングエンジン内のQueueingに処理されるのに要した時間
Connection Start
キューに入った後でリクエストを送信するまでに要した時間
stalled
マシンのネットワークを活性化させるのに要した時間
Request sent
HTTPリクエストを送信するのに要した時間
Waiting（TTFB）
リクエストを送信し終えてから最初のデータを受け取るまでに要した時間
Content Download
コンテンツの最初のバイトから全てを受け取り終えるまでに要した時間