What do these numbers mean on the network tab?

Question

In the network tab, under the list of all the HTTP requests, I see a summary. For example:

• 213 requests
• 2.5 MB transferred
• 7.2 MB resources
• Finish: 2.1 Min
• DOMContentLoaded: 1.23 s
• Load: 3.17 s

Chrome's documentation has an extensive article about this tab, but it doesn't describe these summary data.

Some of these are self-explanatory. 213 Total HTTP requests have been sent, and it took 1.23 seconds from the first request until the document.DOMContentLoaded event was fired. The big value for finished value actually makes sense because this page has a repeating 'ping' event for click tracking. However, the other values are a bit confusing.

Why are there two very different numbers for transferred and resources — i.e. what the difference between a transferred byte and a resource byte? Also, what does the "Load" time represent exactly — is that the time until window.load event or something else?

Answer 1

The DevTools documentation points to MDN's load event page to describe the "Load" number. So yes, "Load" is the time from navigation until window.load.

"Transferred" refers to bytes across the wire. "Resources" refers to the weight of those files once they're downloaded and un-compressed, as shown in the DevTools reference.

Downloading jQuery from its CDN illustrates the difference. The DevTools reference points out that the smaller number in the requests table represents the compressed size.