# Core Web Vitals on a real Next.js site

> LCP, INP and CLS are three numbers with three different fixes. Most slow sites fail on the same four things, and none of them need a rewrite.

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.

## The 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.

## JavaScript 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.

## Fonts 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.

## Tags

Next.js, Web Vitals, Performance, Images

## We build this for clients

https://dfieldsolutions.com/en/services/web-performance

## More from the lab

- https://dfieldsolutions.com/en/lab/ai-search-visibility-checklist.md — The AI-search visibility checklist we run on this site
- https://dfieldsolutions.com/en/lab/eaa-accessibility-deadline.md — The EU accessibility deadline passed — what still applies
- https://dfieldsolutions.com/en/lab/structured-data-aeo.md — Structured data an answer engine can use
- https://dfieldsolutions.com/en/lab/local-seo-playbook.md — The local SEO checklist we run for ourselves

---

Source: https://dfieldsolutions.com/en/lab/web-vitals-playbook
DField Solutions — Dunakeszi, Hungary — dezso@dfieldsolutions.com
Booking: see https://dfieldsolutions.com/en/contact