A pragmatic guide to Core Web Vitals in 2026

Core Web Vitals moved on. INP has been the interaction metric for a while, but plenty of guides still treat FID like it exists. Here is what we actually check for every project in 2026.

LCP: it is almost always an image

Nine times out of ten, the largest contentful paint element is the hero image. Preload it, prioritize it with fetchpriority="high", serve modern formats, and size it to the exact box it will render in. That alone gets most sites to green.

CLS: font metrics and images without dimensions

Layout shift usually comes from two places: web fonts swapping into a different metric, and images without width and height. Use font-metric overrides (or the Astro fonts API which handles this for you) and always set image dimensions.

INP: keep the main thread quiet

The interaction metric is really a JavaScript metric. Ship less, split what you must ship, and defer everything below the fold. If you can not measure a hydration cost, do not add the component.

The fastest interaction is the one that runs no code at all.

The checklist

• LCP image preloaded, prioritized, sized, and served as AVIF
• Fonts served as woff2, subsetted, with metric overrides
• Images have explicit width and height
• No third-party script above the fold
• Hydration only where it earns its keep