This morning I got nerd-sniped by Why your website should be under 14kB in size. I had already optimized my blog several times previously, most recently writing my own static site generator in Rust, but according to the Cloudflare URL Scanner my front page was still a shocking 242 kB!
How could this be? Turns out 124 kB were consumed just by highlight.js, and a further 75 kB by a single screenshot from one of my posts. And this wasn't even counting another 258 kB from KaTeX, which failed to load in the Cloudflare scanner due to the CORS policy...
Fortunately this was easy to fix: since I use my own static site generator I have full control over the rendering process, and Rust has some great libraries:
- pulldown-cmark, which I use for Markdown parsing and rendering, makes it very easy to hook into processing the Event stream.
- syntect provides fast syntax highlighting for many common languages and was very easy to integrate.
- Claude Code converted my old .css style file to the theme format used by syntect.
- Thanks to MathML Core, browsers can now natively render math!
- pulldown-latex converts LaTeX math to MathML, again with a very easy to integrate API.
After all these improvements, my front page is now just 43 kB, or 32 kB actual (compressed) transfer size. More than half of this is still images, the actual page itself is just 17 kB, or 6 kB compressed [1]. That's just 5 TCP packets!
-
Unfortunately, Cloudflare does not seem to display resource and transfer size when viewed on mobile. ↩
Tags: blog, website, optimization