Core Web Vitals in 2026: What They Are and How to Fix Yours

What Core Web Vitals measure

Core Web Vitals are a set of performance metrics defined by Google that measure specific aspects of user experience. They're called "core" because Google has determined they represent the most important user-facing performance dimensions, and has incorporated them as ranking signals via the Page Experience algorithm.

LCP — Largest Contentful Paint

LCP measures how long it takes for the largest visible element on the page to finish rendering. This is typically a hero image, a large text block, or a video thumbnail. The target is under 2.5 seconds on a slow connection. Over 4 seconds is "Poor."

LCP is the most commonly failed metric and the most commonly fixable one. The biggest culprit is almost always the hero image: too large, not compressed, loaded without priority hints, or served without a CDN.

INP — Interaction to Next Paint

INP replaced FID (First Input Delay) in March 2024. Where FID measured the delay before the browser could respond to the first user interaction, INP measures the delay of all interactions throughout a page session — not just the first one. It captures click, tap, and keyboard interactions, and reports the worst interaction in a session (excluding outliers).

The target is under 200 milliseconds. Over 500ms is "Poor." INP failures are almost always caused by long JavaScript tasks blocking the main thread.

CLS — Cumulative Layout Shift

CLS measures visual stability — how much page content moves unexpectedly after it loads. A layout shift score of under 0.1 is "Good." Over 0.25 is "Poor." CLS is the metric most affected by ads, embeds, fonts, and images that load without reserved space.

How to check your scores

There are two types of data to look at: lab data and field data.

Lab data is what tools like PageSpeed Insights, Lighthouse (in Chrome DevTools), and WebPageTest measure in a controlled, simulated environment. It's useful for diagnosing specific issues but doesn't always match what real users experience.

Field data comes from the Chrome User Experience Report (CrUX) — real performance data collected from Chrome users who visit your site. Google uses field data for ranking, not lab data. You can see your field data in PageSpeed Insights (scroll down to "Discover what your real users are experiencing"), Google Search Console (Experience → Core Web Vitals), and Chrome UX Report on BigQuery.

If your lab score is 90 but your field data shows "Needs Improvement," the field data is what matters for rankings.

Fixing LCP

For most sites, improving LCP means improving how quickly the hero image loads. In order of impact:

Preload the LCP image. Add <link rel="preload" as="image" href="hero.webp"> to your <head>. This tells the browser to fetch the image early, before it's discovered in the HTML.
Convert images to WebP or AVIF. Modern formats are significantly smaller than JPEG or PNG at equivalent quality.
Add fetchpriority="high" to the hero img tag. This is a newer hint that tells the browser this image is high priority.
Serve images from a CDN. Reducing geographic latency for image delivery often has an outsized impact on LCP, especially for international visitors.
Eliminate render-blocking resources. CSS and synchronous JavaScript in the <head> delay the browser from rendering anything. Defer non-critical scripts.

Fixing INP

INP issues are rooted in JavaScript. When the main thread is busy processing JavaScript, user interactions have to wait. The fixes:

Identify long tasks. Use Chrome DevTools Performance panel to record a session and look for tasks taking over 50ms. These are blocking the main thread.
Break up long tasks. Long synchronous JavaScript can often be split into smaller chunks with setTimeout or scheduler.postTask() to yield control back to the browser between operations.
Defer third-party scripts. Analytics, chat widgets, and ad scripts are frequent INP culprits. Loading them with defer or async, or waiting until after user interaction, can significantly improve scores.
Remove unused JavaScript. Audit your bundle for dependencies that aren't used and remove them.

Fixing CLS

CLS is usually the most fixable metric because the causes are structural:

Set explicit width and height on images. Without dimensions, the browser can't reserve space for images before they load, causing content to shift down when they appear.
Reserve space for ads and embeds. If ad slots appear and push content down, set explicit minimum heights on ad containers.
Use font-display: optional or preload web fonts. Fonts loading late and causing text to reflow is a common CLS source. Preloading the font or using font-display: optional (which falls back to a system font if the web font isn't ready) eliminates the shift.
Avoid inserting content above existing content. Dynamically injecting banners, cookie notices, or alerts above the fold after page load causes CLS. Position these elements so they don't push content down.

Want your site's performance and Core Web Vitals improved?

I audit and fix LCP, INP, and CLS issues as part of site builds and standalone performance projects — with before/after PageSpeed Insights scores and GSC monitoring.

Get a quote