Since 2021, Google has used Core Web Vitals as a direct ranking factor. In 2025, with the update that replaced FID with INP, the metrics have become even more demanding. Let's look at what they measure, why they matter and how to improve them concretely.
The three fundamental metrics
LCP — Largest Contentful Paint
Measures the time needed for the largest content on the page (usually a hero image or text block) to become visible. Target: under 2.5 seconds. Under 4s is in the 'needs improvement' range, above is 'poor'.
INP — Interaction to Next Paint
Replaced FID in March 2024. Measures site responsiveness: how long passes between a user interaction (click, tap, typing) and the visual response of the page. Target: under 200ms.
CLS — Cumulative Layout Shift
Measures visual stability: how much elements shift during page loading. High CLS means elements that jump, text that moves, buttons that change position. Target: under 0.1.
Most common causes of high LCP
- Hero images not optimised (missing fetchpriority='high' and preload)
- Google fonts loaded in a blocking way
- High TTFB from slow servers or absent CDN
- Render-blocking CSS in the <head>
- Images in non-optimised format (JPEG instead of WebP/AVIF)
How to improve LCP: concrete strategies
The single most impactful thing is adding fetchpriority='high' to the hero image and, if possible, a <link rel='preload'> tag in the <head>. This tells the browser to give absolute priority to downloading that resource.
Second priority: self-hosting fonts instead of loading them from Google Fonts. One fewer external request means better LCP, especially on mobile connections.
How to improve INP
INP is often the hardest to optimise because it depends on how much JavaScript the browser executes on the main thread. The main strategies:
- Reduce third-party JavaScript (analytics, chat, widgets)
- Use requestIdleCallback for non-urgent operations
- Avoid CSS animations that trigger layout (width, height, top, left)
- Prefer transform and opacity for animations (GPU-accelerated)
- Load non-critical scripts with defer or async
How to improve CLS
CLS is the most fixable. 90% of CLS problems come from:
- Images without width and height attributes — the browser does not reserve space
- Web fonts causing FOUT (Flash of Unstyled Text)
- Third-party ads and widgets without fixed dimensions
- Elements inserted dynamically above existing content
In a recent audit on a client site, we reduced CLS from 0.42 to 0.02 simply by adding explicit width and height to all images and using font-display: swap for webfonts.
Tools to measure
Google PageSpeed Insights is the starting point. But note: it measures both lab data (simulation) and real data (CrUX). To optimise correctly, look at both. WebPageTest offers more detailed analysis. Chrome DevTools Performance panel is essential for diagnosing INP.
Conclusion
Core Web Vitals aren't just ranking metrics — they are a proxy for real user experience. A fast site converts better, has a lower bounce rate and retains users more. Optimisation is not a one-time activity: it needs monitoring over time, especially after every content or code update.