Keeping this site under 50 KB
The whole thing — every page, the stylesheet, the icon — is smaller than the hero image on most landing pages. That was not a stunt at first. I just kept deleting things I could not justify, and after a while there was nothing left to delete.
What went
The web font went first. It was 90 KB for two weights, and the fallback stack it
was hiding looked fine. Then the analytics snippet, which I checked maybe twice in a
year and which mostly told me that nobody reads this. Then the syntax highlighter:
a <pre> with sensible contrast is legible enough, and the highlighter
was 40 KB of JavaScript to colour four code blocks.
What is left is one stylesheet, about two kilobytes, and the HTML. No JavaScript at all. Pages render before the browser has finished thinking about it.
The measuring part
I check with curl rather than a browser devtools panel, because the
number I care about is bytes on the wire, not bytes after the browser has done its
own accounting:
curl -s -o /dev/null -w '%{size_download}\n' \
-H 'Accept-Encoding: gzip, br' https://4pus.filesh.top/Compressed, the index page is around 1.2 KB. The stylesheet is cached for a week, so a returning visitor pays for the HTML and nothing else.
The part I got wrong
For about a month I inlined the CSS into every page to save the extra request. It works, but it means every page carries the full stylesheet and no page can cache it, so the second page view is worse than it was before. HTTP/2 makes the extra request cheap. I put the file back.
If you are optimising and you cannot say which number went down, you are decorating.
Is it worth it
Honestly, for a site this small, no — nobody was suffering. But the constraint is useful in a way the byte count is not: it makes me ask what a thing is for before adding it, and most of the time the answer is not good enough.