Core Web Vitals: A Practical 2026 Checklist

Core Web Vitals get treated as an SEO chore. They are better understood as the only widely-adopted measurement of whether your site feels broken to the person using it. The ranking benefit is real but secondary; the conversion benefit is the reason to do the work.

Three metrics, three distinct failure modes.

Largest Contentful Paint — "is anything here yet?"

Target: under 2.5 seconds at the 75th percentile.

LCP measures when the biggest visible element finishes rendering. On most marketing pages that is the hero image or the headline.

Fix, in order of payoff

1. Serve modern image formats. Converting hero images to WebP or AVIF routinely cuts 40–70% of the bytes with no visible quality loss. This is usually the single biggest win available.
2. Preload the hero image. <link rel="preload" as="image" href="hero.webp"> tells the browser to start fetching before it has finished parsing your CSS.
3. Never lazy-load the LCP element. A loading="lazy" on the hero is self-sabotage — it delays the exact thing the metric measures. Lazy-load everything below the fold instead.
4. Inline critical CSS. A render-blocking stylesheet in the head means nothing paints until it lands.
5. Cut the time to first byte. Slow server responses cap your LCP no matter what you do in the browser. Cache pages, add an object cache, or move to better hosting.
6. Self-host fonts and use font-display: swap. Otherwise text is invisible while a third-party font loads.

Interaction to Next Paint — "did it hear me?"

Target: under 200 milliseconds.

INP is the strict one. It measures the full latency from a user interaction to the next frame the browser paints, and it reports on the worst interactions across the whole visit — not just the first one. Sites that comfortably passed the old First Input Delay metric frequently fail INP.

Fix, in order of payoff

1. Audit third-party scripts ruthlessly. Chat widgets, heat-map trackers, A/B testing tools and tag managers are the usual culprits. Load them with defer, delay them until first interaction, or remove them.
2. Break up long tasks. Anything holding the main thread beyond 50ms blocks every interaction behind it. Split the work and yield with scheduler.yield() or a setTimeout boundary.
3. Give immediate visual feedback. Paint the pressed state before doing the expensive work. Perceived responsiveness is what the metric captures.
4. Debounce expensive handlers. Search-as-you-type that fires on every keystroke will fail INP on a mid-range Android phone.
5. Avoid layout thrash. Reading a layout property then writing to it in a loop forces synchronous reflow on every iteration.

Cumulative Layout Shift — "stop moving"

Target: under 0.1.

CLS measures how much content jumps around while loading. It is the most irritating of the three and usually the easiest to fix.

Fix, in order of payoff

1. Put explicit width and height on every image and iframe. The browser then reserves the space before the file arrives. This alone resolves most CLS problems.
2. Reserve space for anything injected. Ad slots, cookie banners and embedded widgets need a min-height or they shove the page down on arrival.
3. Preload web fonts. Font swaps at different metrics reflow every line of text. size-adjust in your @font-face narrows the gap.
4. Animate transform, never top or height. Transforms are composited and do not trigger layout.
5. Insert new content below the fold, never above what someone is already reading.

Measure the field, not the lab

This is where most audits go wrong. Lighthouse runs on a simulated device on your office connection and produces a lab score. Google ranks on field data — the Chrome User Experience Report, gathered from real visitors on real phones and real networks.

A perfect Lighthouse score alongside failing field data is common and means your real users are having a materially worse experience than your test environment suggests. Check PageSpeed Insights for the field section, or the Core Web Vitals report in Search Console, and treat those numbers as the truth.

Where to start

Pull your Search Console Core Web Vitals report and sort by affected URL count. Fix the template with the most failing pages, not the page you happen to care about. One template fix typically resolves hundreds of URLs at once.