Chrome Dev Tools - "Size" vs "Content"
Google ChromeWeb InspectorGoogle Chrome Problem Overview
When viewing information about stylesheets in the Network tab of Chrome's dev tools, one column specifies both "size" and "content":
Can anybody shed light on the difference between these two numbers? On some pages the numbers are close and others they are different by a considerable amount.
Google Chrome Solutions
Solution 1 - Google Chrome
"Size" is the number of bytes on the wire, and "content" is the actual size of the resource. A number of things can make them different, including:
- Being served from cache (small or 0 "size")
- Response headers, including cookies (larger "size" than "content")
- Redirects or authentication requests
- gzip compression (smaller "size" than "content", usually)
> Size is the combined size of the response headers (usually a few > hundred bytes) plus the response body, as delivered by the server. > Content is the size of the resource's decoded content. If the resource > was loaded from the browser's cache rather than over the network, this > field will contain the text (from cache).
Solution 2 - Google Chrome
Size
is the size of response itself, and Content
is the size of resource, that you are accessing.
Compare:
empty cache:
main.js GET 200 OK .. Size: 31.72KB Content: 31.42KB
cached:
main.js GET 304 Not modified .. Size: 146B Content: 31.42KB
Solution 3 - Google Chrome
In simple terms Google article explain it as Size = Transfer size and Content = Actual size
This is my formula based on reading various articles on this topic (and I am open to improve it further with your comments) Size = Compression(Content) + Response Header
Solution 4 - Google Chrome
"Use large request rows" to show both values!
If you don't see the second value (content) you need to click the "Use large request rows" button inside Chrome Network tab:
I found this thanks to the answer on this question here:
https://stackoverflow.com/questions/26445154/chrome-devs-tools-wheres-size-and-content
Solution 5 - Google Chrome
Size
includes response AND request info
Size
is a sum of:
- bytes transferred for the request header
- bytes transferred for the response header
- bytes transferred for the response body
> Inspecting the properties of an individual resource, such as its HTTP headers [note the plural, emphasis mine], content, size, and so on.
If you compare the transferSize
of a performanceEntry (e.g. for the main document at https://stackoverflow.com/) with the Size
in Chrome DevTools' Network tab, you'll see that the two don't match up. That is because the performanceEntry
doesn't contain the size of the request header.
Screenshot of the Network tab and a logged performance entry