chromeでF12を押すと出てくる開発者向けのツール。htmlやcssを調べるのによく使いますが、ネットワークパネルを使うと通信にどのくらい時間がかかったかなどが分かります。使い方をよく知らなかったので調べて見ました。
Resource Timing API
このパネルはJavascriptのResourseTimigAPIというAPIをもとに表示しているそうです。このAPIを使うことでhttpリクエストが始まる所からデータが届く所までそれぞれのタイミングでどのくらいの時間を要したかを知ることが出来ます。
ネットワークパネル
パネルは開いたところから記録を開始するので、パネルを開いた上で調査したいページをリロードしましょう。リロードするとアイテムがどんどん追加されていきます。一番左の列がリソース(画像ファイルとかjsファイルとか)の名前を表しています。一番右のグラフはそれぞれのリソースをどのように取得していったかを表しています。加えて縦の青いラインはDOMContentLoadedを表していて、このタイミングでhtmlのロード&パースが完了したことを示しています。赤いラインはloadでリソースのロードが完了したことを表しています。
下の方にImagesやらXHRやら有りますが、これはフィルタでその他のものも押してみたら動作は理解できると思います。上の方にはnameとかtypeとかありますが、左クリックするとソートすることができ、右クリックすると表示する項目を選択することができます。
参考
https://developers.google.com/chrome-developer-tools/docs/network