Difference between Transferred and Size columns in Mozilla Firexfox Network tab

Question

I am trying to determine what the difference is between the Transferred column and Size column. Does it have to do with the difference between compressed files and uncompressed?

I am not compressing my files on my server (Node.js Express server) so I don't know why there would be a difference in file size.

Answer 1

Your express application has gzip compression enabled as indicated by the Content-Encoding: gzip header, so the response body is compressed with gzip before sending over the network. Transferred size is when compressed, and size is decompressed in the browser. Express is doing this on the fly, so even though your file is not compressed on disk, it gets compressed before it is sent over the network.

Follow-up on your comments

You haven't posted any code, but it's probable that your express application is using the compression middleware (perhaps from the boilerplate you started with). If so, that will use mime-db to determine if the response content type is compressible. Looking up application/javascript in mime-db reveals it is marked as compressible:

mimeDb['application/javascript']
{ source: 'iana',
  charset: 'UTF-8',
  compressible: true,
  extensions: [ 'js' ] }

Note that a .gz file extension is not involved anywhere here. There is no .gz file on disk, the compression is being done to a .js file in memory. Also note that just setting the Content-Encoding: gzip header without actually encoding the body as gzip is not something you want to do. It will cause encoding errors for the client.