Menu

Post image 1
Post image 2
1 / 2
0

Optimizing My Hugo Blog: From 3.6 MB of JavaScript to Zero

DEV Community·kartikay dubey·29 days ago
#7meouV64
Reading 0:00
15s threshold

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. Browsers render this directly.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More