Waterfall and timeline data mismatch

I am trying to find the reason why some images are being loaded serially by Chrome, and found a mismatch between waterfall and timeline data.
This is the test: http://www.webpagetest.org/result/141203_KB_cf366418c3af303bd0da2592a48e53b9/#run2
Although in the waterfall the images are shown to be loaded serially, the numbers in the timeline suggest that the requests are actually sent at the same time, and it is the web servers who are delaying the responses.
To build the table below, I took the following numbers for the 5 images involved: start/end time (from waterfall) and send request, first response packet received, and finish loading event (from timeline).
Any guess on why waterfall and timeline data are so different?

The timeline can’t be trusted :wink: It tells you the time that the resources were sent to the netwoking stack, not the time when they were actually requested from the server.

Chrome’s network scheduler has 2 phases for resource fetching. Before the main parser gets to the tag it is in a restricted mode where it mostly fetches the css and js it needs from the head of the document and it only loads 1 image at a time. Once the body is reached it opens the floodgates and downloads everything.

This is so that the render-blocking resources don’t have to compete with images for bandwidth.

You’ll notice that the images start loading in parallel once the js and css have loaded.

Thank you Pat for your answer. Now I understand the reason for the serial loading of images in the tests.
But I would appreciate if you can elaborate a bit more on the “timeline can’t be trusted” thing. What do you mean “sent to the networking stack” vs. “actually requested from server”? That networking stack, belongs to Chrome or to the OS?

Sorry, Chrome’s networking stack. The timeline doesn’t report the granular details on the network requests. It largely just reports when the resource was requested from the rendering engine and when it started/completed the response.

The lower layers of Chrome handle both the scheduling I mentioned above as well as limiting the number of connections to a given server, etc. None of that is exposed in the timeline data because it’s not visible from the rendering engine. It IS exposed in dev tools and through the dev tools api as the network data, it’s just not part of the timeline.

Understood. Thanks again!