~/rbh
All posts

A Static Site Checklist That Actually Moves the Needle

Most static sites are already fast, which is exactly why it's worth being precise about the few things that still slow them down. My checklist, in priority order.

2 min read #performance #web

“Static sites are fast by default” is true and also unhelpful. They’re fast because there’s no server in the request path — but fonts, layout shifts, and JavaScript islands will happily give that advantage away. This is the checklist I run before calling a static site done.

1. Fonts: self-host, subset, and size the swap

A web font is the single biggest self-inflicted delay on most personal sites. Self-host it (no third-party connection), prefer a variable font (one file, all weights), and give it a metric-compatible fallback so the swap doesn’t reflow the page:

html {
  font-family: "JetBrains Mono Variable", ui-monospace, monospace;
}

2. Zero JavaScript is a feature

Astro ships zero JS by default. Every interactive component is opt-in via a client:* directive, so the audit is simple: grep for client: and justify each hit. On this site the answer is currently zero — the theme, nav animations, and hover effects are all plain CSS.

3. Images: build-time transforms only

Never serve a 4000px photo in a 600px slot. Astro’s <Image /> component converts, resizes, and generates srcset variants at build time:

---
import { Image } from "astro:assets";
import cover from "@/assets/cover.jpg";
---

<Image src={cover} alt="A wall of monitors" widths={[400, 800, 1200]} />

4. Layout stability is a UX problem, not a score

Cumulative Layout Shift shows up as jank long before it shows up in a dashboard. The fixes are unglamorous: always set width/height on media, reserve space for anything that loads late, and never inject banners above existing content.

5. Cache forever, name files with hashes

Static asset hosting makes this almost free — most platforms fingerprint filenames automatically. The one knob that matters: make sure HTML is revalidated quickly while hashed assets get a long max-age.


None of this is clever, and that’s the point. On a static site, performance is mostly discipline: fewer requests, smaller fonts, no unnecessary JavaScript. The Lighthouse score takes care of itself.