What the emptiness mean in devtools timings?

Question

Check this image with timings for a web page fetch.

There is gray at the beginning for stalled time, the green for waiting time, and the blue for receiving data. There is also a hollow, glaring nothingness in the middle.... what is that?

The image is from Google Chrome 43, normal devtools.

Answer 1

I've written up an extensive explanation in the chromium bug for it: Issue 476749: DevTools: [network] explain empty bars preceeding request..

Here's the gist, empty bar time is usually one of a few things

• The request was postponed because it's considered lower priority than scripts/styles (e.g. images)
• The request was put on hold while we wait for an available TCP socket that's about to free up
• The request was put on hold because the browser only does 6 connections per host.
• Time spent making disk cache entries (typically very quick)

You can right click the headers to turn on "Connection ID" to see if different requests are sharing the same TCP connection. WebPageTest's connection view can also help with that.

But from the screenshot above, it appears the preload-scanner identified many scripts, styles, and images necessary for the page. It quickly started the styles and scripts and queued up images to be done later. They were delayed because of the 6 connections per host rule.