Skip to main content
Manuilau | Bureau

Pattern · TypeScript

Core Web Vitals in a production Next.js app: LCP, INP, CLS

Practical levers: LCP image priority, stable layout, splitting heavy JS.

Level: intermediateTime estimate: ~1 h for an audit

“

Google’s metrics reflect real UX; Next gives SSR and image optimization, but CLS often comes from banners and fonts.

  • LCP: explicit hero priority and correct image dimensions
  • CLS: reserve height for dynamic slots
  • INP: avoid blocking the main thread with heavy above-the-fold bundles

Core Web Vitals are not vanity scores: they correlate with retention and conversion. Below is a minimal checklist with the App Router.

Code

LCP priority for a hero image:

import Image from 'next/image'

export function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt=""
      width={1200}
      height={630}
      priority
      sizes="(max-width: 768px) 100vw, 1200px"
    />
  )
}

Reserved height for an ad or dynamic slot:

<div className="min-h-[120px]" aria-hidden={false}>
  {/* banner or widget */}
</div>

Verification

  • PageSpeed Insights / CrUX field data (when available) on target URLs.
  • No sharp CLS spikes when fonts load or banners inject.

Sources

Need this implemented for your domain and stack?

Short form: name, phone, and site. After you submit, we reply with next steps and a phase outline; details are refined on a call.