javascript/jquery script to calculate html page size

Question

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 ?

Matt Ellen · Answer 1 · 2020-09-18T13:01:32.670

2

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

edited Sep 18 '20 at 13:01

answered Sep 18 '20 at 12:01

Matt Ellen

11,268
4
68
90

Hard to tell - does your `mainHTMLsize` include any xml serialisation artifacts? eg ` – freedomn-m Sep 18 '20 at 12:47
@freedomn-m Yes, it includes the whole text of the document. I believe `outerHTML` misses some, e.g. ` `. It doesn't include images, etc., that's what the rest is for. – Matt Ellen Sep 18 '20 at 12:52
@freedomn-m you can do a comparison in the console. `(new XMLSerializer().serializeToString(document)).length - document.documentElement.outerHTML.length` – Matt Ellen Sep 18 '20 at 13:05
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. – freedomn-m Sep 18 '20 at 13:18

score 1 · Answer 2 · answered Sep 18 '20 at 17:14

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

javascript/jquery script to calculate html page size

2 Answers2