Solution 1 :

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}`);

Solution 2 :

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");

Problem :

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

page size : 403.86KB

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

I’ve found a Pelican plugin : but I need to use javascript / jquery.

any ideas ?

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


Comment posted by freedomn-m

Hard to tell – does your

Comment posted by Matt Ellen

@freedomn-m Yes, it includes the whole text of the document. I believe

Comment posted by Matt Ellen

@freedomn-m you can do a comparison in the console.

Comment posted by freedomn-m

Yes, they’re different, hence the question to determine what’s different/why , which you answered fine. I was trying to see what was in the blob, rather than the output of the serialise, so that helps.