Core Web Vitals are Google's standardised metrics for measuring real-world user experience. They directly influence search rankings and are among the most actionable technical SEO factors available to developers. In 2024, Google retired First Input Delay (FID) and replaced it with Interaction to Next Paint (INP) — a more comprehensive measure of responsiveness that many development teams are still learning to address.
The Three Core Web Vitals
LCP: Fixing Slow Loading
LCP is most often the hero image on your landing page. The most effective fixes, in order of impact:
1. Preload the LCP Image
<link rel="preload" as="image" href="/hero.webp" />
This tells the browser to start downloading the hero image immediately, before parsing CSS or JavaScript. Can improve LCP by 0.5-1.5 seconds.
2. Use Modern Image Formats
Converting JPEG hero images to WebP reduces file size 25-35%, directly improving download time and LCP. Use AVIF for an additional 15-20% reduction where supported. You can batch-convert images using our free image compressor.
3. Eliminate Render-Blocking Resources
CSS and JavaScript in the <head> block rendering. Move non-critical JS to the end of body or use defer/async. Next.js handles this automatically for its own scripts.
4. Use a CDN
Serving assets from a CDN geographically close to users can reduce LCP by 0.3-1 seconds on its own. Vercel, Cloudflare, and Fastly all integrate well with Next.js.
INP: The New Responsiveness Metric
INP replaced FID in March 2024. While FID only measured the first interaction's input delay, INP tracks all interactions throughout a page session and reports the worst one (with some outlier exclusion). This means a page that loads fast but becomes sluggish as users interact — common with heavy React applications — will have a poor INP.
Common Causes of Poor INP
- • Long JavaScript tasks — JS blocking the main thread for 50ms+ during interactions
- • Excessive re-renders — React components re-rendering unnecessarily on every interaction
- • Third-party scripts — Analytics, chat widgets, ad scripts executing during user interactions
- • Synchronous DOM updates — Large DOM trees with expensive recalculations
Fixing INP in Next.js
- Use React Concurrent Features —
useTransitionanduseDeferredValueallow React to prioritise user-visible updates over background work - Debounce expensive operations — Search inputs triggering API calls on every keystroke create poor INP; debounce to 300ms
- Load third-party scripts lazily — Use Next.js Script component with
strategy="lazyOnload"for analytics and chat tools - Virtualise long lists — Rendering 1000 list items in the DOM makes everything slower. Use react-window or @tanstack/virtual for long lists
CLS: Eliminating Layout Shifts
CLS is caused by elements moving on screen after the initial render — typically because their dimensions weren't known when the page first painted. The most common causes:
- Images without width/height attributes — Always specify dimensions. In Next.js, the Image component handles this automatically
- Web fonts causing FOUT — Use
font-display: optionalor Next.jsnext/fontwhich prevents layout shifts - Dynamically injected content — Ad banners, cookie notices, and chat widgets that push content down cause significant CLS. Reserve space with CSS
- Animations — Only use
transformandopacityfor animations. Width/height/margin animations trigger reflow and cause CLS
Measuring After Changes
After making optimisations, use our Page Speed Comparison tool to benchmark before-and-after scores across your key pages. For ongoing monitoring, Google Search Console's Core Web Vitals report shows field data from real Chrome users — the data Google uses for ranking decisions.