Core Web Vitals — What You Need to Know
Core Web Vitals are Google's user experience metrics that directly affect rankings. Learn how to measure and improve them.
What Are Core Web Vitals?
Core Web Vitals (CWV) are a set of specific metrics introduced by Google to measure real user experience on a website. They focus on three main aspects: loading speed, interactivity, and visual stability. Since 2021, CWV have been an official Google ranking factor, meaning sites with better scores get an advantage in search results.
The three main metrics are: LCP (Largest Contentful Paint) — measures how quickly the main content of a page loads. INP (Interaction to Next Paint) — measures how quickly the page responds to user actions. CLS (Cumulative Layout Shift) — measures visual stability, i.e., how much elements shift during loading.
Importantly, CWV are measured from real users through the Chrome User Experience Report (CrUX). This means Google doesn't just test your site in lab conditions — it uses data from real visits to your site. If your actual users experience slow loading or an unstable interface, Google will know and reflect it in your rankings.
CWV matter beyond SEO. Research shows improving these metrics directly impacts business metrics. Amazon found every 100ms of additional load time cost them 1% of sales. Vodafone improved LCP by 31% and saw an 8% increase in sales. A fast, stable site means more conversions and more revenue.
LCP — Largest Contentful Paint
LCP measures the time needed to render the largest element in the viewport. This could be a large image, video, or text block. Google considers good LCP under 2.5 seconds, needs improvement between 2.5-4 seconds, and poor above 4 seconds.
The most common causes of slow LCP are: large unoptimized images, slow server (high TTFB), render-blocking JavaScript and CSS, and slow font loading. To improve LCP, first identify the LCP element using Chrome DevTools or PageSpeed Insights.
Optimize images — use modern formats (WebP, AVIF), correct sizing, lazy loading for below-fold images, and preload for the LCP image. Reduce TTFB through CDN, caching, and server optimization. Minimize and defer non-critical JavaScript. Inline critical CSS and asynchronously load the rest.
For Next.js projects (like our websites), the Image component automatically optimizes images and adds lazy loading. Server-side rendering significantly improves TTFB and LCP. These built-in optimizations are why Next.js is our preferred framework.
INP — Interaction to Next Paint
INP replaced FID as the official CWV metric in March 2024. While FID measured only the first interaction delay, INP measures the latency of all interactions throughout the entire visit and reports the worst one. Good INP is under 200 milliseconds, needs improvement between 200-500ms, and poor above 500ms.
INP covers three phases: input delay, processing time, and presentation delay. To improve INP, you need to optimize all three phases.
Break long JavaScript tasks into smaller ones. Use requestIdleCallback or scheduler.postTask() for non-critical operations. Remove or defer unnecessary JavaScript — audit third-party scripts and load them asynchronously.
Avoid layout thrashing. Use CSS containment to isolate visual changes. For complex animations, prefer CSS transform and opacity over properties that trigger layout. Virtualize long lists instead of rendering all elements at once.
CLS — Cumulative Layout Shift
CLS measures unexpected visual changes on a page. Nothing is more frustrating than trying to click a button that suddenly moves because an ad or image loaded above it. Good CLS is under 0.1, needs improvement between 0.1-0.25, and poor above 0.25.
The most common causes of high CLS are: images and videos without set dimensions, dynamically injected content, web fonts causing FOUT/FOIT, and CSS animations using layout properties.
Always set width and height attributes on images and videos, or use CSS aspect-ratio. Reserve space for dynamic content with min-height. Use font-display: swap for web fonts and preload critical fonts.
Avoid dynamically injecting content above the user's current viewport position. For notifications or banners, use fixed positioning. For maximum performance, our team builds sites with optimal CWV scores from the start — see our web solutions.
Your Site Doesn't Pass Core Web Vitals?
Our developers will analyze your site's performance, identify specific issues, and optimize them to pass CWV thresholds and improve your rankings.
Free Consultation →