Core Web Vitals

What Are Core Web Vitals?

Core Web Vitals (CWV) became a Google ranking signal in June 2021 as part of the Page Experience update. They represent Google's attempt to quantify user experience through measurable metrics. In March 2024, Google replaced First Input Delay (FID) with Interaction to Next Paint (INP) as the responsiveness metric.

According to the Chrome User Experience Report, only 43% of websites pass all three Core Web Vitals thresholds (CrUX, 2025). Sites that pass all three CWV metrics see an average 24% lower bounce rate compared to sites that fail (Google, 2024).

LCP: Largest Contentful Paint

LCP measures how long it takes for the largest visible content element to render on screen. This is usually a hero image, video thumbnail, or large text block. LCP approximates when the user perceives the page as "loaded."

How to Improve LCP

• Optimize the LCP element: If it is an image, compress it, use WebP/AVIF, and add a fetchpriority="high" attribute
• Reduce server response time: Keep TTFB under 200ms with caching and CDN
• Eliminate render-blocking resources: Inline critical CSS, defer non-essential JS
• Preload the LCP image: Use <link rel="preload"> for the hero image

According to HTTP Archive, images are the LCP element on 72% of mobile pages and 82% of desktop pages (HTTP Archive, 2025). Optimizing your hero image is usually the single most impactful LCP improvement.

INP: Interaction to Next Paint

INP replaced FID in March 2024 as the responsiveness metric. While FID only measured the delay of the first interaction, INP measures the latency of all interactions throughout the page's lifecycle and reports the worst one (with outliers excluded).

How to Improve INP

• Reduce JavaScript execution time: Long tasks (over 50ms) block the main thread
• Break up long tasks: Use requestAnimationFrame or setTimeout to yield to the browser
• Minimize third-party scripts: Each analytics or ad script adds interaction delay
• Use web workers: Move heavy computation off the main thread

According to CrUX data, only 65% of origins pass the INP threshold, making it the hardest Core Web Vital to pass (CrUX, 2025). Heavy JavaScript frameworks and third-party scripts are the most common causes of poor INP.

CLS: Cumulative Layout Shift

How to Improve CLS

• Always set image dimensions: Include width and height attributes on all <img> tags
• Reserve space for ads: Use CSS min-height on ad containers before they load
• Use font-display: swap: Prevents invisible text during web font loading
• Avoid inserting content above existing content: Banners, cookie notices, and notifications should not push content down

CLS is the easiest Core Web Vital to pass. According to CrUX data, 85% of origins meet the CLS threshold (CrUX, 2025). The most common CLS offender is images without explicit dimensions, which affects 47% of websites (HTTP Archive, 2025).

Measuring Core Web Vitals

Tools for Measurement

• Google Search Console: Core Web Vitals report shows page-level field data grouped by status
• PageSpeed Insights: Both field data (from CrUX) and lab data (from Lighthouse) in one view
• Chrome DevTools: Performance panel shows CWV in real-time during development
• web-vitals JavaScript library: Measure CWV in your own analytics (Google, 2024)
• CrUX Dashboard: Build custom dashboards with historical CWV trends in Looker Studio

Google uses the 75th percentile of field data to assess Core Web Vitals. This means 75% of your real users need to have a "good" experience for the page to pass. A few users with poor connections will not drag down your score, but a significant minority will.

Impact on Rankings

Google has stated that Core Web Vitals act as a tiebreaker between pages of similar content quality. A Semrush study of 10,000 keywords found that pages passing all CWV metrics ranked an average of 1.4 positions higher than those failing (Semrush, 2024). The effect is stronger in competitive niches where content quality is similar across top results.

However, content relevance and quality remain far more important than CWV. A page with excellent content and poor CWV will still outrank a page with poor content and perfect CWV. Think of CWV as the tiebreaker, not the main ranking factor.