Core Web Vitals are Google's framework for measuring real-world page experience, and they're a confirmed ranking factor. Next.js gives you a significant head start over most frameworks, but a poorly configured Next.js site can still fail these metrics. Here's a practical guide to diagnosing and fixing each one.
Step 1: Measure Before You Fix
Before changing anything, get accurate baseline measurements. There are two types of CWV data:
Field data (real user measurements) — Available in Google Search Console under "Core Web Vitals" and in PageSpeed Insights as "Discover what your real users are experiencing." This is what Google uses for ranking. It requires enough traffic to generate statistical significance.
Lab data — Available in Lighthouse (Chrome DevTools → Lighthouse tab) and PageSpeed Insights. Useful for development, but Google doesn't use it for ranking decisions.
Always fix based on field data where it's available. Lab scores can be misleading — a page can score 100 in Lighthouse and still have poor field INP if there's heavy client-side JavaScript.
Step 2: Fixing LCP (Largest Contentful Paint)
LCP should be under 2.5 seconds. The most common causes on Next.js sites:
Hero images loading too late. Every hero image should use the priority prop on next/image. This tells Next.js to preload the image and not lazy-load it:
<Image src="/hero.webp" alt="Hero" width={1200} height={600} priority />
Wrong image format. next/image automatically serves WebP and AVIF, but only if you're using the component. If you have <img> tags anywhere — check your Markdown renderers and third-party components — those images won't be optimised.
Slow server response (TTFB). On Vercel, TTFB should be under 200ms. If it's higher, check whether you're making slow database calls in generateStaticParams or layout components. Prefer static generation over server-side rendering for pages where content changes infrequently.
Render-blocking fonts. Add display: "swap" to all Google Fonts imports in Next.js:
const inter = Inter({ subsets: ["latin"], display: "swap" });
Step 3: Fixing CLS (Cumulative Layout Shift)
CLS should be under 0.1. The most common causes on Next.js sites:
Images without explicit dimensions. Always provide width and height to next/image. The component uses these to reserve space before the image loads, preventing layout shift.
Web fonts causing FOUT. Use font-display: swap (handled automatically by next/font/google) and preconnect to font origins. Avoid loading fonts from CDNs that aren't preconnected.
Dynamically injected banners or cookie notices. If a cookie banner or notification appears above content after the page loads, it pushes content down and generates CLS. Reserve the space in your layout, or use fixed positioning so it overlaps rather than displaces content.
Step 4: Fixing INP (Interaction to Next Paint)
INP should be under 200ms. This replaced FID in 2024 and is the hardest CWV to fix because it measures interactivity throughout the page lifecycle, not just on load.
Heavy client components. In Next.js App Router, components that don't need interactivity should be server components. "use client" should only appear when you actually need browser APIs, event handlers, or hooks. Unnecessary client components increase the JavaScript bundle that must be parsed and executed.
Blocking the main thread. Large JavaScript bundles that run synchronously block user interactions. Use dynamic imports for heavy components:
const HeavyComponent = dynamic(() => import("./HeavyComponent"), { ssr: false });
Third-party scripts. Analytics, chat widgets, and advertising scripts are a frequent source of INP issues. Load them with next/script using strategy="afterInteractive" or strategy="lazyOnload" to defer their execution until after the page is interactive.
Step 5: Monitoring After the Fix
Fixes don't show up in field data immediately. Google's CrUX data (which powers Search Console and PageSpeed Insights field data) has a 28-day rolling window. Expect to wait 4–6 weeks after deploying fixes before you see field data improve.
During that window, track lab scores to confirm the fixes are working. Set up Vercel Analytics to monitor real user Core Web Vitals continuously — it surfaces INP issues that lab tools miss.
Once field data catches up, you should see correlating improvements in organic rankings, particularly for pages that were previously in the "needs improvement" or "poor" range. Pair this work with the remaining items on our technical SEO checklist for UK websites — Core Web Vitals are one of 20 factors that determine your rankings.
The Shortcut: Build It Right First
Every step in this guide exists because the site wasn't built with these considerations from the start. The most cost-effective approach is to build on a properly configured Next.js foundation that starts with green Core Web Vitals. These improvements also have a direct business impact beyond rankings — the data on website speed and conversion rate shows exactly how measurable that is.
Our web design and development service includes technical SEO and Core Web Vitals optimisation as standard on every project. If you want to know where your current site stands, a free audit will show you exactly which metrics are affecting your rankings.
Ready to grow your business online? Get your free audit →