Prerender every page; Lighthouse mobile 74 → 98

[laveshparyani]

Why

Lighthouse 13.5 on the live site, mobile: Performance 74, LCP 4.4 s, FCP 3.4 s.

The image wasn't the problem — TTFB 402 ms, then 2.5 s of element render delay. The body shipped as an empty <div id="root">, so nothing painted until ~120 kB of JS ran, and the hero intro then started by hiding the lede — which is the LCP element on a phone. Anything that doesn't run JS, including most AI crawlers, saw no content at all.

Results (local, GitHub-Pages-equivalent server)

	Perf	A11y	BP	SEO	Agentic	LCP	FCP
Mobile — before (live)	74	98	100	100	100	4.4 s	3.4 s
Mobile — after	98	100	100	100	100	2.4 s*	0.7 s
Desktop — before (live)	98	94	100	100	67	0.9 s	0.8 s
Desktop — after	100	100	100	100	100	0.5 s	0.3 s

* Simulated. On localhost the image paints after load, so Lighthouse's simulator chains the JS download into LCP; it stays at 2.43 s across very different network orders. Under real DevTools throttling (slow 4G + 4× CPU) mobile measures Perf 99, LCP 2.1 s. Every published route scores 99/100/100/100/100.

Rendering

• Prerendered at build time (src/entry-server.jsx + scripts/prerender.mjs), hydrated in the browser. main.jsx hydrates only markup drawn for the current URL, so a 404-shim bounce renders fresh instead of mismatching.
• CSS inlined — it was its own render-blocking request.
• Fonts self-hosted (Fontsource, OFL) with metric-matched fallbacks computed from the font files, replacing a render-blocking Google Fonts stylesheet on two extra origins.
• Module script fetchpriority="low" — the page no longer needs it to show anything. Measured FCP 1.37 → 0.66 s.

Motion — never hide what's already painted

• Hero intro is CSS from the first frame; only the headline animates.
• Reveal leaves on-screen content alone on first load, and animates opacity not autoAlpha. autoAlpha sets visibility: hidden, which removed every below-fold heading from the accessibility tree — the real cause of the heading-order failure. Screen-reader heading navigation, in-page search and AI agents all lost most of the page until it was scrolled to.
• Page transition no longer runs on first mount, where it hid all of <main> and called scrollTo(0, 0) over scroll restoration and #anchors.
• Reduced motion now also zeroes animation-delay.

Bugs found along the way

• /services/ was retitled "Page not found" with noindex while showing the right page (my regression from Give every route its own title, description and link preview #9). Slash now normalised before first render.
• The <h1>'s accessible name was "stories behindevery detail".
• Every route preloaded the homepage hero image.
• The image pipeline warned about upscales and made them anyway — now caps at source width and deletes stale variants (1.6 MB → 1.0 MB).
• The 404 plugin's ENOENT masked the real error on a failed build.
• .mjs build scripts, including this CI guard, were never linted.

Accessibility & agents

• WhatsApp button contrast 2.89 → 4.68:1. Footer headings h3 → h2.
• llms.txt generated from the same data as the pages.
• WebMCP declarative annotations on the enquiry form — deliberately without toolautosubmit: an agent can fill it in, the visitor sends it.

Guards

verify-seo.mjs now also fails CI if a page isn't prerendered, its stylesheet is linked instead of inlined, or llms.txt is missing a page — negative-tested by emptying a root. scripts/serve-pages.mjs (npm run preview:pages) serves dist/ the way GitHub Pages does.

Not fixable on this host

cache-insight: GitHub Pages fixes Cache-Control: max-age=600 on everything. It affects repeat visits, not the scored metrics.