Core Web Vitals Checklist for Next.js Websites

Core Web Vitals (LCP, INP, CLS) directly affect UX and search. This checklist keeps your Next.js app on track.

LCP: Largest Contentful Paint

LCP should be under about 2.5 seconds. The largest visible element is usually an image, video, or block of text.

• Images: Use next/image with a correct sizes and priority for the above-the-fold image. Preload the LCP image if it’s not in the initial HTML (e.g. hero image). Prefer AVIF/WebP via the optimizer.
• Fonts: Use next/font so fonts don’t block rendering; avoid multiple FOUTs. Subset and self-host when possible.
• Data: For the LCP element’s content, fetch data on the server so it’s in the first response. Avoid client-only fetching for the hero unless you have a strong reason.
• Third-party: Keep third-party scripts (analytics, ads) off the critical path with next/script and afterInteractive or lazyOnload.

import Image from "next/image";
 
export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority
      sizes="100vw"
    />
  );
}

INP: Interaction to Next Paint

INP should stay low so clicks and taps feel instant. Reduce main-thread work during and after interactions.

• JS: Code-split and lazy-load below-the-fold or heavy components. Avoid long tasks; break up work if needed.
• Third-party: Defer or lazy-load non-critical scripts. Run analytics and tags after interaction or on idle.
• Event handlers: Keep handlers cheap; defer heavy work with requestIdleCallback or by moving to a worker. Avoid layout thrash in handlers.

CLS: Cumulative Layout Shift

CLS should be under about 0.1. Avoid layout shift from images, fonts, or injected content.

• Images: Always set width and height (or use fill with a sized container). Don’t leave image dimensions unspecified.
• Fonts: Use next/font with display: "swap" or adjust line-height to match fallback so text doesn’t jump. Reserve space for custom fonts if needed.
• Ads and embeds: Reserve space (e.g. min-height or aspect-ratio) so slots don’t collapse and push content down when they load.
• Dynamic content: When inserting content above existing content (e.g. banners), reserve space or animate in a way that doesn’t push layout.

Quick audit

Run Lighthouse or PageSpeed Insights on a representative page. Fix the highest-impact items first: LCP image and font, then INP (JS and third-party), then CLS (dimensions and reserves). Re-run after changes. With this checklist, your Next.js site can consistently hit good Core Web Vitals.

Summary

Optimize LCP with next/image (priority + sizes), next/font, and server-rendered hero content. Improve INP by reducing JS and deferring third-party scripts. Stabilize CLS with image dimensions, font tuning, and reserved space for dynamic content. Use this checklist and re-audit to keep Core Web Vitals in the green.