What Core Web Vitals measure
- Largest Contentful Paint (LCP): how long until the biggest visible element renders. Target: under 2.5 s.
- Interaction to Next Paint (INP): responsiveness to user input. Target: under 200 ms.
- Cumulative Layout Shift (CLS): how much content jumps around while loading. Target: under 0.1.
Images directly drive LCP (the hero image is usually the LCP element) and CLS (images without dimensions push content down as they load). Heavy image decoding can even hurt INP on low-end phones.
How WebP improves LCP
LCP is bounded by how fast the hero image's bytes arrive. Cutting a 600 KB JPEG to a 380 KB WebP at identical quality saves about 0.6 s on a typical 4G connection and 2+ seconds on slow 3G. Combine the format change with a proper maximum width (a 1600 px hero does not need to be 4000 px) and savings of 80–90% are common. That is frequently the difference between a red and a green LCP score.
The 'Serve images in next-gen formats' audit
Lighthouse and PageSpeed Insights list every JPEG and PNG on the page under this audit with an estimated saving. It is one of the few audits you can clear completely: convert each listed image to WebP (or AVIF) and the warning disappears. Because the estimate is based on real byte counts, the impact shows up immediately in the 'Performance' score.
Image optimisation checklist
- Convert to WebP at quality 75–82 for photos, 85–92 for graphics (converter).
- Resize to the largest displayed size × device pixel ratio (usually 1600–2400 px max).
- Set width and height attributes on every
<img>so the browser reserves space (fixes CLS). - Preload the hero image:
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">. - Lazy-load below the fold with
loading="lazy", but never on the LCP image. - Use `srcset` and `sizes` so phones download phone-sized images.
- Serve from a CDN with long cache headers.
- Avoid CSS background images for the hero; they cannot be preloaded as easily and are discovered late.
Real-world example
| Metric | Before (JPEG/PNG) | After (WebP + resize) |
|---|---|---|
| Page image weight | 2.9 MB | 540 KB |
| LCP (mobile, PSI) | 4.8 s | 2.1 s |
| Performance score | 48 | 89 |
| Next-gen formats audit | 14 images flagged | Passed |
Does this affect rankings?
Google has confirmed that page experience, including Core Web Vitals, is a ranking factor. It is a tiebreaker rather than a dominant signal, but on competitive queries tiebreakers matter. More importantly, faster pages convert better: Google's own research found that a 1-second delay in mobile load time can reduce conversions by up to 20%.