A practical Core Web Vitals checklist

Core Web Vitals are the rare case where SEO and user experience point in the same direction. This is the checklist I actually use before every launch.

LCP — Largest Contentful Paint (target: < 2.5s)

1. Identify the LCP element (usually the hero image or heading).
2. If it's an image: serve it in AVIF/WebP, size it correctly, and add fetchpriority="high". Never lazy-load it.
3. Preload the hero font with font-display: swap so text paints early.
4. Put static assets behind a CDN — Cloudflare's free tier is enough.

CLS — Cumulative Layout Shift (target: < 0.1)

• Every image and iframe gets explicit width and height.
• Reserve space for ads, embeds and cookie banners before they load.
• Never inject content above existing content after page load.
• Use transform animations, not properties that trigger layout.

INP — Interaction to Next Paint (target: < 200ms)

• Break up long tasks; nothing should block the main thread > 50ms.
• Defer third-party scripts (defer, or better: load on interaction).
• On WordPress: audit plugins ruthlessly — one bloated plugin can double your JavaScript execution time.

The meta-rule

Measure on a real mid-range phone over 4G, not on your dev machine. Field data (CrUX) is what Google ranks you on — lab scores are just a proxy.

Green vitals won't rank a bad page, but slow vitals will quietly tax every page you have. Fix them once, keep them fixed with a Lighthouse CI budget.