Core Web Vitals (CWV) are a set of metrics Google uses to measure the real-world user experience of loading a webpage. Since the Page Experience update in 2021, they have been a confirmed ranking factor. Understanding them — and fixing them — is one of the highest-leverage technical SEO improvements available.
The three Core Web Vitals
LCP — Largest Contentful Paint
What it measures: How long it takes for the largest visible element on the page to load. This is typically a hero image, a large heading, or a video thumbnail.
Good threshold: Under 2.5 seconds
Why it matters: LCP is a proxy for perceived load speed. If the main content takes 5 seconds to appear, users experience the page as slow — even if the HTML loaded instantly.
Common causes of poor LCP:
- Unoptimised images (too large, wrong format, not compressed)
- Render-blocking JavaScript or CSS
- Slow server response times (TTFB over 0.8 seconds)
- No CDN for assets
INP — Interaction to Next Paint
What it measures: The latency of all user interactions (clicks, taps, keyboard input) throughout a page visit. INP replaced FID (First Input Delay) in March 2024.
Good threshold: Under 200ms
Why it matters: INP captures responsiveness across the full visit, not just first load. A page that loads fast but lags when you click a menu or submit a form will score poorly.
Common causes of poor INP:
- Heavy JavaScript execution blocking the main thread
- Third-party scripts (chat widgets, analytics, ad tags)
- Unoptimised event handlers
- Large DOM trees
CLS — Cumulative Layout Shift
What it measures: The total amount of unexpected layout movement during the page's lifetime. Calculated by combining impact fraction and distance fraction of each shift.
Good threshold: Under 0.1
Why it matters: Layout shifts cause users to click the wrong element. Ads that load late and push content down, images without specified dimensions, and dynamically injected banners are the most common culprits.
Common causes of poor CLS:
- Images without
widthandheightattributes - Ads or embeds with no reserved space
- Web fonts that swap and cause text reflow (FOUT)
- Dynamically injected content above existing content
How to measure your CWV
PageSpeed Insights
Go to pagespeed.web.dev. Enter your URL. Look at both:
- Lab data (simulated, from Lighthouse) — useful for development testing
- Field data (real user data from Chrome UX Report) — what actually matters for rankings
Focus on field data. Lab data can look different from real-world performance because it does not account for JavaScript execution in real browsers and real network conditions.
Google Search Console
Open Search Console → Experience → Core Web Vitals. This shows aggregated real-user data for groups of similar pages — your most accurate view of ranking impact.
Fixing the most common problems
Fix 1: Preload your LCP image
If your LCP element is an image, preload it in the <head>:
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
This instructs the browser to download the image as early as possible, before the CSS and JavaScript have finished parsing.
Fix 2: Convert images to WebP
WebP images are typically 25–35% smaller than JPEG at equivalent quality. Next.js handles this automatically via the <Image> component with next/image.
Fix 3: Set explicit dimensions on all images
<img src="photo.webp" width="1200" height="630" alt="..." />
Without explicit dimensions, the browser cannot reserve space before the image loads — causing CLS as it shifts surrounding content when it appears.
Fix 4: Defer non-critical JavaScript
Move third-party scripts (analytics, chat, social embeds) to load after the main content:
<script src="analytics.js" defer></script>
Fix 5: Use font-display: swap for web fonts
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap;
}
This prevents invisible text during font loading. The tradeoff is a brief flash of unstyled text — acceptable for most sites.
Prioritisation
You do not need a perfect score on every metric. Focus on:
- Getting all three metrics into the "Good" range for mobile (this is harder than desktop)
- Prioritising pages that generate revenue or leads (homepage, service pages, landing pages)
- Using field data, not lab data, as your benchmark
A 5-point improvement in LCP on your homepage will move the needle more than a perfect score on an obscure blog post.
— STRATEGY SESSION
Need more traffic?
Turn your blog into a lead machine. Book a free SEO consultation with us.
