On this page
Core Web Vitals matter for ranking, but they matter more because a slow site loses conversions regardless of where it ranks. Mobile users on a mediocre connection abandon fast, and they are usually most of your traffic.
The three metrics
| LCP — Largest Contentful Paint | How long until the biggest element in the viewport renders. Target under 2.5 seconds. Usually your hero image or headline. |
|---|---|
| INP — Interaction to Next Paint | How quickly the page responds when someone taps or clicks. Target under 200 milliseconds. Replaced First Input Delay because FID only measured the first interaction. |
| CLS — Cumulative Layout Shift | How much content jumps around while loading. Target under 0.1. Caused by elements loading without reserved space. |
Fixing LCP
- Serve the hero image in a modern format at the size actually displayed. Sending a 3000px image to a 400px slot is the single most common cause.
- Do not lazy-load the hero. Lazy loading below the fold is good; lazy loading the LCP element actively delays it.
- Preload the LCP image and the fonts used in the headline.
- Remove render-blocking CSS and JavaScript from the head. Inline the critical CSS if the framework allows.
- Check your server response time. If the HTML takes 800ms to arrive, no front-end work will save you.
Fixing INP
- Reduce JavaScript. This is almost always the answer. Audit third-party scripts — chat widgets, analytics, heat mapping, A/B testing and ad tags are the usual culprits.
- Break long tasks up so the main thread can respond between chunks.
- Defer anything not needed for the first interaction.
- Be sceptical of tag managers. They are a convenient way for scripts to accumulate without anyone owning the total cost.
Fixing CLS
- Set explicit width and height on every image and video so the browser reserves the space.
- Reserve space for ads, embeds and iframes, including when they fail to load.
- Avoid inserting banners, cookie notices or promotional bars above existing content after load.
- Use font-display: optional or swap with a metric-matched fallback so text does not reflow when the webfont arrives.
Measuring it properly
Lab tools like Lighthouse are useful for diagnosis but they are a simulation. What counts for ranking is field data — real users on real devices — which you can see in Search Console's Core Web Vitals report and in the Chrome UX Report. A perfect Lighthouse score with failing field data usually means your real users are on slower devices and connections than the test assumed.
Test on a real mid-range Android phone on a throttled connection at least once. It is consistently sobering and it changes priorities.
The biggest wins, in order
- 1Cut third-party JavaScript. Nothing else comes close for most sites.
- 2Right-size and modernise images.
- 3Fix layout shift with explicit dimensions — cheap and immediate.
- 4Improve server response time or add caching.
- 5Reduce your own JavaScript bundle.
Want this done for you?
We will tell you honestly whether you need us for it. Send a two-line description of the business and we come back with a plan, a timeline and one fixed price.