The Core Web Vitals Checklist Every Developer Should Follow in 2026

Core Web Vitals are Google's attempt to measure real user experience with three numbers. They're also a direct, measurable proxy for whether your site actually feels fast to a visitor — which makes them worth optimising even if you didn't care about the SEO angle at all.

The three metrics, in plain English

• LCP (Largest Contentful Paint) — how long until the biggest visible element (usually a hero image or heading) has rendered. Target: under 2.5 seconds.
• INP (Interaction to Next Paint) — how long the page takes to visibly respond after a click or tap. Target: under 200 milliseconds.
• CLS (Cumulative Layout Shift) — how much content jumps around as the page loads. Target: under 0.1.

The pre-launch checklist

LCP

• Hero image served in a modern format (WebP/AVIF), sized for the viewport, with fetchpriority="high" and no lazy-loading.
• Critical CSS inlined or loaded without render-blocking; non-critical CSS deferred.
• Fonts preloaded with font-display: swap to avoid invisible text during load.
• Server response time (TTFB) under 600ms — check hosting if this is consistently high.

INP

• No long JavaScript tasks blocking the main thread on page load — break up heavy initialisation work.
• Third-party scripts (chat widgets, analytics, ad tags) deferred or lazy-loaded after main content.
• Debounce expensive handlers on frequent events like scroll and resize.

CLS

• Explicit width and height attributes (or CSS aspect-ratio) on every image and embed.
• Reserved space for ads, embeds, and dynamically injected banners before they load.
• Web fonts sized to closely match the fallback font metrics to avoid reflow on font-swap.

Accessibility overlaps more than people expect

Several Core Web Vitals fixes double as accessibility improvements: reserved space for images helps low-vision users tracking content with screen magnification, and reduced main-thread blocking helps users on assistive technology that depends on timely focus management. Performance and accessibility work aren't separate checklists — they overlap substantially in practice.

Tools to measure with

PageSpeed Insights gives both lab data (Lighthouse) and real field data (CrUX) when the site has enough traffic. Chrome DevTools' Performance panel is the best tool for diagnosing exactly which JavaScript task is causing a specific INP problem. Test on an actual mid-range Android device or its Chrome DevTools throttling profile — testing only on a high-end laptop with fast Wi-Fi will consistently hide real-world problems.

Why this is a checklist, not a one-time task

Every new marketing embed, tracking pixel, or app integration is a potential regression. The projects that stay fast long-term run this checklist as part of code review for any change that touches the homepage or key landing pages — not just once before launch.