Core Web Vitals: What They Are, How to Measure Them, and Why They Impact Business

Core Web Vitals: What They Are, How to Measure Them, and Why They Impact Business

OUR GUIDES

Ready to learn?

MarfCode · April 10, 2026 ·
Core Web Vitals SEO page speed UX performance

Since 2021, Google uses Core Web Vitals as a direct ranking factor. It’s not a technical novelty to defend against: it’s an opportunity for those who build digital products seriously to distance themselves from the competition that doesn’t.


What Core Web Vitals Are

Core Web Vitals are three metrics defined by Google to measure the real user experience on a webpage. They don’t measure how “beautiful” a site is or how many features it has: they measure how fast, stable, and responsive it is for those who use it.

LCP — Largest Contentful Paint

Measures the loading time of the largest visual element in the viewport (often a hero image or a prominent block of text). It represents the user’s perception of speed.

Optimal threshold: < 2.5 seconds Problematic: > 4 seconds

Common causes of slow LCP: unoptimized images, slow server (high TTFB), CSS or JavaScript blocking rendering, inefficiently loaded fonts.

FID — First Input Delay (now replaced by INP)

Measures the time elapsed between the user’s first click or interaction and the browser’s response. From 2024, Google replaced FID with INP (Interaction to Next Paint), which measures overall responsiveness during the entire session.

Optimal INP threshold: < 200ms Problematic: > 500ms

Main cause: heavy JavaScript blocking the main thread.

CLS — Cumulative Layout Shift

Measures the visual stability of the page: how much elements shift unexpectedly during loading. That annoying phenomenon where you’re about to click something and a banner appears pushing everything down — that’s high CLS.

Optimal threshold: < 0.1 Problematic: > 0.25

Common causes: images without defined dimensions, ad banners loading after content, fonts with fallbacks that change size.


Why They Matter for Business (Not Just SEO)

The impact of Core Web Vitals is not limited to Google ranking. They correlate directly with concrete business metrics:

  • Every second of delay in loading increases the bounce rate by 32% (source: Google/Deloitte)
  • Sites with good Core Web Vitals record on average a 24% lower abandonment rate than those with poor metrics
  • Amazon calculated that every additional 100ms of latency costs 1% in revenue

This isn’t technical optimization for its own sake. It’s money left on the table.


How to Measure Your Site’s Core Web Vitals

Google Search Console: “Experience” section > “Core Web Vitals”. Shows real data collected from Chrome users (Chrome User Experience Report). It’s the data Google uses for ranking.

PageSpeed Insights (pagespeed.web.dev): analysis of both real data (field data) and simulated data in the laboratory (lab data). Provides specific suggestions for every detected problem.

Lighthouse (integrated into Chrome DevTools): detailed analysis with scores and recommendations. Useful during development to intercept problems before deployment.

Web Vitals Chrome Extension: shows values in real-time while browsing.

The distinction between field data (real user data) and lab data (simulation) is important: Google uses field data for ranking. Lab data is useful for debugging but does not necessarily reflect the real experience.


How to Optimize: Concrete Actions

To improve LCP

  • Serve images in modern formats (WebP, AVIF) and with appropriate dimensions for each viewport
  • Implement lazy loading for below-the-fold images, but NOT for above-the-fold images
  • Use <link rel="preload"> for critical resources
  • Improve server TTFB (caching, CDN, adequate hosting)
  • Eliminate render-blocking CSS and JS

To improve INP

  • Identify and eliminate heavy JavaScript in the main thread
  • Use Web Workers for intensive computations
  • Optimize event listeners
  • Implement code splitting to load only the necessary JS for each page

To improve CLS

  • Always specify width and height for images and videos
  • Use min-height for containers that load dynamic content
  • Avoid inserting above-the-fold content after initial loading
  • Use font-display: optional or swap with attention to fallbacks

The Most Common Mistake: Optimizing the Lab Score, Not the Real Experience

There are techniques that artificially improve the PageSpeed score without improving the real user experience. A classic example: lazy loading everything, even critical above-the-fold resources, to lower the initial weight of the page. The score improves; LCP worsens.

Google is aware of these techniques and constantly updates the metrics to make them more representative of the real experience. Optimizing for field data, not lab data, is the correct approach.


The Role of Core Web Vitals in a Marfcode Project

Before launching any project, we perform a complete audit of Core Web Vitals on all critical templates (homepage, product pages, conversion pages). The minimum targets we set: LCP < 2.0s, INP < 150ms, CLS < 0.05.

These are not arbitrary numbers: they are the thresholds that, in our projects, correlate with measurable conversion performance.

Request a performance audit of your site


Related article: Web and Mobile Development for SMEs: complete guide | Astro and Directus: high-performance headless architecture