2

I'm using webpagetest.org and am struggling understanding the meaning of the different colors in WebPageTest waterfall view. As you can see in the image below, each type (HTML, JS, CSS, etc.) has two colors – the former being paler than the latter. Anyone knows what is the meaning of these two colors?

Waterfall image legend

Example of a test on Google

Alex
  • 1,021
  • 3
  • 10
  • 16

1 Answers1

3

According to this post from one of the authors:

The lighter time is the time from when the browser sends the request out on the wire until the first byte comes back. The darker color is the period where the resource is actually downloading.

cody
  • 11,045
  • 3
  • 21
  • 36
  • 1
    Thanks for the reply! Makes sense, although I'm now wondering why some of the bars have many stripes. Could it be related to HTTP/2 and having many streams? – Alex Dec 03 '18 at 16:43
  • 1
    I believe they are chunks. Click in the asset, it should open a panel with several tabs. Select "Raw Details" and scroll to "chunks". I noticed it has a chunk entry per stripe and times seem to match perfectly. – Igor Gatis Nov 05 '21 at 13:24