For the main page you can use this:

let mainHTMLsize = (new Blob([new XMLSerializer().serializeToString(document)], {type: 'text/html'})).size;

(With thanks to Eric Aigner.)

I turn it into a Blob because (new XMLSerializer().serializeToString(document)).length would give the number of UTF-16 code units, whereas blob.size is the number of bytes.

Then I think this MDN page should sort you out for the rest:

const p = performance.getEntriesByType("resource");
for (let i=0; i < p.length; i++) 
{
  console.log(`${p[i].name} decodedBodySize = ${p[i].decodedBodySize}`);
}

here is my code, works like a charm :

var res = performance.getEntriesByType('resource');

var totalSize = res.reduce((size, item) => {
  size += item.decodedBodySize;
  return size;
}, 0);

var totalSizeKB = totalSize / Math.pow(1024,1)

var totalSizeKB_decimal = (Math.round(totalSizeKB * 100)/100).toFixed(2);

$(".size span").html(totalSizeKB_decimal + " KB");

I’m looking for a script to calculate and display the size / weight (in kb) of an html page, like on this page : https://solar.lowtechmagazine.com/

page size : 403.86KB

the total size of all the ressources (text, img, scripts…)

I’ve found a Pelican plugin : https://git.vvvvvvaria.org/rra/page_metadata but I need to use javascript / jquery.

any ideas ?

I can’t find any ressources online, any ideas ?