8

In the Network section of the Performance panel of Chrome DevTools (Chrome 59), each request has a line and bar. For example, look at ados.js in the screenshot below.

performance panel

Here's the timing breakdown for ados.js.

timing tab

How do these two representations map to each other?

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120

1 Answers1

12
  • The left line is everything up to Initial connection (inclusive).
  • The light portion of the bar is Request sent and Waiting (TTFB).
  • The dark portion of the bar is Content Download.
  • The right line is essentially time spent waiting for the main thread. This is not represented in the Timing tab.

Source: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#network

P.S. there's now a feature request to show a timing breakdown when hovering over a request in the Network section of Performance panel: https://crbug.com/703335

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
  • when did Stack Overflow become a place to put documentation in the form of Q&A? I've noticed Firebase engineers doing it a few times as well (for example, [puf's top question asked](https://stackoverflow.com/questions/32108969/why-do-i-get-failed-to-bounce-to-type-when-i-turn-json-from-firebase-into-java)). Doesn't it also break DRY principle, because if the official docs/FAQ change, you'd have to update this Q&A as well? – Pat Needham Nov 29 '18 at 17:50
  • 2
    SO is a massively important resource for the web development community. The fact is that some developers only go to SO, and do not see the official docs. We want developers to follow good practices, so we put content in both places. The official docs are always the canonical source of truth. When a SO answer gets out-of-date, someone usually pings us via comment, and we update our answers. The best practice is to link to the official doc from the SO answer, like I did in this answer. – Kayce Basques Nov 29 '18 at 19:48
  • 1
    What does "The right line is essentially time spent waiting for the main thread." mean? how can you reduce this time? – Muhammad Umer Feb 12 '21 at 20:11