webページの読み込みが遅い、表示に時間がかかる・・・。
だけど原因がわからない・・・。
そんなときに使用するのが、Chromeをはじめとするブラウザに備わっているDeveloper Tools（開発者ツール）のNetworkタブです
QiitaのAdvent Calender 2017のページを利用して、Chrome Developer Tools（開発者ツール）のNetworkタブの使い方を見てみましょう。
Networkタブの場所と使い方
下の図で示しているように、左から４つ目にあります。
F12でDeveloper Toolsを起動したら、調査対象のwebページをF5でリロードして、読み込みの記録を開始します。
で、記録が終わったら、この
丸いボタンを押して、ストップさせます。
押さないと、ずーっと記録してしまうんです
ちなみに、記録中は赤く光ってます
何がわかるのか
HTMLやCSS、画像データなどを、
- どのファイルを
- どの順番で
- どのくらいの時間をかけて読み込んでいるか
がわかります。
具体的には、こんな感じ。
この図の中で５つ示した部分を、以下１つずつ見ていきます。
１．フィルター機能
CSSだけ、画像だけ・・・など、記録結果をある程度絞り込んで表示することが出来ます。
ファイル名での部分一致検索も可
２．ファイル一覧
一番上が、一番最初に読み込まれたファイルです。
処理された順に表示されます。
３．ファイルタイプ
JSとかCSSとか表示されます。ここの表示が、「１．フィルター機能」で絞り込むときのファイルタイプでもあります。
４．タイムライン
処理スレッドごとにラインが引かれ、ラインの長さが処理時間を表します。
また、処理内容によって、黄色や紫、緑などの色がつきます。
そして、タイムライン上をドラッグすると その部分だけ抜き出したファイル一覧を見ることが出来ます。
５．処理時間
ここが一番見てほしい場所
ファイルごとの読み込み時間が数値で表示されるとともに、処理内容がカラーバーで表示されています。
カラーバーの上にマウスカーソルを当てると、処理の詳細がポップアップで表示されます。
まとめ
Networkタブを起動して、webページをリロードすることで簡単に読み込み処理を記録することが出来ます。
そして、処理時間の長いファイルを特定することが出来れば、対応方法もおのずとわかってきます。
ex）画像サイズを小さくする、js処理を改善する・・・など
逆に、どの処理も同じくらいの処理時間であれば、ブラウザ側ではなくサーバー側を疑ってみることも必要になってきます。
さくっと見てみましたが、これだけでも十分な数値が取得できるかと。
「レスポンス遅いな～」と思ったら、ぜひNetworkタブを開いてパフォーマンス計測してみてください