Core Web Vitals: What to Fix First
Key takeaway
Fix Largest Contentful Paint first — it's the metric most sites fail and the one users feel most. In practice that means a properly sized, preloaded hero image, no render-blocking resources, and a fast server response; those three changes move most sites from failing to passing.
Core Web Vitals are Google's attempt to measure how a page feels: how fast the main content appears, how quickly it responds to input, and how much it jumps around while loading. They're a modest ranking factor and a significant conversion factor — slow pages lose users regardless of where they rank.
What each metric measures
- Largest Contentful Paint (LCP) — when the biggest visible element finishes rendering. Target under 2.5 seconds.
- Interaction to Next Paint (INP) — how quickly the page responds visually to taps and clicks across the whole visit. Target under 200ms.
- Cumulative Layout Shift (CLS) — how much content moves unexpectedly during load. Target under 0.1.
Fix LCP first
- Identify the LCP element — usually the hero image or headline. Everything else is secondary.
- Serve that image in a modern format, sized for the viewport, and preload it; don't lazy-load the element that is the LCP.
- Eliminate render-blocking CSS and JavaScript in the head; inline what's critical.
- Cut server response time — a CDN and cached HTML often deliver a bigger win than any front-end change.
- Self-host or preconnect fonts, and use font-display so text isn't invisible while a font loads.
Then CLS — usually the cheapest win
- Set explicit width and height (or aspect-ratio) on every image and video.
- Reserve space for ads, embeds, and cookie banners instead of injecting them above existing content.
- Avoid inserting content above the fold after load; if you must, push it into space already reserved.
Then INP
- Break up long JavaScript tasks; anything over 50ms blocks response.
- Ship less JavaScript — code-split and defer anything not needed for first interaction.
- Audit third-party tags; chat widgets, heatmaps, and tag managers are frequent culprits.
Measure the right thing
Lab tools (Lighthouse, PageSpeed Insights) are for diagnosis; field data from real users is what Google actually uses. Optimise against field data over a 28-day window, and check mobile separately — most failures live there, on the slower devices your lab machine doesn't emulate.