How to find size of webpage

Most contemporary webpages we visit are quite heavy, downloading and using lots of big files. It can be instructive to understand the actual size of a webpage. This can be done easily using the Developer Tools built into Firefox.

• Visit the webpage you want to measure. Press F12 to open Developer Tools. This window typically opens at the bottom of Firefox.
• Open the Network tab. Here you have two options: Reload the page so that Firefox can log the network requests. The other option is to do Performance Analysis.
• Click Reload and watch the network requests while Firefox reloads the webpage. Once the webpage is loaded, you can see the size of the webpage listed at the bottom-left of the window. This is listed as two numbers: X / Y transferred. Y is the total size of the files downloaded. Since some of these downloaded files could be compressed, X is the total uncompressed size.
• You could also click the Stopclock icon (Performance Analysis) at the bottom-left. This runs two rounds of analysis: with an empty cache and with a primed cache. It displays both of these stats using pie charts that split the content into HTML, JS, Images, XHR and CSS. For the size of a webpage, what we want is the Empty cache details. Here you can again find the Size and Transferred Size items which indicate the size of the webpage.

Tried with: Firefox 75.0