google-chromeweb-inspector

Chrome Dev Tools - "Size" vs "Content"


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

Screenshot of dev tools with Size/Content column highlighted

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.


Solution

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

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