SOLUTIONSQuick answer
Core Web Vitals are Google's three user-experience metrics: Largest Contentful Paint (loading, good at 2.5 seconds or less), Interaction to Next Paint (responsiveness, good at 200 milliseconds or less) and Cumulative Layout Shift (visual stability, good at 0.1 or less). A page passes when at least 75% of real visits meet each threshold.
Key takeaways
- LCP is usually fixed by serving the hero image or heading faster: preload it, size it correctly and avoid render-blocking resources.
- INP is usually fixed by shipping and running less JavaScript on the main thread.
- CLS is usually fixed by reserving space for images, embeds, fonts and late-loading UI.
- Use field data from real users (CrUX, Search Console) to judge success; lab tools help you debug.
What are the Core Web Vitals thresholds?
| Metric | Measures | Good | Poor |
|---|---|---|---|
| LCP | Loading of the main content | ≤ 2.5 s | > 4.0 s |
| INP | Responsiveness to interactions | ≤ 200 ms | > 500 ms |
| CLS | Unexpected layout movement | ≤ 0.1 | > 0.25 |
Scores are assessed at the 75th percentile of page visits, separately for mobile and desktop. INP replaced First Input Delay as a Core Web Vital in March 2024 because it measures every interaction on a page, not only the first.
How do I improve Largest Contentful Paint (LCP)?
LCP marks when the largest image or text block in the viewport has rendered. Break it into four parts: server response time, the delay before the resource starts loading, the resource's download time, and render delay. Fix the largest part first.
- Serve HTML quickly: static generation and a CDN usually beat rendering on every request.
- Make the LCP image discoverable in the initial HTML; do not lazy-load it. In Next.js, use
next/imagewithpriority. - Serve modern formats (AVIF or WebP) at the displayed size instead of a large original.
- Remove render-blocking CSS and scripts that are not needed for the first view.
- Self-host fonts with
font-display: swap, whichnext/fontdoes automatically.
How do I improve Interaction to Next Paint (INP)?
INP measures the delay between a user's tap, click or key press and the next frame the browser paints. Poor INP almost always means the main thread is busy running JavaScript when the user interacts.
- Ship less JavaScript: keep interactive client components small and render content on the server.
- Break long tasks into smaller pieces and yield to the browser between them.
- Show immediate visual feedback, then do expensive work afterwards.
- Audit third-party scripts such as chat widgets and tag managers; they are frequent causes.
- Avoid re-rendering large component trees on every keystroke; debounce or use transitions.
// Yield to the browser so a pending interaction can be handled.
async function processInChunks<T>(items: T[], work: (item: T) => void) {
for (let i = 0; i < items.length; i++) {
work(items[i]);
if (i % 50 === 0) await new Promise((r) => setTimeout(r, 0));
}
}How do I fix Cumulative Layout Shift (CLS)?
CLS adds up unexpected movements of visible content. Shifts within 500 milliseconds of a user interaction are excluded, so the problem is content that moves on its own while someone is reading or about to click.
- Always give images and videos width and height, or an aspect ratio.
- Reserve space for ads, embeds, cookie banners and anything injected after load.
- Use font fallbacks with matching metrics to avoid text reflow when web fonts load.
- Animate with
transformandopacityrather than properties that change layout.
How should I measure Core Web Vitals?
Use field data to decide whether you have a problem, and lab data to find the cause. Field data comes from real Chrome users through the Chrome UX Report and appears in PageSpeed Insights and Search Console. Lab tools such as Lighthouse and Chrome DevTools run a single simulated visit and are best for debugging.
Low-traffic sites may not have enough visits for field data. In that case, collect your own measurements with the web-vitals JavaScript library and test on a mid-range Android phone, not only a fast laptop.
Do Core Web Vitals affect Google rankings?
Yes, as part of Google's page experience signals, but relevance and content quality matter more. A fast page with weak content will not outrank a genuinely better answer. The larger benefit is usually commercial: faster, stable pages keep more visitors and convert more of them. See our technical SEO checklist for Next.js for the other foundations.
Frequently asked questions
What is a good LCP score?
A good Largest Contentful Paint is 2.5 seconds or less for at least 75% of page visits. Between 2.5 and 4 seconds needs improvement, and over 4 seconds is poor.
What replaced First Input Delay?
Interaction to Next Paint (INP) replaced First Input Delay as a Core Web Vital in March 2024. INP considers the responsiveness of all interactions during a visit.
Why is my Lighthouse score different from PageSpeed field data?
Lighthouse runs one simulated visit under fixed conditions, while field data aggregates real visits on real devices and networks. Use field data to judge experience and Lighthouse to diagnose causes.