Received bytes shown by IE developer tools and the Content-Length response header are inconsistent

Question

I am downloading an image using a GET request using XmlHttpRequest with cache disabled. In IE10, when I check the network panel, I see that the Received column shows different number of bytes and the content-length header shows the correct image size. Whenever I refresh the page several times, I see that the Received column shows different byte data always.

I need how much the size of the image is and how much time it took to download it for bandwidth calculation. For the time taken, I am getting the image entry from HTML5's performance.getEntries() and checking the duration. But for the image size, should I refer to the content-length header or the bytes received shown in network panel?

Answer 1

The Content-Length HTTP response header tells the browser how many byes the requested resource is. In your case, it should equal the size of the image on disk.

The Received column in the IE F12 Developer Tools shows you how many bytes were transferred across the wire, which will include the HTTP header and may or may not include the actual requested resource. For example, if the resource was already located in your cache, the Content-Length HTTP response header would list the requested resource's size, while the Received column in the F12 Developer Tools would show only the number of bytes of the HTTP 304 response header.

For your bandwidth calculation, on your dev machine, you should take the Received column to calculate how many bytes per interval were sent.

You will only be able to estimate the bandwidth "in the wild" since you can't access the developer tools on random visitor's machines. In that case, you would time how long it took to download the resource via window.performance.getEntries(), aka ResourceTiming.

To determine how many bytes were transferred for that resource in the wild, you can only guess. You know it was at least as many bytes as the file size, but you can only estimate the HTTP header size since it will vary per user / browser / proxy. You will also want to ensure the resource cannot be in the user's cache, so you should use a cache-busting URL parameter and/or set the appropriate HTTP Cache-Control headers.