In Chrome Network Tab, under the size column, what do the 2 numbers represent?

See above: For the first requestwhat does 82.0kb represent and what does 187kb represent?

Also, while we are at it, what do the 2 different numbers under time column represent? (the top number is usually larger but they are very similar)

Solution 1:

Under Size, the first number is the size of the network response that contained that resource. Or "response size."

The second number is the "content size", the actual size of the resource on disk.

The "response size" could be larger than the "content size" (e.g, in your screenshot cs_0.2.js has a response size of 1.5kb, but the size on disk is 1.4kb) if the response contains metadata in the response headers.

Generally the response size will be smaller than content size, though, because of compression.

Under the Time column, the first number is "the total duration, from the start of the request to the receipt of the final byte in the response" (from here: https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading#view-network-timing-details-for-a-specific-resource). The second number is essentially latency, the time it takes to get a response from the server that is serving the resource. If you click on a specific request in the list, you can view a detailed breakdown under the Timing tab (you can also see this information if you hover over the colored bar in the timeline).

The two numbers are often similar because (as you will see in the detailed breakdown) the bulk of the request time usually comes from latency -- time spent in "Waiting (TTFB)" (TTFB stands for "time to first byte").

You can actually disable viewing the content size and latency by pressing the button at the top that's directly to the right of "View:".