Why do downloaded KB different in Firefox DevTools vs. Firebug or Chrome DevTools?

Question

Can anyone explain me why, debugging on any page, I see always a great difference between the Firefox DevTools, Firebug and the Chrome DevTools in terms of transferred file sizes? For example, with the homepage of Stack Overflow I see:

• Chrome DevTools: 282 KB

• Firebug: 246 KB

• Firefox DevTools: 873 KB

What is the truth?

Answer 1

In opposite to the Chrome DevTools' Network panel and Firebug's Net panel the summary within the Network panel of the Firefox DevTools displays the size of the contents after decompression. That means it displays the actual size of the files, not the transferred bytes of the files.

Background: Some servers compress the response contents before they sent them to the client using algorithms like GZIP to save network bandwidth. The clients then decompress the contents once they received them.

The Firefox DevTools do not offer a summary of the transferred size of files (as of Firefox 38.0.1). The Network panel only displays the decompressed size of files at the bottom of the panel:

Therefore I created an enhancement request to display the transferred size within the summary and the performance analysis.

Though the panel has a Transferred column listing the transferred size for each file:

Answer 2

There are so many things at play here that contribute to the network traffic.

1) The browsers do in fact implement different download strategies.

As a very simplified example consider the case where you reference an image multiple times:

<img src="someImage">
<div style="background-image:url('someImage');">

The simplest possible method would be to load the image every single time. This is wasting bandwidth, which results in a bad user experience. Instead we could detect that this is the same image and just download it once.

Or better yet, we could cache it, and remember the last time we fetched an image from that server with that name, and thus show that instead. To allow the web developers to update their images we need to exchange some HTTP headers with server ensuring that the image cache we have is actually up to date.

And what if the site uses third party hosted stuff. Can we cache that? And what to do when we visit another site that uses that same third party material?

2) Web developers and their tricks

So let's play a game of optimization. Say I need the site to do something in IE and Chrome, but the differences in the rendering engines make it a pain to create cross-browser layouts that just look fantastic in both...

I can hack the CSS to work in both browsers, but really, I could also simply create a layout file for each browser, and modify them independently. I.e. http://www.thesitewizard.com/css/excludecss.shtml

Unless the browser is stupid it will recognize the optimization and only fetch the layout files that it needs instead of all the available layout files. This also goes for JavaScript files.

Some browsers support stuff, and that stuff makes it easier to do fancy tricks. For the browsers that doesn't support it you need more code or a plugin like Flash or Silverlight or something else. You don't want to make the user that picked the "right" browser suffer, so you add optimizations.

3) Endless problems answering The aforementioned tricks are used by advertising systems. And if you are lucky, all the third party stuff uses them. Some host jQuery, some reference Google's online hosted versions of libraries or similar.

For websites that show third party content, notice that the advertisements can contain code or differently sized images (in bytes).

Also note that the downloaded number of bytes may also refer to different things. It could show what was actually transferred, but it could also show what would have been transferred if we didn't use a cache.