February 14, 2026

The 14KB HTML Challenge

How I built this blog to deliver a complete, styled experience in under 14KB over the wire. No JS required for the core experience.

Performance isn’t just about fast load times; it’s about accessibility, respect for the user’s bandwidth, and engineering discipline.

I set a hard rule for this project: the initial HTML payload—complete with the critical CSS to render the page beautifully—must be under 14KB.

Why 14KB?

It’s not an arbitrary number. 14KB is the maximum amount of data a server can send in the first TCP round trip (the TCP slow start). If your critical rendering path fits in that window, your site appears on the screen in a single hop.

How we achieved it

Astro + Tailwind v4: By utilizing Astro’s static generation and forcing Tailwind CSS to inline the compiled token stylesheet directly into the <head>, we eliminated the need for an external CSS request blocking the render.
System Fonts (Mostly): We rely on Inter for styling, but if it fails to load, the fallback system stack looks great.
Vanilla JS for Interactivity: The Emotion Engine is built without React or heavy animation libraries. It’s pure, conditionally loaded DOM manipulation.

The result is a site that feels instantaneous, proving that you don’t need megabytes of JavaScript to create something modern and beautiful.