Skip to content
loopcode

All posts

Core Web Vitals and INP: speed alone is no longer enough

FID is gone, INP replaced it. And passing INP is harder than most sites expect.

Core Web Vitals are the three metrics Google uses to measure user experience. In March 2024 the FID metric was retired and replaced by INP. That change dropped a lot of sites out of the "good" bucket.

The three metrics and their thresholds

  • LCP (Largest Contentful Paint): when the largest content element becomes visible. Good: under 2.5 seconds.
  • INP (Interaction to Next Paint): how long until the screen updates after a user interaction. Good: under 200 ms.
  • CLS (Cumulative Layout Shift): how much content moves while the page loads. Good: under 0.1.

Assessment uses the 75th percentile of real user data. If a quarter of your users have a poor experience, you fail the threshold.

Why INP is hard

The old FID metric measured only the delay of the first interaction and ignored processing time entirely. INP looks at every interaction on the page and reports the worst one. It also counts the full path from click to painted result.

The consequence: JavaScript-heavy sites, especially interfaces that re-render on every interaction, struggle with INP.

How to improve INP

  1. Break up long tasks. Split JavaScript work running longer than 50 ms and yield to the browser in between.
  2. Defer third-party scripts. Chat widgets, heatmaps, A/B testing libraries all block the main thread. Use defer or load them after first interaction.
  3. Lighten your event handlers. A field that searches on every keystroke will wreck INP on its own. Debounce it.
  4. Stop unnecessary re-renders. If pressing one button rebuilds an entire list, update only what changed.

The three highest-impact LCP fixes

  • Prioritise the hero image with fetchpriority="high" and never lazy-load it
  • preload your font files and use font-display: swap
  • Get server response time (TTFB) under 600 ms — caching gives the biggest single win here

CLS: the cheapest win

CLS usually breaks for three reasons, all easy to fix:

  • Images missing width and height attributes
  • No reserved space for ads or embeds
  • Text resizing when the web font loads

Lab data or field data?

Tools like Lighthouse produce lab data: one simulated device. What Google uses for ranking is field data (CrUX). The two frequently disagree.

Rule of thumb: use Lighthouse to find the problem, and the Core Web Vitals report in Search Console to confirm the fix. Field data runs on a 28-day window, so it takes weeks to see your improvements land.

How much does it matter?

Core Web Vitals is a ranking factor, but a weak one. A fast page with poor content will not outrank a slow page with excellent content. The real return is in conversion: page speed improvements directly move cart abandonment and form completion rates.