A field guide to a 100 Lighthouse score
Real techniques I use to make Next.js apps feel instant — from edge caching to image strategy.
A 100 Lighthouse score isn't about one big optimization — it's about refusing to ship the ten small regressions that everyone else accepts.
Start with images, because they're usually 70% of the problem: next/image everywhere, explicit sizes, priority only on the LCP image, and modern formats by default. Then fonts: self-host via next/font so there's no third-party round trip and no layout shift from font swapping.
JavaScript comes next. Every client component is a tax — keep server components as the default and push 'use client' down to the leaves that actually need interactivity. Dynamic-import anything below the fold that's heavy, and let the edge cache HTML wherever your data allows it.
The last few points are discipline: no layout shift from late-loading content (reserve the space), no long tasks from analytics (defer them), and measure on a real mid-range phone — your M-series laptop is lying to you.