229

I've a following network log in chrome:

network log

I don't understand one thing in it: what's the difference between filled gray bars and transparent gray bars.

Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
setec
  • 15,506
  • 3
  • 36
  • 51
  • 3
    I'm seeing this a lot over the last two weeks. I have 125 items loading when I do a shift-refresh in chrome. Every once in a while, 3-4 of those files will get stuck in "Stalled" state. All the files are .png files. The only fix is to close the tab, reopen another table and re-open dev tools. I've been working on this code base for over a year without this problem and there haven't been any changes that I believe would cause such a behavior on png files. – Greg Grater May 07 '15 at 18:57

7 Answers7

265

Google gives a breakdown of these fields in the Evaluating network performance section of their DevTools documentation.

Excerpt from Resource network timing:

Stalled/Blocking

Time the request spent waiting before it could be sent. This time is inclusive of any time spent in proxy negotiation. Additionally, this time will include when the browser is waiting for an already established connection to become available for re-use, obeying Chrome's maximum six TCP connection per origin rule.

(If you forget, Chrome has an "Explanation" link in the hover tooltip and under the "Timing" panel.)

Basically, the primary reason you will see this is because Chrome will only download 6 files per-server at a time and other requests will be stalled until a connection slot becomes available.

This isn't necessarily something that needs fixing, but one way to avoid the stalled state would be to distribute the files across multiple domain names and/or servers, keeping CORS in mind if applicable to your needs, however HTTP2 is probably a better option going forward. Resource bundling (like JS and CSS concatenation) can also help to reduce amount of stalled connections.

