Help interpreting waterfall diagram

Web Performance Discuss Test Results
1

I have been using WPT for a year or more, but just noticed something in the waterfall display that I don’t find documented…

In the image below, the initial page load has a series of light and darker blue sections. (In fact the following .css loads seem to have those “stripes” as well.)

I also note that the Raw Details has a series of chunks:

"chunks": [
        {
            "bytes": 118,
            "ts": 257.921
        },
...

Two questions:

  1. What do those darker/lighter sections of the bar mean? (I didn’t find this information in the documentation, but suspect it shows that the WPT server doesn’t receive the total data all in one “chunk”.)

  2. What the heck might cause this? I’ll also note that the ~43Kbytes for the initial file take over one second to transfer - astonishingly slow, to my thinking. (Other files - later in the session - come down much faster, and in one chunk.)

Many thanks!

2

The dark parts are when it is actually downloading content for the request and the light parts are when the request data is idle. There are a lot of different causes for gaps:

  • HTML early flushing where headers and some initial data is sent right away but the rest of the HTML is delayed until some back-end operations complete.
  • TCP slow start
  • Contention with other requests (or connections)