CODEWITHSUNDEEP
google-chromegoogle-chrome-devtools
Fed
Fed

Reputation: 1885

Chrome Devtools ACTUAL data size/transferred

On the Network Tab of the Chrome Devtools I cannot understand the difference between the 2 data values reported (850KB / 14.7 MB transferred). I assume the first value 850KB is data size and the second value 14.7 MB the transferred data. However I am confused.

  1. What is the actual size of the files?
  2. Shouldn't the size of the files equal the size of the transferred values or shouldn't the transferred size (I assume 14.7 MB) be smaller than the actual size of the files (in case the files were compressed)?

enter image description here

The chrome devtools page on resource loading measurements report only one value; so I am confused.

Upvotes: 10

Views: 11667

Answers (2)

V. Roussel
V. Roussel

Reputation: 74

To see to see transferred data and resource size for each request, you first need to enable the "Big request rows" button in the "Network settings".

On top, you can see the size of the file transferred over the network (which may be compressed by your server).

The uncompressed size of the file is displayed in gray just below.

Alternatively, you can hover the "Size" cell for an explanation of individual requests without needing enabling "Big request rows" mode.

Official documentation here: https://developer.chrome.com/docs/devtools/network/reference#uncompressed

Screenshot showing where the settings and information are located in Chrome Dev Tools UI

Upvotes: 3

Don Rajitha Dissanayake
Don Rajitha Dissanayake

Reputation: 146

Chrome inspect gives u a bunch of filters such as All,XHR , JS , img. So the amount is for the filtered part of ur data. If you select "All" option in the filter you will find something like 14.7MB/14.7MB

Upvotes: 6

Related Questions