What Are Core Web Vitals?
Core Web Vitals are a subset of Google's Web Vitals initiative — a set of standardized metrics for measuring user experience on the web. The three current Core Web Vitals are:
- LCP (Largest Contentful Paint) — Measures loading performance.
- INP (Interaction to Next Paint) — Measures interactivity and responsiveness.
- CLS (Cumulative Layout Shift) — Measures visual stability.
Google uses these metrics as part of its Page Experience signal, which influences search rankings. Pages that provide excellent experience (all three vitals in "Good" range) gain a minor ranking boost, while pages with poor experience may be suppressed in competitive queries.
1. LCP — Largest Contentful Paint
LCP measures how long it takes for the largest visible element on the page to load. This is usually a hero image, a large heading, or a video thumbnail.
| LCP Score | Rating |
|---|---|
| 0 – 2.5 seconds | Good ✓ |
| 2.5 – 4.0 seconds | Needs Improvement |
| Over 4.0 seconds | Poor ✗ |
How to Fix Poor LCP
- Optimize your LCP element — If it's an image, compress it and convert to WebP format. If it's text, remove render-blocking resources that delay it from painting.
- Use a CDN — A Content Delivery Network serves assets from servers geographically close to the user, dramatically reducing time-to-first-byte (TTFB).
- Preload the LCP resource — Add
<link rel="preload">for your LCP image in the document head so the browser fetches it immediately. - Remove render-blocking resources — Defer non-critical JavaScript and move CSS inline where possible.
- Upgrade your hosting — Shared hosting with slow TTFB is often the root cause of bad LCP. A faster server is the highest-leverage fix.
- Enable caching — Browser caching and server-side caching reduce load time for returning visitors significantly.
2. INP — Interaction to Next Paint
INP (which replaced FID as a Core Web Vital in March 2024) measures how quickly a page responds to user interactions — clicks, key presses, and taps. It captures the full event duration from input to visual response.
| INP Score | Rating |
|---|---|
| 0 – 200ms | Good ✓ |
| 200 – 500ms | Needs Improvement |
| Over 500ms | Poor ✗ |
How to Fix Poor INP
- Reduce JavaScript execution time — Long-running JavaScript tasks block the main thread and delay response to user input. Audit your JS with Chrome DevTools' Performance panel.
- Break up long tasks — Split JavaScript tasks exceeding 50ms into smaller chunks using
setTimeout,requestAnimationFrame, or the Scheduler API. - Remove unnecessary third-party scripts — Analytics, ad tags, chat widgets, and social buttons often contribute heavily to main thread blocking. Audit and remove non-essential scripts.
- Use web workers — Move heavy processing off the main thread entirely.
- Avoid large DOM sizes — Pages with 1,500+ DOM nodes are slower to render and interact with. Simplify your page structure.
3. CLS — Cumulative Layout Shift
CLS measures visual stability — how much the page layout unexpectedly shifts during loading. A layout shift happens when visible elements move after they initially render, often causing users to accidentally click the wrong thing.
| CLS Score | Rating |
|---|---|
| 0 – 0.1 | Good ✓ |
| 0.1 – 0.25 | Needs Improvement |
| Over 0.25 | Poor ✗ |
How to Fix Poor CLS
- Always set explicit width and height on images and videos — This reserves the correct space before the media loads, preventing the content below from jumping down.
- Reserve space for ads — Ad slots that don't have reserved dimensions cause massive layout shifts when ads load. Define minimum heights for all ad containers.
- Avoid inserting content above existing content — Never dynamically inject banners, cookie notices, or popups that push content down after initial render.
- Use font-display: optional or swap — Web font loading can cause text to reflow when the custom font replaces the fallback. Using
font-display: optionalprevents this by only using the custom font if it loads within the first render. - Prefer CSS transforms over top/left for animations — Layout-triggering properties (width, height, top, left) cause reflows. CSS transforms use the GPU and don't affect layout.
How to Measure Core Web Vitals
Field Data (Real Users)
- Google Search Console — The Core Web Vitals report shows real-user data from the Chrome User Experience Report (CrUX). This is the data Google uses for ranking.
- PageSpeed Insights — Shows both field data (when available) and lab data for any URL.
- Chrome User Experience Report — BigQuery dataset of real-user metrics if you want to query data programmatically.
Lab Data (Simulated)
- PageSpeed Insights — Single-page analysis with scores and recommendations.
- Lighthouse — Built into Chrome DevTools. Run audits locally without network variability.
- WebPageTest — Advanced testing with filmstrip, waterfall charts, and multi-location testing.
Core Web Vitals and SEO: How Much Do They Matter?
Core Web Vitals are a tiebreaker signal — not a primary ranking factor. Google has stated that pages with great content can still rank well even with poor Core Web Vitals. However, when two pages have similar content quality, page experience can be the deciding factor.
More importantly, page speed directly affects:
- Bounce rate — Slow pages lose 53% of mobile visitors who abandon after 3 seconds.
- Ad revenue — Faster pages improve ad viewability and increase RPM by 10–30%.
- Conversion rate — Every 100ms of load time improvement can increase conversions by 1%.
Quick Win Checklist
- Convert all images to WebP and add explicit dimensions.
- Add
rel="preload"for your LCP image. - Move Google Fonts to self-hosted or use
font-display: swap. - Defer non-critical JavaScript with
asyncordefer. - Install a caching plugin (WordPress) or configure server-side caching.
- Reserve explicit space for all ad slots with min-height CSS.
- Enable Gzip or Brotli compression on your server.
- Use a CDN for static assets.
Frequently Asked Questions
Do Core Web Vitals directly affect Google rankings?
Yes, but moderately. Core Web Vitals are a confirmed ranking signal as part of Google's Page Experience update. They work best as a tiebreaker — great vitals won't overcome thin content, but poor vitals can suppress otherwise strong pages in competitive queries.
How often does Google update Core Web Vitals?
Google updates Core Web Vitals metrics periodically. INP replaced FID in March 2024. Google typically announces changes 6–12 months in advance, giving publishers time to optimize.
Can ads hurt my Core Web Vitals?
Yes. Ad scripts are a major source of CLS (layout shifts when ads load), INP issues (JavaScript blocking), and LCP delays. Using ad platforms like Ezoic that include speed optimization tools can help offset the performance cost of ads.