Tuned page — reference implementation

A working example of every HTML-level pattern from How to make your website faster without buying anything. View source and grep for WHY: to see each trick annotated in context.

What's on this page

Everything the companion article recommends at the HTML level, applied here in one place:

WebP hero image with explicit width and height attributes — no layout shift.
Self-hosted Inter woff2 subset with font-display: swap and a metric-compatible fallback stack — text renders immediately, minimal shift when the webfont arrives.
<link rel="preload"> for the LCP image and the font.
Critical CSS inlined in <style> — no render-blocking external stylesheet.
Zero third-party scripts. The single JS file is loaded with defer at the bottom of <body>.
Semantic HTML5 structure, single <h1>, meaningful alt text.

Try it: run this page through PageSpeed Insights or Chrome DevTools → Lighthouse. Green scores across Performance, Accessibility, Best Practices, and SEO are the goal — if you get less, either the reference has regressed or the origin's server-side config (compression, cache headers, HTTP/3) is missing. See the article for the server-side steps this page relies on.

The server-side pieces you can't see in source

The HTML above is only half of what makes a page fast. The other half lives at the server / edge layer and doesn't show up in view-source. On stackharden.com's Caddy origin those are already configured:

Brotli + gzip compression (encode zstd gzip in the Caddyfile) — HTML and text assets shrink by 70-90%.
Cache-Control: public, max-age=31536000, immutable on the hero image and font — repeat visits skip the network.
HTTP/3 — Caddy's default. Meaningful mobile-network win vs HTTP/2.
TLS 1.3 with ECDSA — the Nginx TLS baseline pattern, the Caddy version.

Fork this

Every asset on this page is under 50 KB. The whole directory (index.html + hero.webp + inter.woff2) is served from /samples/tuned-page/ on this origin. Copy the source of this file into your own project, swap the hero image and the copy, keep the head + font-face + preload block intact, and you have a fast page.