Core Web Vitals in practice: a field guide

Google's Core Web Vitals measure how a page feels: how quickly the main content appears, how fast it responds to input and whether it jumps around while loading.

Largest Contentful Paint (LCP)

LCP measures when the biggest element on screen finishes rendering, usually a hero image. The fixes that helped most:

• Serve images from an image CDN in modern formats like AVIF and WebP
• Set explicit width and height on every image
• Preload the hero image and never lazy-load it

Interaction to Next Paint (INP)

INP replaced First Input Delay and measures responsiveness throughout the visit. Shipping less JavaScript is the single biggest win. Server-side rendering with selective hydration means most of the page is plain HTML.

Cumulative Layout Shift (CLS)

Layout shift happens when content moves after it appears. Reserve space for images and embeds, and avoid injecting banners above existing content.

On our last three projects these fixes took the mobile performance score from the 60s to the high 90s.