Response Timeを超えるFirst Byte Timeが表示される理由

まずこの画像をご覧下さい。この画像はサムライズのトップページをCompuware GomezのSynthetic Monitoring - Backboneで計測したデータをコンポーネントチャートとして表示したものです。赤丸で囲んだデータと青丸で囲んだデータに注目して下さい。これは1st Byte TimeがResponse Timeを超えた状況を示しています。1st Byte TimeはクライアントがページオブジェクトをWebサーバーにリクエストしてから最初のパケットを受け取るまでの時間を示しています。一方、Response Timeはページオブジェクトの最後のパケットを受け取るまでの時間を示しています。普通に考えたら、1st Byte TimeがResponse Timeを超えるのはおかしいはずです。何故このような現象になるかについて、この記事で纏めます。

上の画像をご覧下さい。これはコンポーネントチャートの1st Byte TimeがResponse Timeを超えている時間の計測データのウォーターフォールチャートです。紫色が1st Byte Timeを示しています。そして、ウォーターフォールチャートの一番上、青色がResponse Timeを示しています。もう既に気がつかれた方が居られるかも知れませんが、紫色の棒グラフを全部繋げて一直線に並べてみて下さい。どうでしょう？青色の棒グラフより長くなりませんか？

これが答えです。コンポーネントチャートでは全てのオブジェクトの1st Byte Timeを足した数値を示しています。しかし、実際のブラウザは並列処理でオブジェクトをリクエストするので、例えば、3個のオブジェクトがそれぞれ2秒ずつ1st Byte Timeに掛かったとしても、実際には2秒で全て処理されます。2×3で6秒と言う事はありません。種明かしをするとなんてこと無いのですが、良くある質問ですので記事として纏めました。