Search code examples
performancegoogle-chromenetwork-programminggoogle-chrome-devtools

How do I read the Network Tab in Chrome DevTools - Load Times


I have been curious about this since I have been working with UI recently and wanted to know more about it.

enter image description here

I have been reading the chrome network reference guide but I am not sure if I understand it correctly. I am mainly curious about the bottom row, or the summary pane.

So from what I see is that here were 30 requests which total size was 34.7 KB but I am unsure about the thing that follow. So I want what the remaining statistics are.

1) 758 KB resources - Is this the total resources loaded and sent?

2) Finish: 448 ms - Is this the time it took for the entire website to finish loading?

3) DOMContentLoaded: 235 ms - Is this the time it took for the browser to parse the DOM being received?

4) Load: 421 ms - Is this the time it took for my browser to finish loading all necessary assets for the page like fonts, pictures, etc...?


Solution

    • transferred means from the network, the rest (out of 758 kB total) was from the cache
    • finish is the last resource's timestamp so it changes whenever a new request is made
    • DOMContentLoaded is the timestamp of the DOMContentLoaded event:

      fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading

    • Load is the timestamp of the load event:

      fired when a resource and its dependent resources have finished loading