Chrome Dev Tools - “Size” vs “Content”

Question

When viewing information about stylesheets in the Network tab of Chrome\'s dev tools, one column specifies both \"size\" and \"content\":

Answer 1

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

Answer 2

"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:

Chrome Devs tools - where's size and content?

Answer 3

"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)

From the docs:

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).

Answer 4

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

See the image used in this article

Explanation by Google