In 2021, Google made page experience an official ranking factor through its Core Web Vitals update. Since then, site owners who ignore page speed have been paying for it in rankings. But Core Web Vitals can feel abstract — “LCP,” “CLS,” and “INP” don’t tell you much until you understand what they actually measure and why they matter.
This guide breaks down each metric in plain language, shows you how to measure your scores, and gives you concrete fixes you can implement today.
What Are Core Web Vitals?
Core Web Vitals are a set of standardized metrics Google uses to measure the real-world user experience of a web page. They focus on three aspects of loading and interactivity that research has shown most affect whether users stay on a page or bounce.
The three current Core Web Vitals are:
- LCP — Largest Contentful Paint (loading performance)
- CLS — Cumulative Layout Shift (visual stability)
- INP — Interaction to Next Paint (interactivity)
Google publishes thresholds for each metric: a “Good” score, a “Needs Improvement” score, and a “Poor” score. Pages that hit “Good” on all three are considered to provide a good page experience.
These metrics are part of a broader set of page experience signals Google considers for ranking, but the Core Web Vitals carry the most weight.
LCP: Largest Contentful Paint
LCP measures how long it takes for the largest visible content element on the page to finish loading. That element is usually a hero image, a large heading, or a banner — whatever is the most prominent thing in the viewport when the page first loads.
Thresholds:
- Good: 2.5 seconds or less
- Needs Improvement: 2.5–4.0 seconds
- Poor: more than 4.0 seconds
What Causes Slow LCP
- Large, uncompressed hero images
- Render-blocking CSS or JavaScript that delays page rendering
- Slow server response times (Time to First Byte)
- Images not preloaded or prioritized by the browser
How to Improve LCP
Optimize your hero image. Convert it to WebP, compress it to under 150KB, and add fetchpriority="high" to the <img> tag to tell the browser to load it before other resources.
<img src="hero.webp" alt="Description" fetchpriority="high">
Eliminate render-blocking resources. Move non-critical CSS and JavaScript to load asynchronously or defer their execution. Use async or defer on script tags.
Improve server response time. Use a Content Delivery Network (CDN) to serve assets from servers geographically close to your users. Enable server-side caching. Aim for a Time to First Byte (TTFB) under 800ms.
Preconnect to third-party origins. If your LCP element is hosted on a CDN or external domain, add a preconnect hint:
<link rel="preconnect" href="https://your-cdn.com">
CLS: Cumulative Layout Shift
CLS measures visual stability — how much the content on a page unexpectedly moves around while it’s loading. You’ve experienced high CLS when you’re about to click a button and an ad loads above it, pushing the button down and making you click the wrong thing. It’s frustrating, and Google penalizes it.
Thresholds:
- Good: 0.1 or less
- Needs Improvement: 0.1–0.25
- Poor: more than 0.25
What Causes High CLS
- Images without explicit
widthandheightattributes (browser doesn’t know how much space to reserve) - Ads, embeds, or iframes that load without reserved space
- Web fonts that cause text to reflow when they finish loading (FOIT/FOUT)
- Dynamically injected content above existing content
How to Improve CLS
Always set image dimensions. Add width and height attributes to every <img> tag. The browser uses these to reserve the correct amount of space before the image loads, preventing layout shifts.
<img src="photo.webp" alt="Description" width="800" height="450">
Reserve space for ads and embeds. Use CSS to set a minimum height on ad containers so the page layout doesn’t shift when an ad loads.
Use font-display: optional or font-display: swap to control how web fonts load and reduce text reflow. font-display: optional is the most stable option — it only uses the web font if it loads quickly enough.
INP: Interaction to Next Paint
INP replaced First Input Delay (FID) as a Core Web Vital in March 2024. It measures the responsiveness of a page to user interactions — clicks, taps, and keyboard input. Specifically, it measures the delay between when a user initiates an interaction and when the browser visually responds to it.
Thresholds:
- Good: 200 milliseconds or less
- Needs Improvement: 200–500 milliseconds
- Poor: more than 500 milliseconds
What Causes Poor INP
- Long-running JavaScript tasks that block the main thread
- Heavy third-party scripts (analytics, chat widgets, ad scripts)
- Large JavaScript bundles that take too long to parse and execute
- Event handlers that trigger expensive DOM updates
How to Improve INP
Break up long JavaScript tasks. Any task running longer than 50ms on the main thread can cause responsiveness issues. Use setTimeout or the scheduler.postTask() API to break large tasks into smaller chunks.
Audit third-party scripts. Use Chrome DevTools Performance tab to identify which scripts are blocking the main thread. Consider removing or deferring non-essential third-party scripts.
Reduce JavaScript bundle size. Use tree shaking, code splitting, and lazy loading to only ship the JavaScript each page actually needs.
How to Measure Your Core Web Vitals
Google Search Console
The most important place to check your CWV data is Google Search Console under Experience > Core Web Vitals. This shows your scores based on real user data (called “field data”) from the Chrome User Experience Report. Field data represents actual visitors to your site, so it’s the most accurate signal.
PageSpeed Insights
PageSpeed Insights gives you both field data (if enough real users have visited the URL) and lab data from a simulated test. Lab data is useful for debugging because it’s reproducible — you can make a change and immediately see the impact.
web.dev Core Web Vitals
For comprehensive documentation, tooling, and case studies on all three metrics, web.dev/vitals is Google’s official resource. It covers every metric in depth with code-level guidance.
Chrome DevTools
The Performance panel in Chrome DevTools lets you record and analyze page load and interaction events in granular detail. It’s the best tool for diagnosing exactly what’s causing a slow LCP or high INP.
For a broader look at all the technical fixes that impact your rankings — including Core Web Vitals — work through our technical SEO checklist. And if your images are dragging down your LCP scores, our image SEO optimization guide has the practical steps you need.
Want to stay on top of algorithm changes and technical SEO updates? Subscribe to the SEO Journal newsletter for weekly insights delivered straight to your inbox.