Community
  • 1
  • 1
Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
  • 2
    Is the 6-file limit in place for local files as well? I encounter the stalled state from time to time when loading a page from `file:///C:/...` – Ilya Kogan Apr 10 '15 at 14:56
  • @IlyaKogan There does not appear to be a 6-file limit when loading from the file system, but there does appear to be a "Stalled" phase. My guess would be this represents the time it takes Chrome to open the file on the file system, and the "Content Download" phase represents the time it took to load the contents into memory. – Alexander O'Mara Apr 10 '15 at 15:18
  • 4
    FYI: On chrome 42, the time waiting in the queue isn't counted as Stalled/Blocking section as the docs indicated, but is included in the total. To get time in queue, subtract all sections from the total. Hopefully they update their docs (or fix the bug). – scosman May 29 '15 at 22:21
  • 27
    But what is the difference between the white and gray bars? – Kat Sep 22 '15 at 19:57
  • Domain sharding to achieve higher concurrency is not recommended. Use HTTP2 instead. See: https://www.youtube.com/watch?v=yURLTwZ3ehk – Homer6 Oct 19 '15 at 22:29
  • I think this is the direct link see this : https://developer.chrome.com/devtools/docs/network#resource-network-timing – Rohit Dubey Dec 17 '15 at 08:11
  • @RohitDubey I included that link under "Excerpt from Resource network timing". – Alexander O'Mara Dec 17 '15 at 08:12
  • I am getting this behaviour under six. i am loading a script in the head .. but before that .. iam doing xhr request, in the head element .. but chrome seems to stall the xhr request until the js script is done .. why ? they are differnt requests and the script is appended after the xhr is made. – mjs Apr 15 '16 at 09:24
  • @momo Got a working example? What version of the HTTP protocol is being used? If you post a question and link it here, I'll take a look. – Alexander O'Mara Apr 15 '16 at 20:14
  • See here: https://s9.postimg.org/rl6u0h08v/Screenshot+from+2016-04-16+11-05-08.png For this code: https://s30.postimg.org/z224buzqp/Screenshot+from+2016-04-16+11-06-45.png As you can see the xmlhttprequest is stalled and fires too late, even thoug they are called before link and script tags. link prefetch preload has been tried but failed. Firefox does this correctly and as a result my page is avaialble at 350 ms . Chrome is ready at around 600 ms. – mjs Apr 16 '16 at 09:08
  • @momo That's strange, I would have expected the XHR requests would be queued up before the script below it. What happens if you remove the `async` tag from the inline script tag? It's actually an invalid attribute on inline scripts. – Alexander O'Mara Apr 16 '16 at 19:56
  • It was added just to see if it would have any effect, it does nothing. – mjs Apr 17 '16 at 11:48
  • For a properly configured HTTP2 setup, such as CloudFlare provides, you can also (finally!) stop doing concatenation, as it is no longer a best practice (see https://blog.cloudflare.com/http-2-for-web-developers/ for some more description on that). – ryanm Nov 09 '16 at 20:56
  • The link doesn’t work anymore. New docs: https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation – Lauren Yim Mar 08 '23 at 22:05
16

DevTools: [network] explain empty bars preceeding request

Investigated further and have identified that there's no significant difference between our Stalled and Queueing ranges. Both are calculated from the delta's of other timestamps, rather than provided from netstack or renderer.

Currently, if we're waiting for a socket to become available:

  • we'll call it stalled if some proxy negotiation happened
  • we'll call it queuing if no proxy/ssl work was required.
inetphantom
  • 2,498
  • 4
  • 38
  • 61
Naga Kiran
  • 8,585
  • 5
  • 43
  • 53
9

https://developer.chrome.com/docs/devtools/network/reference/?utm_source=devtools#timing-explanation

This comes from the official site of Chome-devtools and it helps. Here i quote:

  • Queuing If a request is queued it indicated that:
  • The request was postponed by the rendering engine because it's considered lower priority than critical resources (such as scripts/styles). This often happens with images.
  • The request was put on hold to wait for an unavailable TCP socket that's about to free up.
  • The request was put on hold because the browser only allows six TCP connections per origin on HTTP 1. Time spent making disk cache entries (typically very quick.)
  • Stalled/Blocking Time the request spent waiting before it could be sent. It can be waiting for any of the reasons described for Queueing. Additionally, this time is inclusive of any time spent in proxy negotiation.
Eric
  • 6,563
  • 5
  • 42
  • 66
briefy
  • 211
  • 3
  • 6
  • 2
    How to fix this scenario? – Hardik Mandankaa Aug 23 '21 at 09:38
  • Do you have an updated link? – Eric Feb 02 '23 at 02:22
  • 1
    @Eric https://developer.chrome.com/docs/devtools/network/reference/?utm_source=devtools#timing-explanation – Cristi Dascalu Feb 15 '23 at 15:01
  • I feel kind of stupid because the only thing I see in this answer (and most of the others) is how queueing and stalled are the same. How are they different?? For example: "Stalled/Blocking Time the request spent waiting before it could be sent." Does this mean that a request in Queueing is not waiting to be sent? What is it doing if it isn't waiting? If it is waiting, then how is this waiting different from the Stalled/Blocking waiting? – cesoid Apr 05 '23 at 19:38
7

Since many people arrive here debugging their slow website I would like to inform you about my case which none of the google explanations helped to resolve. My huge stalled times (sometimes 1min) were caused by Apache running on Windows having too few worker threads to handle the connections, therefore they were being queued.

This may apply to you if you apache log has following note:

Server ran out of threads to serve requests. Consider raising the ThreadsPerChild setting

This issue is resolved in Apache httpd.conf. Uncomment : Include conf/extra/httpd-mpm.conf

And edit httpd-mpm.conf 

<IfModule mpm_winnt_module>
   ThreadLimit              2000
   ThreadsPerChild          2000
   MaxConnectionsPerChild   0
</IfModule>

Note that you may not need 2000 threads, or may need more. 2000 was OK for my case.

Renno K
  • 81
  • 1
  • 2
2

My case is the page is sending multiple requests with different parameters when it was open. So most are being "stalled". Following requests immediately sent gets "stalled". Avoiding unnecessary requests would be better (to be lazy...).

Kevin .NET
  • 463
  • 6
  • 9
0

I recently had an issue with a request stalling as well. This may be helpful if you have exhausted all other fixes mentioned in other answers.

If you are using the fetch API for requests, then you may want to also try removing the 'keep-alive' property in the request options.

This was an annoying bug for me and removing this got rid of the stalling issue.

bertman12
  • 1
  • 1
0

We hit this issue today and we have found QUIC protocol making this issue. We have disabled QUIC from chrome://flags and site started to working.

Imran Qadir Baksh - Baloch
  • 32,612
  • 68
  • 179
  • 322