Core Web Vitals are Google's metrics for measuring real-user page experience. They directly affect search rankings. Understanding what each metric measures and what causes failures is the starting point for any performance work.
The Three Metrics and Their Targets
LCP (Largest Contentful Paint) measures when the largest visible element -- usually a hero image or headline -- finishes rendering. Good: under 2.5 seconds. Needs improvement: 2.5 to 4 seconds. Poor: over 4 seconds.
CLS (Cumulative Layout Shift) measures unexpected layout movement. When an image loads and pushes content down, or an ad injects above existing content, that is layout shift. Good: under 0.1. Needs improvement: 0.1 to 0.25. Poor: over 0.25. CLS is scored as a cumulative value, so many small shifts accumulate.
INP (Interaction to Next Paint) replaced FID (First Input Delay) in March 2024. It measures the time between a user interaction (click, keypress, tap) and when the next frame is painted in response. Good: under 200 milliseconds. Needs improvement: 200 to 500 milliseconds. Poor: over 500 milliseconds.
The 75th Percentile Rule
You need 75% of real-user sessions (not your own fast connection) to pass all three metrics. This is the detail that trips most developers. Lighthouse scores from your laptop on fiber internet do not reflect the 75th percentile of your users.
A user on a mid-range Android phone on 4G is much closer to your median user than your M3 MacBook on 100Mbps. Test on representative hardware and network conditions, and use field data from PageSpeed Insights or Search Console to see what real users experience.
What Causes LCP Failures
Slow server response time. If the server takes 1 second to respond, LCP cannot be under 2.5 seconds on a slow connection. Measure Time to First Byte (TTFB) separately. Over 600ms TTFB is a problem.
Render-blocking CSS and JavaScript. Scripts and stylesheets in the <head> block parsing. Anything that delays parsing delays when the browser can start rendering. Use defer or async for non-critical scripts. Inline critical CSS.
Slow image loading. If the LCP element is an image, it needs to load fast. Use modern formats (WebP, AVIF), appropriate dimensions, and -- critically -- add fetchpriority="high" to the LCP image to tell the browser to prioritize it.
Images discovered late. If the LCP image URL is in CSS or JavaScript rather than the HTML, the browser cannot discover it in the initial HTML parse. Preload it with <link rel="preload" as="image"> or use an <img> tag in the HTML.
In Next.js: use <Image priority /> on your above-the-fold hero image. This adds the preload link and disables lazy loading.
What Causes CLS Failures
Images and videos without dimensions. When a browser encounters an <img> without width and height attributes (or CSS dimensions), it does not reserve space for it. When the image loads, the browser must reflow the layout, shifting everything below the image down. Always specify dimensions on images.
Late-loading web fonts. When a web font loads after the fallback system font is displayed, the letter spacing, line height, and word width changes cause layout shift. Use font-display: optional (which does not swap at all) or optimize with font-display: swap and size-adjust to minimize the shift.
Dynamically injected content above existing content. Ads, cookie banners, and notification bars that appear above the fold after the page loads shift everything below them. Reserve space for these elements before they load.
Animations using top, left, right, bottom, width, height, margin, or padding. These CSS properties trigger layout recalculation. Use transform and opacity for animations instead. They do not cause layout shift and are GPU-accelerated.
What Causes INP Failures
INP is about JavaScript blocking the main thread. When the main thread is busy executing JavaScript, it cannot respond to user input. The result is a page that feels frozen or sluggish.
Long tasks. A task that takes more than 50ms is a "long task." These block the main thread. Common causes: large JavaScript bundles executing on load, heavy third-party scripts (analytics, chat widgets, A/B testing), unoptimized event handlers.
Heavy event handlers. An onClick that does expensive computation synchronous with the click will cause a high INP. Move expensive work off the main thread (Web Workers), defer it (setTimeout with 0ms), or break it into smaller chunks with scheduler.yield().
Third-party scripts. Marketing tags, analytics, session recording tools, and chat widgets are frequent INP culprits. They run JavaScript on your page that you do not control. Load them with async or defer, and consider using a tag manager that loads scripts lazily.
Measurement Tools
Chrome DevTools Performance tab records a trace of the page. The flame chart shows which JavaScript tasks are long (shown in red). The Timings section shows LCP, CLS, and INP markers.
PageSpeed Insights (pagespeed.web.dev) runs Lighthouse for lab data and shows field data from the Chrome User Experience Report (CrUX) if your site has enough traffic. The field data is real-user percentile data -- the most important number.
Search Console Core Web Vitals report shows which pages fail by metric, grouped by URL pattern. It uses 28 days of field data. This is the authoritative view of what Google sees.
web-vitals JavaScript library measures Core Web Vitals in your users' browsers and reports them to your analytics. The most accurate way to measure real-user performance if you need more granularity than CrUX provides.
Where to Start
If you have not measured yet: run PageSpeed Insights on your most important pages (homepage, top landing pages). Look at the field data, not the lab score. Identify which metric is failing and why.
Fix LCP first (it has the largest search impact), then CLS (usually fixable with HTML changes alone), then INP (requires JavaScript profiling).
Most CLS problems can be fixed in a day with dimension attributes on images and font-display adjustments. LCP improvements require server optimization or image optimization depending on the root cause. INP is the hardest to fix and requires JavaScript profiling.
Keep Reading
- Next.js Performance Optimization: The Practical Guide for Production Apps -- Next.js-specific tools for improving these metrics
- Web Accessibility in 2026: The Practical Guide for Developers -- accessibility improvements that often improve performance too
- Next.js Caching in 2026: The Complete Guide to All Four Layers -- caching to improve TTFB and LCP
Pristren builds AI-powered software for teams. Zlyqor is our all-in-one workspace -- chat, projects, time tracking, AI meeting summaries, and invoicing -- in one tool. Try it free.
