2026-02-19 | #web
My RSS reader has recently surfaced a quite interesting site called the 512KB Club; it showcases that functional and good looking websites can be made with no more than 512KB. Size-wise, this website definitely fits the bill; I'll let you be the judge on the looks and functionality.
Not satisfied with the unacceptable 51KB of bloat it was taking up, I decided to see how I could optimise it further, with one important caveat: I do not want to change anything that a visitor would see, or sacrifice the quality of any asset, so reducing image quality is out the window.
What I'm looking for, is a way to remove all the bytes that are not doing anything useful. I was already minifying the html, so no bytes were wasted on comments or white space, which is a simple configuration option in my static site generator (zola). The output of zola build is stored in a directory called public/, from which I can strip the image metadata.
mogrify -colorspace sRGB -strip public/*.{jpg,jpeg,png}
This has the double advantage of removing potentially sensitive info, like GPS coordinates. In my case, I only have 1 image in the whole website, so I just reduced the size by 1KB. We're down to 50KB!
Next step is to look at the fonts. The general advice is to use fonts that users already have on their machines, instead of wasting bandwidth sending custom fonts. I have committed a great sin against minimalism by using Atkinson Hyperlegible, but I like that font and it probably makes it easier for you to read this; I'm not going to sacrifice accessibility. The version of the font being used is woff2, which is more space efficient; but I don't really need all the glyphs:
bash -c 'for f in public/fonts/*.woff2; do pyftsubset "$f" --unicodes=U+0020-007E,U+00C1,U+00C0,U+00C2,U+00C3,U+00C7,U+00C9,U+00CA,U+00CD,U+00D3,U+00D4,U+00D5,U+00DA,U+00DC,U+00E1,U+00E0,U+00E2,U+00E3,U+00E7,U+00E9,U+00EA,U+00ED,U+00F3,U+00F4,U+00F5,U+00FA,U+00FC --flavor=woff2 --output-file="$f"; done'
We're down to 27KB!
This is pretty much where I stopped.
I was already using a few other tricks, such as creating icons as inline SVG to avoid using bitmap image files. If you don't know what that is, you can see an example below; by adding the following lines to an HTML file:
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#1976D2"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
focusable="false"
>
<rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
<path d="M2 6l10 7 10-7"></path>
</svg>
Your browser will display this email icon:
Theoretically, I could have started with more bloat, and claim bigger wins by replacing the icon PNG images with inline SVG.
Doing all the steps manually every time I modify something would be quite tedious and error prone, so I've set up just to run the build/strip/upload pipeline.
default:
just --list
preview:
zola serve
build:
zola build
chmod -R +r public/
mogrify -colorspace sRGB -strip public/*.{jpg,jpeg,png}
bash -c 'for f in public/fonts/*.woff2; do pyftsubset "$f" --unicodes=U+0020-007E,U+00C1,U+00C0,U+00C2,U+00C3,U+00C7,U+00C9,U+00CA,U+00CD,U+00D3,U+00D4,U+00D5,U+00DA,U+00DC,U+00E1,U+00E0,U+00E2,U+00E3,U+00E7,U+00E9,U+00EA,U+00ED,U+00F3,U+00F4,U+00F5,U+00FA,U+00FC --flavor=woff2 --output-file="$f"; done'
upload: build
rsync -av --delete public/ user@my_remote_server:~/jmmonteiro-website/
The upload step has a dependency on build, which means that both steps are executed in sequence. The result of the build is uploaded to my server using rsync, which saves bandwidth by avoiding uploading unmodified files.
This website is now officially a proud member of the 512KB club Green Team! It's listed as 33KB, but that's because I was still fiddling with the glyphs when I opened the pull request to add it to the list. By the time I upload this post I will have more bytes anyway, so I'll just leave it as is.