ChromeのDeveloper Toolに関して

Question

Chrome Developer Toolを用いてcakePHPでできているwebサイトのサーバー内での処理速度を調べたいのですが
「Network」タブや「Timeline」タブを確認してみているのですが、どの値を見ていいかがわかりません。

またwebの仕組みをいまいち把握できていないのですが、

1.ブラウザでサーバーにリクエストを送信
2.サーバーで受け取ったリクエスト通りにHTMLを作成
3.ブラウザにHTMLを返す
4.ブラウザで受け取ったHTMLを表示

と、ざっくり認識していて、1.でリクエストが送信され、サーバがリクエストを受け取ってからブラウザに返すまでの時間を処理速度と考えているのですが、この場合の処理速度をChrome Developer Toolで確認するにはどの値に注目すればよろしいでしょうか？

Answer 1

Network タブでアイテムを選んで Timing タブを選べば詳細が見れます。
Perserve log にチェックが入っていない場合は一番のアイテム上がそのページのHTMLの通信です。

Waiting(TTFB) は最初の1バイトが返ってくるまでの時間
Content Download はそのファイル全体をダウンロードし終わるまでの時間

CakePHP は知らないですが、Frameworkなら部分部分 echo で出力してるのではなく、最後にまとめて出力してそうなので Waiting が処理時間で、 Content Download がそのページのファイルサイズや通信速度関連の時間と考えれば良いかと思います。

このページでの例

Comments

[mochikuzu]

非常にわかりやすくありがとうございます！