Core Web Vitals on Next.js: from 4.5s LCP to 0.9s in 3 weeks

Core Web Vitals is a Google ranking factor, and the user feels the difference. Here's a real audit of a Next.js-based B2B SaaS marketing site — anonymised, but the numbers are exact. We run this audit under our Web service.

Starting point

• LCP: 4.5s (red)
• CLS: 0.21 (red)
• INP: 420ms (amber)
• TTFB: 1.1s (amber)

1. Hero image + font: the biggest visible win

The hero image wasn't priority-loaded, and the custom font with font-display: auto held back the first paint. Two tiny changes (-1.4s LCP):

// Before
<Image src={heroImg} alt="" />

// After
<Image
  src={heroImg}
  alt="Hero illustration"
  priority
  fetchPriority="high"
  sizes="(min-width: 1024px) 600px, 100vw"
/>

2. RSC boundaries: carve out the slow parts

On the marketing page, nothing needed to be interactive above the fold. Switching to RSC reduced hydration payload from 110kb to 22kb; INP dropped from 420ms to 180ms.

3. Edge + ISR

Blog pages got 300s ISR + edge runtime. TTFB fell from 1.1s to 90ms. Guests from Singapore now hit the home page in sub-second.

4. CLS: current 0.00

• Reserve height for ads / embeds — no reflow.
• font-size-adjust for fallback — no text jump.
• Aspect-ratio on every image.

Result, after 3 weeks

• LCP: 0.9s (green)
• CLS: 0.01 (green)
• INP: 120ms (green)
• TTFB: 90ms (green)
• Organic traffic +34% in three months

Takeaway

You don't need to rebuild the whole app. 3–5 targeted changes on 20% of the user journey is enough for CWV green. We can run the audit on you — 1–2 weeks for the audit + the fix PRs.