Different file sizes of HTML file

Question

Could somebody explain me difference in file sizes of a HTML file. What is measured in these four cases?

Lets take as example this page http://seotoolsforexcel.com/pagesize/

• If i save it locally with ctrl+s as HTML file without media (they are in another folder) - the HTML file size shown in Windows Explorer is 39kB . Yes i know, there are indeed two sizes: file size and the place it takes on the hard drive - but i'm interesting in file size.
• If i open the source code with ctrl-u , copy the whole code and save it as txt - the file size is 17kB
• If i open this page in Chrome developer tools (network tab) - the file size of the HTML document is 4,9kB
• If i look at Content Length header in Chrome developer tools - the size is 4,656kB

ps : i selected this file as example, because here are all four sizes different.

pps: regarding Content length - i added a screenshot from Chrome Developer Tools:

Answer 1

When you save the HTML using CTRL+S, the browser first runs the JavaScript code and adds it to the HTML. In your example, there is a JavaScript code that adds a <style> element to the page with a bunch of CSS rules, which makes the file size bigger.

When you view the page source (CTRL+U), this is the exact HTML that your browser got from the server. The reason why in the Network tab you see only 4.9KB is because the file is downloaded compressed (gzipped), and the browser decompresses it before parsing.

I wasn't able to see the Content-Length response header in both Firefox and Chrome, so I don't really know why you got that number. Was the number in bytes or kilobytes?