Menu
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.
14.7 MB) be smaller than the actual size of the files (in case the files were compressed)? 
The chrome devtools page on resource loading measurements report only one value; so I am confused.
826
"Transferred" is the compressed size of all resources. You can think of it as the amount of upload and download data that a mobile user will use in order to load this page. "Resources" is the uncompressed size of all resources.
Right-click the image whose size you want to know and select Inspect. View your image's width and height displayed in the Chrome DevTools. (Note, the first number is always the width). If your image is not highlighted by default, click the inspect element button.
Waterfall charts show what network requests are made when loading a web page. They are often used to analyze site speed and identify opportunities for optimization. Website waterfall analysis is supported by many web performance tools, for example: DebugBear site speed monitoring.
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
111
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.
Official documentation here: https://developers.google.com/web/tools/chrome-devtools/network/reference#uncompressed
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
