Web Performance in 2025: Core Web Vitals and INP

Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) in March 2024. INP measures the whole interaction, not just the first one. Here is how to score green on all three Core Web Vitals.

The three metrics

Metric	Measures	Good	Needs work
LCP (Largest Contentful Paint)	Hero element render time	< 2.5 s	< 4 s
INP (Interaction to Next Paint)	Worst interaction latency	< 200 ms	< 500 ms
CLS (Cumulative Layout Shift)	Visual stability	< 0.1	< 0.25

LCP — fix the hero

1. Preload the LCP image: <link rel="preload" as="image" href="hero.webp" fetchpriority="high">.
2. Serve AVIF or WebP (30–60% smaller than JPEG).
3. Ensure the hero image is not lazy-loaded.
4. Send critical CSS inline; defer the rest.
5. Use fetchpriority="high" on the LCP <img>.

INP — fix long tasks

1. Break long JS tasks with scheduler.yield() (Chromium) or setTimeout(0).
2. Move heavy work to Web Workers.
3. Debounce input handlers; do not synchronously render on every keystroke.
4. Avoid forced reflows: read DOM, then write — never alternate.
5. Mind third-party scripts (analytics, chat, ads); audit their main-thread cost.

CLS — reserve the space

1. Always set width and height (or aspect-ratio) on images and iframes.
2. Reserve space for ads with min-height.
3. Avoid inserting content above existing content after load.
4. Preload web fonts and use font-display: optional for non-critical text.

Measure in the field, not the lab

• CrUX (Chrome User Experience Report) — real anonymized data per origin.
• web-vitals JS library — send to your analytics with proper sampling.
• PageSpeed Insights — combines lab (Lighthouse) and field (CrUX) data.

Quick wins

• Self-host fonts; preload exactly the weights you use.
• Replace 3rd-party widgets with HTML alternatives where possible.
• Split JS by route; ship < 100 KB JS to the LCP route.
• Add loading="lazy" to below-the-fold images and iframes.
• Use content-visibility: auto for long lists.

TL;DR

LCP is about the network, INP is about the main thread, CLS is about reserving space. Optimize each with the cheapest fix first; the field data will follow.