How to Pass Core Web Vitals with Next.js (2026)

Less than half of the mobile web passes Google's performance bar. In 2025, only 48% of mobile origins met all three Core Web Vitals, up from 36% two years earlier (HTTP Archive Web Almanac, 2025). That gap is an opportunity. If your competitors are slow, a fast Next.js site wins both the ranking and the conversion. The framework hands you most of the tools, but a default build still fails plenty of audits. This guide shows exactly how we close that gap.

Key Takeaways

• A page passes when LCP is 2.5s or less, INP is 200ms or less, and CLS is 0.1 or less, measured at the 75th percentile of real users (web.dev, 2025).
• Only 48% of mobile origins passed all three vitals in 2025, and LCP is the weakest link at 62% (Web Almanac, 2025).
• Speed is money: an e-commerce site that loads in 1 second converts about 2.5x better than one at 4 seconds (Portent, 2022).
• Next.js wins on the fixes that matter most: the Image and Font components, Server Components, and dynamic() lazy loading.

What Are Core Web Vitals in 2026?

Core Web Vitals are three metrics Google uses to score real-world page experience: loading, interactivity, and visual stability. A URL passes only when all three sit in the "good" band at the 75th percentile of page views (web.dev, 2025). One slow metric fails the whole page, so you cannot trade a great layout score against a sluggish load.

The biggest change is interactivity. Interaction to Next Paint (INP) replaced First Input Delay on 12 March 2024 (web.dev, 2024). FID only measured the delay before your first tap registered. INP measures the full latency of every interaction across the visit, then reports the worst one. It is a much harder test, and heavy client-side JavaScript is what usually breaks it.

Here are the targets you are aiming for. Anything in the middle band is a warning, and the poor band is a failure.

The 2026 thresholds

• LCP (loading): good is 2.5s or less, needs work is 2.5 to 4.0s, poor is over 4.0s.
• INP (interactivity): good is 200ms or less, needs work is 200 to 500ms, poor is over 500ms.
• CLS (visual stability): good is 0.1 or less, needs work is 0.1 to 0.25, poor is over 0.25.

Why Do Core Web Vitals Matter for SEO and Revenue?

They matter because slow pages lose money and rankings at the same time. Portent measured 5.6 million sessions and found B2C conversion dropping from 3.05% at a 1-second load to 0.67% at 4 seconds, a decline of roughly 0.3 points per added second (Portent, 2022). On the SEO side, Google confirms that good Core Web Vitals "align with what our core ranking systems seek to reward" (Google Search Central, 2025).

The revenue effect compounds. In Google and Deloitte's study of 37 brands and 30 million sessions, a single 0.1-second mobile speed improvement lifted retail conversions by 8.4% and average order value by 9.2% (web.dev, 2020). A tenth of a second sounds trivial until you multiply it across a quarter of traffic.

For a deeper look at how this ties into search, our guide to technical SEO for developers covers the indexing and rendering side. Speed is one pillar of a larger system.

How Many Sites Actually Pass Core Web Vitals?

Most do not, and mobile is where they struggle. The 2025 Web Almanac put the overall pass rate at 48% on mobile and 56% on desktop, with LCP the hardest metric at 62% good on mobile against 77% for INP and 81% for CLS (Web Almanac, 2025). Desktop INP is nearly solved at 97%, but phones with slow CPUs and patchy networks tell a different story.

The takeaway is strategic. If LCP fails most often, your first hour of optimization should go to the hero image and the fonts, not to micro-tuning a button handler. Fix the loud problem first.

How Do We Fix LCP in Next.js?

LCP fails when the largest element, usually a hero image or headline, takes too long to render. Since only 62% of mobile sites pass it, this is where the biggest wins live (Web Almanac, 2025). The Next.js Image component is the single most important fix: it serves modern formats, generates responsive sizes, and lets you flag the hero so it loads first.

Set priority on the one image above the fold. That tells Next.js to preload it instead of lazy-loading, which on a hero image is the difference between passing and failing.

import Image from 'next/image';

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

Fonts are the second LCP trap. A late-loading web font blocks text paint and can shift the headline. next/font self-hosts the file at build time, removes the network request to Google, and applies font-display: swap for you.

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });

export default function RootLayout({ children }) {
  return <html className={inter.className}><body>{children}</body></html>;
}

Finally, render above-the-fold content on the server. Server Components ship HTML the browser can paint immediately, with no hydration wait. Keep the hero, the headline, and the primary copy as server-rendered output, and push interactivity to the edges. In our builds, moving a hero out of a client component and adding priority routinely pulls mobile LCP under 2.5s on its own.

How Do We Fix INP in Next.js?

INP fails when JavaScript blocks the main thread while a user is trying to interact. The fix is simple to state and harder to do: ship less JavaScript. Every component you keep on the server is code the browser never has to parse, and that directly improves interaction latency (web.dev, 2024).

