Core Web Vitals: a practical fix-it guide for real websites

Core Web Vitals turned page speed from a vague goal into three concrete numbers Google actually ranks on. The good news: you rarely need a full rebuild to fix them. This guide walks through a calm, repeatable process you can run in an afternoon.

What the three metrics actually measure

Largest Contentful Paint (LCP) measures loading, Cumulative Layout Shift (CLS) measures visual stability, and Interaction to Next Paint (INP) measures responsiveness. Each maps to a real frustration your visitors feel.

Largest Contentful Paint

LCP is the time until the biggest element above the fold finishes rendering. Aim for under 2.5 seconds. The usual culprits are unoptimised hero images, render-blocking fonts and slow servers.

If your hero image is the LCP element, serving it as a properly sized, modern-format file is the single highest-leverage fix you can make.

Cumulative Layout Shift

CLS happens when content jumps as the page loads. Reserve space for images and ads with explicit dimensions, and never inject content above existing content after load.

A fix-it checklist you can run today

• Compress and resize hero images, then serve modern formats.
• Preload your primary font and use font-display: swap.
• Add width and height to every image.
• Defer non-critical JavaScript so the main thread stays free.

Measuring before and after

Use field data from the Chrome User Experience Report, not just lab tools, to confirm real users feel the improvement. Re-measure a week after deploying so caches and crawls catch up.

Fix the biggest offender first, measure, repeat. Small, ordered wins beat a risky rewrite every time.