Chrome developer tools - network panel gaps

Question

In the Chrome developer tools, under the network tab, I'm curious to know what is happening during the gaps. If you look at my image below, I have highlighted in orange the areas where these gaps exist. Where I'm able to load a lot of my page from cache it's a shame these large gaps occur as they make up most of my page load time. What exactly is happening in this time?

EDIT

Okay I found this answer which essentially sums up my question, so a different question: does anyone know a good method to reduce the length of these gaps? Presumably (albeit rather extreme) if I loaded all my CSS on the page there wouldn't be a delay after loading the CSS file before the images were loaded.

Answer 1

I know it's not a direct answer to your question, but have you considered monitoring with another tool such as Fiddler or WireShark? You might get some more insight into the root cause of your problem by using a different tool.

Answer 2

Since those gaps represent synch-wait and local processing (rendering, executing scripts, time-slicing between the treads of the individual requests, etc), all the traditional bottlenecks like number or frequency of cores (to run more threads concurrently and reduce sync wait for pulling the css alongside the markup and scripts so it can be rendered), sufficient available ram (there are per-process limits so its not just globally free ram; closing chrome tabs can help, surprisingly), Disk/Network IO speed (since you are reading cache), all can contribute in their own way.

Retrieving all the assorted resources required for a modern website is a very multi-threaded activity, which is bound to IO, so there are a lot of complexities involved in loading and rendering a page in the most optimal way.

Answer 3

There are a number of options for reducing the 'gaps' in the dev-tools network waterfall. Mainly tweaking and tuning your website to perform better and observing the orders in which files are passed from server to user. See the link for descriptions of some examples.

yahoo: Best Practices for Speeding Up Your Web Site