Lazy-load anything heavy that is not needed for the first paint. A chat widget, a carousel, a map, or a rich editor should load on demand with dynamic(), not in the initial bundle.

import dynamic from 'next/dynamic';

const CommentEditor = dynamic(() => import('./CommentEditor'), {
  ssr: false,
  loading: () => <div className="editor-skeleton" />,
});

For expensive state updates, tell React they are not urgent. Wrapping a filter or search update in useTransition keeps the input responsive while the list re-renders in the background, which is exactly what INP rewards.

'use client';
import { useState, useTransition } from 'react';

export function Filter({ items }) {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');

  return (
    <input
      onChange={(e) => {
        const value = e.target.value;
        startTransition(() => setQuery(value));
      }}
    />
  );
}

Does every interactive feature need to be in the bundle on load? Almost never. Audit your client components, and you will usually find a third of them can move to the server. For a full architecture pass, our Next.js development service exists for exactly this kind of refactor.

How Do We Fix CLS in Next.js?

CLS fails when elements move after they paint, and the usual culprits are images without dimensions, late fonts, and injected banners. The rule is to reserve space for everything before it arrives. When you pass width and height to the Next.js Image component, it generates a CSS aspect-ratio box that holds the layout steady before the file loads.

The same logic applies to embeds and ads. Wrap any third-party iframe in a container with a fixed min-height so the content below does not jump when the embed hydrates.

<div style={{ minHeight: 400, position: 'relative' }}>
  <Image src="/chart.webp" alt="Quarterly results" fill sizes="100vw" />
</div>

Fonts cause the subtle shifts. next/font reduces this by matching a fallback metric to your web font, so the swap from system text to the loaded face barely moves. Combined with sized images, this is what keeps CLS comfortably under the 0.1 target. CLS is the easiest vital to pass once you make "reserve the space" a habit.

How Do We Measure and Monitor the Results?

Lab tools lie a little, so measure real users. Lighthouse and PageSpeed Insights give you a fast read in a controlled environment, but Google ranks on field data from the Chrome User Experience Report, gathered from actual Chrome visitors over 28 days. The mobile pass rate has climbed every year, from 36% in 2023 to 48% in 2025, and the bar keeps rising (Web Almanac, 2025).

To collect your own field data, the useReportWebVitals hook streams every metric from real sessions to your analytics endpoint. Vercel Speed Insights wraps this for you, but the raw hook works anywhere.

'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function WebVitals() {
  useReportWebVitals((metric) => {
    navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
  });
  return null;
}

Our finding: lab and field scores diverge most on INP, because Lighthouse runs on a fast machine with no real taps. Trust the CrUX number for INP, and treat the Lighthouse score as a smoke test only.

Ready to Pass Your Audit?

Core Web Vitals reward sites that respect the user's time, and Next.js is built for it. If your current stack is fighting you, or you want a build that ships fast by default, we plan, build, and tune Next.js sites end to end. See our pricing or get in touch to talk through your numbers.

Frequently Asked Questions

What are the Core Web Vitals thresholds in 2026?

A page passes when LCP is 2.5 seconds or less, INP is 200 milliseconds or less, and CLS is 0.1 or less. Google measures each metric at the 75th percentile of real user page views (web.dev, 2025), so a handful of fast loads will not rescue a slow tail.

Does Next.js automatically pass Core Web Vitals?

No. Next.js gives you the Image and Font components, Server Components, and streaming, but a default build can still fail. You have to set image priority, reserve layout space, and trim client JavaScript. The framework removes the hard parts, it does not remove the work.

What replaced First Input Delay?

Interaction to Next Paint replaced First Input Delay on 12 March 2024 (web.dev, 2024). INP measures the latency of every interaction during a visit, not just the first one, which makes heavy JavaScript far more visible in the score.

Do Core Web Vitals affect Google rankings?

Yes, as part of the page experience signals. Google states that good vitals align with what its core ranking systems reward (Google Search Central, 2025). The effect is strongest on competitive mobile queries where many results are otherwise similar.

Which Core Web Vital is hardest to pass on mobile?

Largest Contentful Paint. Only 62% of mobile origins reached a good LCP in 2025, against 77% for INP and 81% for CLS (Web Almanac, 2025). Slow hero images and render-blocking fonts are the usual cause, which is why the Image component is the first fix.

Conclusion

Passing Core Web Vitals is not luck, it is a checklist. Fix LCP with the Image component, priority, and next/font. Fix INP by shipping less JavaScript through Server Components and dynamic(). Fix CLS by reserving space for every image and embed. Then measure real users with CrUX and the useReportWebVitals hook, because field data is what Google actually scores. Half the mobile web still fails this bar. A clean Next.js build is how you land in the faster half. When you are ready to ship, our latest guides and our team are here to help.