Core Web Vitals measure what a visitor experiences: how quickly the main content appears, how quickly the page responds, and whether it moves under their finger. They are a ranking signal, but they matter mainly because they describe frustration.
Largest Contentful Paint — how fast the main thing appears
LCP measures when the biggest element in the viewport finishes rendering — usually a hero image or headline. Target: under 2.5 seconds.
What breaks it
- A large unoptimised hero image.
- Render-blocking CSS or fonts loaded from a third-party domain.
- Slow server response before anything can start.
- Content injected by JavaScript after load.
What fixes it
- Serve the hero as WebP or AVIF, sized for the viewport.
- Self-host fonts and preload the one used above the fold.
- Remove render-blocking imports from the top of your stylesheet.
- Render the above-the-fold content on the server.
Interaction to Next Paint — how fast it responds
INP measures the delay between a user interacting and the page visibly responding. Target: under 200 milliseconds.
What breaks it
- Heavy JavaScript occupying the main thread.
- Large third-party scripts — chat widgets, tag managers, analytics stacks.
- Expensive work running on every scroll or input event.
- Hydrating an entire page of components that are not interactive.
What fixes it
- Ship less JavaScript. Split code so a page loads only what it uses.
- Audit third-party scripts and remove what nobody reads.
- Throttle scroll handlers.
- Keep non-interactive sections out of the client bundle entirely.
Cumulative Layout Shift — whether it jumps
CLS measures unexpected movement of content during load. Target: under 0.1.
What breaks it
- Images without width and height, so the browser cannot reserve space.
- Web fonts swapping and reflowing text.
- Banners or notices injected above existing content.
- Ads or embeds in containers with no fixed dimensions.
What fixes it
- Always set explicit dimensions or an aspect ratio on images and embeds.
- Use
font-display: swapwith a fallback of similar metrics. - Reserve space for anything that appears after load.
Measuring properly
Lab tools like Lighthouse run on one simulated device. Field data — what real visitors experienced — is what Search Console reports and what counts.
A perfect Lighthouse score with failing field data usually means your real users are on slower devices and worse connections than your test. Trust the field data.
Where to start
- Open Search Console's Core Web Vitals report and find which metric fails, on which template.
- Fix the template, not the individual page — one theme change usually moves hundreds of URLs.
- Re-measure after the field data updates, which takes weeks rather than hours.
Most sites fail exactly one metric for exactly one reason. Chasing all three at once wastes the afternoon.
Performance is one input among several — see what a business website costs for where it sits in a build budget.