Build notes3 sections · 2 min readBy Dezső Mező · Published October 3, 2026.mdNext.jsWeb VitalsPerformanceImages
A Lighthouse score is a symptom, not a diagnosis. The fixes below are the ones that actually moved the needle on real client builds — including this site, which loads a 3D room and still passes.
01The image is usually the crime scene
The biggest element on the page is almost always a hero image that arrives uncompressed, unresized and late. One properly sized AVIF/WebP with explicit dimensions fixes the worst LCP and the worst CLS in one move — this single change regularly beats a month of framework tuning.
02JavaScript you do not ship is JavaScript you do not pay for
Route-level code splitting is free in Next.js and still routinely undone by one import of a heavy component at the top of a page. The room on this site loads its renderer lazily for exactly this reason: the HTML, the text and the links are interactive before the first texture arrives.
03Fonts are a layout tax
A webfont without a display strategy is a guaranteed layout shift. Preload the one weight that renders the headline, swap the rest, and set metric overrides so the fallback occupies the same box.
What to take away
- Fix the hero image first — it is LCP and CLS at once.
- Split code at the route boundary; audit the imports above it.
- Preload one font weight and metric-match the fallback.
- Measure on a mid-range phone on 4G, not a MacBook on wifi.
More from the lab
Browse all entries
The AI-search visibility checklist we run on this site
The EU accessibility deadline passed — what still applies
Structured data an answer engine can use
The local SEO checklist we run for ourselves
Want this looked at on your own system?Start a conversation
