In 2021, Google officially made "page experience" a ranking factor — and at the centre of that update were three metrics called Core Web Vitals. Since then, they've become a standard part of any serious technical SEO discussion.
If you've run a PageSpeed Insights report and seen scores for LCP, INP, and CLS, you've encountered Core Web Vitals. Understanding what each one measures — and more importantly, how to improve them — can meaningfully improve both your rankings and the actual experience of using your website.
What Are Core Web Vitals?
Core Web Vitals are a set of specific page experience metrics that Google uses to measure how well your website performs for real users. They're not about what happens in a perfect test environment — they're based on real-world user data collected from Chrome users.
There are three metrics:
- LCP (Largest Contentful Paint) — loading performance
- INP (Interaction to Next Paint) — interactivity/responsiveness
- CLS (Cumulative Layout Shift) — visual stability
Each metric has a "Good," "Needs Improvement," and "Poor" threshold. Google wants to see your pages in the "Good" range. Pages in the "Poor" range are explicitly at a ranking disadvantage.
Let's break down each one.
LCP: Largest Contentful Paint
What it measures: How long it takes for the largest visible element on the page to load. This is usually the hero image, a large heading, or a block of text.
Good threshold: Under 2.5 seconds. Poor: over 4 seconds.
LCP is essentially your "did it feel fast?" metric. If someone clicks your page and stares at a blank screen or partial content for four seconds, they've already started mentally reaching for the back button.
Common causes of poor LCP:
- Unoptimized images (large file sizes, wrong formats)
- Slow server response times
- Render-blocking JavaScript or CSS
- No CDN (Content Delivery Network)
How to fix it:
Compress and properly size your images. A hero image that's 3MB should be under 200KB for web use. Use modern formats like WebP or AVIF instead of PNG/JPEG where possible. Tools like Squoosh handle this for free.
Use a CDN. A CDN delivers your assets from a server geographically close to the user. Cloudflare's free tier handles this for most small sites. This is especially relevant if your site is hosted in one country but you have visitors from others.
Preload the LCP resource. Tell the browser to fetch the most important image early by adding a <link rel="preload"> tag for it. This is a developer-level fix but it's often the fastest win for LCP.
Use lazy loading — carefully. Lazy loading images that are below the fold is good. Lazy loading the hero image (the LCP element) accidentally is a common mistake that kills your score.
INP: Interaction to Next Paint
What it measures: How quickly the page responds after a user interacts with it — clicking a button, selecting from a dropdown, typing in a form. INP replaced the older FID (First Input Delay) metric in March 2024.
Good threshold: Under 200ms. Poor: over 500ms.
INP is about responsiveness. A sluggish page that takes half a second to visually acknowledge a button click feels broken to users, even if technically it "works."
Common causes of poor INP:
- Heavy JavaScript executing on the main thread
- Long tasks that block the browser from responding
- Third-party scripts (chat widgets, analytics, tracking scripts)
How to fix it:
Audit and reduce your JavaScript. Every script that loads on your page consumes processing power. Remove anything you don't actively need — old tracking scripts, unused plugins, abandoned widgets.
Defer non-critical JavaScript. Scripts that don't need to run immediately should be deferred or loaded asynchronously so they don't block user interactions.
Break up long tasks. If your site relies on complex JavaScript, work with a developer to break long blocking tasks into smaller, yielding ones. This is advanced territory but it's the root cause of most INP failures on JavaScript-heavy sites.
Audit third-party scripts. Chat widgets, cookie consent banners, marketing pixels, and social media buttons all add JavaScript load. Each one has a cost. Review what you actually need.
CLS: Cumulative Layout Shift
What it measures: How much the page layout shifts unexpectedly while loading — content jumping around as fonts, images, or ads load in.
Good threshold: Under 0.1. Poor: over 0.25.
CLS is the most frustrating user experience problem. You go to tap a button and an image loads above it at the last second, shifting the button down — and you tap the wrong thing. That's a layout shift. Google measures how much this happens across the entire page load.
Common causes of poor CLS:
- Images without defined width and height attributes
- Ads or embeds without reserved space
- Fonts that cause content to reflow when they load (FOUT — Flash of Unstyled Text)
- Dynamically injected content (banners, cookie notices that push content down)
How to fix it:
Always set width and height on images. When the browser knows an image's dimensions before it loads, it reserves the right amount of space. Without dimensions, the image loads and everything shifts. One attribute in your HTML: width="800" height="600" (or the CSS equivalent aspect-ratio).
Reserve space for ads and embeds. If you run ads or embed third-party content, define a container with fixed dimensions before the content loads.
Use font-display: optional or swap strategically. Web fonts that load late cause text to reflow. The font-display CSS property gives you control over how fonts load. optional is the most CLS-friendly but shows the fallback font if the web font is slow.
Avoid inserting content above existing content. Cookie banners, notification bars, and promotional strips that push the page down on load are common CLS culprits. If you need them, animate them in from the side or bottom rather than pushing content.
How to Check Your Core Web Vitals
PageSpeed Insights — Free, from Google. Paste any URL and get lab data (simulated) and field data (real users). This is your first stop.
Google Search Console — The Core Web Vitals report under "Experience" shows real-world data aggregated across all your pages. This is more reliable than PageSpeed Insights lab scores because it reflects actual user experiences.
Chrome DevTools Lighthouse — Built into Chrome. Open DevTools, go to the Lighthouse tab, run an audit. Good for testing specific pages during development.
Google uses field data (real user measurements) for ranking, not lab data. If PageSpeed Insights shows a "lab" score of 65 but your field data shows "Good," your rankings won't be penalized. Focus on the field data in Search Console for ranking purposes, and use lab data to diagnose specific issues.
The Bigger Picture
Core Web Vitals sit within Google's broader focus on page experience, which also includes mobile-friendliness, HTTPS security, and the absence of intrusive interstitials (those full-page pop-ups that cover your content). Addressing Core Web Vitals is an important part of mobile optimization because mobile devices typically have slower CPUs and network connections, making performance problems more acute.
You don't need a perfect score. You need to be in the "Good" range across all three metrics. For most small business sites — relatively simple pages without heavy JavaScript applications — that's achievable with image optimization, a good hosting environment, and a few targeted fixes.