My Hugo blog was downloading 3.6 MB of JavaScript and 40 KB of external CSS on every page load. For a static blog with mostly text and a few diagrams, that was absurd. Here is how I fixed it.

Baseline

HTML: 86 KB

JavaScript: 3.6 MB (Mermaid + KaTeX)

CSS: 40 KB (KaTeX stylesheets)

Problem: render-blocking scripts loaded on every page for math and diagrams

Optimization 1: HTML minification

Adding minifyOutput = true to hugo.toml shrunk HTML by 16%. Small win, zero risk.

Optimization 2: Inline CSS

I removed the external main.css link and inlined the styles directly into the HTML. The HTML grew slightly, but I eliminated one render-blocking network request. First Contentful Paint improved because the browser no longer waits for a CSS fetch.

Optimization 3: Native MathML

My blog used KaTeX to render equations. That meant JavaScript, CSS, and font files for every page with math. I switched to Hugo's Goldmark passthrough extensions, which output native MathML.…