How to Improve Core Web Vitals: A Practical 2025 Guide
Core Web Vitals directly affect your Google ranking. This guide explains LCP, CLS, and INP in plain English and gives you a prioritised action list to improve each metric without a full site rebuild.
What Are Core Web Vitals and Why Do They Matter?
Core Web Vitals are a set of real-world performance metrics that Google uses to measure user experience on the web. Since the Page Experience update in 2021, they have been official Google ranking signals — meaning a site with poor Core Web Vitals will rank lower than a comparable site with good scores, all else being equal.
As of 2025, there are three Core Web Vitals:
| Metric | What It Measures | Good | Needs Improvement | Poor |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | How fast the main content loads | < 2.5s | 2.5–4.0s | > 4.0s |
| CLS (Cumulative Layout Shift) | How much the page jumps around | < 0.1 | 0.1–0.25 | > 0.25 |
| INP (Interaction to Next Paint) | How responsive the page is to clicks | < 200ms | 200–500ms | > 500ms |
INP replaced FID (First Input Delay) in March 2024. If you are still optimising for FID, you need to update your approach.
LCP: Making Your Main Content Load Faster
LCP measures the time from when the page starts loading to when the largest visible element — usually a hero image, a heading, or a video thumbnail — is fully rendered.
The most common LCP killers
Render-blocking resources. CSS and JavaScript files that load in the <head> delay the browser from rendering anything. Audit your <head> with Chrome DevTools → Performance → Waterfall and look for resources marked as render-blocking.
Unoptimised hero images. A 4MB JPEG hero image is the single most common cause of poor LCP. The fix is straightforward:
- Convert to WebP or AVIF format (typically 50–80% smaller than JPEG at equivalent quality).
- Add
widthandheightattributes to prevent layout shifts. - Add
fetchpriority="high"to the hero<img>tag to tell the browser to load it before other images. - Serve from a CDN with edge caching enabled.
Slow server response (TTFB). If your server takes more than 600ms to respond, your LCP will almost certainly be poor regardless of other optimisations. Check your Time to First Byte (TTFB) using WebPageTest. If it is high, consider upgrading your hosting tier, enabling server-side caching, or moving to a CDN-first architecture.
Quick wins for LCP
<!-- Preload your LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Use modern image formats -->
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="Hero" width="1200" height="600">
</picture>
<!-- Preload your LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Use modern image formats -->
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="Hero" width="1200" height="600">
</picture>
CLS: Stopping Your Page From Jumping Around
CLS measures the total amount of unexpected layout shift that occurs during the page's lifetime. A high CLS score means elements are moving around as the page loads — a deeply frustrating experience for users trying to click buttons or read text.
The most common CLS causes
Images without dimensions. When the browser does not know an image's dimensions before it loads, it allocates no space for it. When the image finally loads, everything below it jumps down. The fix is always to add width and height attributes.
Web fonts causing FOUT/FOIT. When a custom font loads, it can cause text to reflow if the fallback font has different metrics. Use font-display: optional or font-display: swap with size-adjust to minimise the shift:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap;
size-adjust: 105%; /* Adjust to match fallback font metrics */
}
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap;
size-adjust: 105%; /* Adjust to match fallback font metrics */
}
Dynamically injected content. Ads, cookie banners, and newsletter popups that load after the initial render are a major source of CLS. Reserve space for these elements with a fixed-height container, or load them in a way that does not push existing content.
Animations using top, left, width, or height. These properties trigger layout recalculation. Use transform and opacity instead — they run on the GPU and do not cause layout shifts.
INP: Making Your Page Feel Responsive
INP measures the time from a user interaction (click, tap, key press) to the next visual update on screen. A high INP means your page feels sluggish and unresponsive.
The most common INP causes
Long JavaScript tasks. Any JavaScript task that runs for more than 50ms blocks the browser's main thread and delays the response to user input. Use Chrome DevTools → Performance → Main Thread to identify long tasks.
Heavy event handlers. If your click handlers do a lot of synchronous work (DOM manipulation, data processing), they will delay the visual response. Break long tasks into smaller chunks using scheduler.yield() or setTimeout(fn, 0).
Third-party scripts. Analytics, chat widgets, and ad scripts are frequent INP offenders. Load them with async or defer, or use a tag manager with lazy loading enabled.
// Break up long tasks to improve INP
async function processLargeDataset(items) {
for (let i = 0; i < items.length; i++) {
processItem(items[i]);
// Yield to the browser every 50 items
if (i % 50 === 0) {
await scheduler.yield();
}
}
}
// Break up long tasks to improve INP
async function processLargeDataset(items) {
for (let i = 0; i < items.length; i++) {
processItem(items[i]);
// Yield to the browser every 50 items
if (i % 50 === 0) {
await scheduler.yield();
}
}
}
How SiteReveal Measures Your Performance Score
SiteReveal's performance dimension (weighted at 20% of the total WIS) detects the following signals:
- CDN presence — whether your assets are served from a content delivery network
- Asset compression — whether Gzip or Brotli compression is enabled
- Cache-Control headers — whether static assets have appropriate cache lifetimes
- Image optimisation — whether modern formats (WebP, AVIF) are in use
- HTTP/2 or HTTP/3 support — whether the connection uses a modern protocol
These signals are proxies for good performance practice. A site that scores well on all five signals will almost always have good Core Web Vitals in practice.
Your Prioritised Action List
If you are starting from a poor performance score, work through these in order:
- Enable Gzip/Brotli compression — typically a one-line server config change; immediate 60–80% reduction in transfer size.
- Serve assets from a CDN — Cloudflare's free tier is sufficient for most sites.
- Convert hero images to WebP — use Squoosh for a free, high-quality conversion.
- Add
widthandheightto all images — prevents CLS and helps the browser allocate space. - Set long Cache-Control headers for static assets —
max-age=31536000, immutablefor versioned files. - Defer non-critical JavaScript — add
deferto all<script>tags that are not needed for initial render.
After making these changes, run a fresh scan on SiteReveal to see your updated performance score.
See how your website scores
Get a free Website Intelligence Score™ covering security, performance, SEO, and technology stack.
Related Articles
How to Migrate Your Website to HTTPS: A Complete Step-by-Step Guide
Everything you need to know about migrating your website from HTTP to HTTPS without losing traffic, rankings, or functionality — including SSL certificate setup, redirect configuration, and post-migration verification.
How to Conduct a Technical SEO Audit: Step-by-Step Guide for 2025
A step-by-step guide to auditing your website's technical SEO — covering crawlability, indexability, structured data, Core Web Vitals, and how to use website intelligence tools to automate the process.
Website Speed Optimisation: The Complete Technical Guide for 2025
A comprehensive technical guide to making your website faster in 2025 — covering CDNs, image optimisation, Core Web Vitals, caching strategies, and how speed affects your WIS performance score.
The SiteReveal team builds tools that help developers, marketers, and founders understand what's really happening under the hood of any website — from security posture to performance bottlenecks and technology stack fingerprinting.