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

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