How to calculate total page size (html+assets) in KB per page

Hello !

I’d like to display on each page the total size of data transfered to the browser, per page :

  • html
  • images
  • css
  • js

You can see an IRL example on this website :

I contacted the dev and he kindly shared me that Python script to achieve this : solar-plugins/ at master · lowtechmag/solar-plugins · GitHub

How could I achieve this with Hugo + gulp + npm ? Any idea ?

Thanks :slight_smile:

You can’t. Apart from the fact, that your server decides how to compress and send data and your browser decides, how to cache data you will never know before you received data how much data you will receive, except it’s something like a single non-cached PDF file. The numbers you could retrieve (with a python script nonetheless) are arbitrary and uncompressed and probably even depend on the format of your hard drive.

You could have a look at the Perfomance API of modern browsers that might give a hint of what was transferred. (see performance - Javascript: compute total bytes transferred and total requests to render page? - Stack Overflow)

But none of that is a Hugo task. It depends on the browser and server setup.

There is a header called “content length” that has some byte info, per object that is sent. This again is something going on at the clients side.

Having read my rambling until here: thanks :wink: there is probably a way to calculate (fake) sizes, but not in a “hey Hugo, calulate all my files and assets sizes” way:

results in an object with these values:

My web files are pre-compressed after deployment with shell scripts. Here some data

favicon is 309.326 bytes, with Brotli 4.326 bytes, with Zopfli 4.206 bytes.
homepage is 18.447 bytes, with Brotli 3.734 bytes, with Zopfli 4.185 bytes.
tachions stylesheet is 118.299 bytes, minify 77.252 bytes, with Brotli 8.013 bytes, with Zopfli 11.314 bytes.

This is a nice way to speed up!

That’s a great idea that will bring the serve-time down some milliseconds… I love milliseconds :smiley:

Don’t forget to share your shell scripts… I am probably not the only one interested. And thinking about it, you probably have to add some HTTP headers about that?

from my scripts

find /media/html -type f -name '*.br' -delete 
find /media/html -type f -name '*.html' -exec brotli -Zfv '{}' \;
chmod -R  755 /media/html/*.br

find /media/html -type f -name '*.gz' -delete 
find /media/html -type f -name '*.html' -exec zopfli '{}' \;  
chmod -R 755 /media/html/*.gz

You need some rewrite rules for your web server to get it working

1 Like

look in the samples