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.
What is the actual size of the files?
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)?
The chrome devtools page on resource loading measurements report only one value; so I am confused.
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
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
Related
Update: We found out that this 1 MB kind of range was coming due to our own code only. After making a check for that, the issue got resolved.
We have implemented an Http server and it can serve the file with/without range. We notice that Google Chrome somehow requests higher range than the actual size. For example, for < 1 MB file, it will request exactly 1 MB (1000000) bytes as range. For more than 1 MB file size, it will request exactly 2 MB (2000000) and so on.
Eventually the subsequent requests are coming proper and catered accordingly. But for a given file, the initial requests are purposefully overwhelming. We tried to serve, file size instead of higher range requested, but that doesn't work.
Why does Chrome request higher range in first place and how to deal with it at the server side?
How these two data amounts, that are located at the bottom of Network Tab differ?
"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.
In addition to the other answers, if you have filtered the results you will see two numbers in one column, first one indicating the size for the filtered requests and the latter for the total size of requests.
For example if you have filtered the results to only display XHR requests and you see 1 MB / 2 MB transferred at the bottom, that indicates 2 MB has been transferred in total, of which 1 MB are XHR requests.
An important difference not mentioned in the other answers is that "resources" will include any cached data, whereas "transferred" (as the name implies) only shows the actual downloaded data when loading the page.
This can easily be verified by ticking the Disable cache checkbox in the toolbar on top of the request list - once enabled there is a considerable difference in filesize of "transferred" and "resources" (in addition to the difference caused by compression).
Current Network Devtools tab displays MBs:
Is there some settings to display MBs in KBs and in full number, not decimal (33.5 as 33500)? Need to know precise value (e.g. 33.5 => 33527)
I don't think there is a way to change the unit used by the Size column, but you can do one of the following:
download the file and inspect its size locally
add a column for a 'Content-Length' response header
As you can see on the screenshot it's not perfect though - it's provided by the server and it's not required.
export entry as a HAR file and look up the exact value
use the Resource Timing API to list all resources in the console
(see Possible to list external resources loaded on a webpage with JavaScript? )
I want to know the size of transferred data for a website (including ajax data) in KB.
In Chrome DevTools, when the size is larger than 1 MB, it switches from KB to MB, so I loose precision. I want to know the size in KB, but I can't find that information anywhere. Does anybody have an idea how to get that information in Chromium?
If the server sends back a Content-Length header in the Response Headers, you can view the size of the data, in bytes, that is sent to the client in the Network tab as per below.
If there is no Content-Length header returned, you can look at the HTTP Archive (HAR) for the transfer size (discussed here). Right click on the Source and select 'Copy all as HAR'. Paste this into a text editor and you will see the full response object. Search for the 'Request URL' you are looking for, and you should see a _transferSize property with a corresponding value in bytes within the Response section.
Place the mouse on the specific number, you can see the data accurate to the byte.
1KB = 1024B
want to know the size of transferred data for a website (including ajax data) in KB.
I'm having some trouble getting Firefox to cache an exe file that we have on our web site. If I download it with IE or Chrome and start the download a second time then the second download finishes immediately but with Firefox it downloads everything from the start.
I've attached screenshots from the network tab in Chrome and Firefox. Notice that both receive HTTP Status Code 200 but Chrome says (from cache). What response headers do I need to add to make Firefox cache it?
Chrome:
Firefox:
Here's the url if you wish to try downloading it it yourself: https://dlud0tbph7s2n.cloudfront.net/Production/Windows/DegooSetup-Production-1.0.1052.exe.
You can check if the exe file is cached by looking in 'about:cache' or using a tool like HttpWatch.
Your EXE file is not getting cache. In older versions of Firefox that could be due to the file exceeding the maximum size for a single cache entry. By default, the maximum entry size is now 50 MB. You can check this by looking at 'browser.cache.disk.max_entry_size' in 'about:config'.
The problem might be caused by the very large value of max-age that you have set - 2000000000 seconds is about 63 years. The HTTP spec only recommends using periods up to one year and some browsers refuse to cache for very large values of max-age:
https://stackoverflow.com/a/25201898/66911
The recommended maximum value of max-age is 31536000 seconds or less.