Przejdź do treści
ARDURA Lab
ARDURA Lab
·5 min

Core Web Vitals

Core Web Vitalstechnical SEOperformance

What are Core Web Vitals?

Core Web Vitals are a set of three website performance metrics defined by Google as key user experience (UX) indicators. Since 2021, they have been an official Google ranking factor, part of the so-called Page Experience signals.

Core Web Vitals measure three fundamental aspects of user interaction with a page: loading speed, responsiveness, and visual stability. Their impact on positioning is documented by Google. Each metric has defined thresholds — good, needs improvement, and poor — and Google collects data from real users (field data) via the Chrome User Experience Report (CrUX).

The three metrics in detail

LCP (Largest Contentful Paint)

LCP measures the loading time of the largest visible element on the screen (the viewport) — this can be the main image, a text block, a video element, or a background graphic. LCP reflects the moment when the user perceives the page as "loaded."

LCP thresholds:

  • Good: under 2.5 seconds
  • Needs improvement: 2.5-4.0 seconds
  • Poor: over 4.0 seconds

Most common causes of poor LCP:

  • Slow server responses (high TTFB)
  • Render-blocking by CSS and JavaScript
  • Unoptimized images (too large, no lazy loading, no modern formats)
  • Render-blocking resources in the <head> section

How to improve LCP:

  • Optimize images — use WebP/AVIF formats, appropriate dimensions, and the loading="lazy" attribute (but not for the LCP image — that should load with priority using fetchpriority="high")
  • Implement a CDN to reduce server response time
  • Minimize blocking CSS/JS resources — move non-critical styles to asynchronous loading
  • Apply preload for key resources (<link rel="preload">)
  • Consider SSG or server-side rendering for faster HTML delivery

INP (Interaction to Next Paint)

INP (Interaction to Next Paint) measures page responsiveness — how quickly it responds to user interactions such as clicks, screen taps, or text input. INP replaced the earlier FID (First Input Delay) metric in March 2024, because FID only measured the delay of the first interaction, while INP accounts for all interactions during the entire user session and reports the worst result (excluding outliers).

INP thresholds:

  • Good: under 200 ms
  • Needs improvement: 200-500 ms
  • Poor: over 500 ms

Most common causes of poor INP:

  • Long JavaScript tasks blocking the main thread (long tasks)
  • Excessive event listeners and complex event handling logic
  • Heavy JavaScript frameworks rendering large DOM trees
  • Lack of third-party script optimization (analytics, ads, widgets)

How to improve INP:

  • Break long JS tasks into smaller chunks (requestIdleCallback, scheduler.yield())
  • Reduce DOM size and complexity — fewer elements = faster rendering
  • Defer loading of non-critical external scripts
  • Use content-visibility: auto in CSS for off-viewport elements
  • Avoid synchronous operations in event handlers

CLS (Cumulative Layout Shift)

CLS measures visual stability of a page — whether elements shift unexpectedly during loading and interaction. Nothing frustrates users more than trying to click a button that suddenly changes position because an ad banner loaded above it.

CLS thresholds:

  • Good: under 0.1
  • Needs improvement: 0.1-0.25
  • Poor: over 0.25

CLS is calculated as the sum of layout shift scores grouped into session windows. Each shift's score is the product of two factors: the fraction of the viewport affected by the shift and the shift distance.

Most common causes of high CLS:

  • Images and embed elements without defined dimensions (width / height)
  • Dynamically injected ads, banners, and widgets
  • Web fonts causing FOIT/FOUT (text flickering)
  • Asynchronously loaded content inserted above visible content

How to improve CLS:

  • Always define image and iframe dimensions (the aspect-ratio CSS property or width/height in HTML)
  • Reserve space for ads and dynamic elements using fixed-size containers
  • Use font-display: swap with font preloading to minimize text shifts
  • Avoid inserting content above existing content after page load
  • Use CSS contain and transform instead of properties that cause reflow

How to check Core Web Vitals?

Both lab tools (simulating conditions) and field tools (real user data) are available:

Field data — most important:

  • Google Search Console — Core Web Vitals report for the entire site, grouping URLs by template
  • PageSpeed Insights — CrUX data for a specific URL and the entire domain
  • Chrome UX Report (CrUX) — raw data available via BigQuery and the CrUX API

Lab data:

  • Chrome DevTools / Lighthouse — local tests under controlled conditions
  • WebPageTest — advanced tests from different locations and devices

It's worth remembering that Google uses field data, not lab data, for ranking purposes. A Lighthouse score of 100 doesn't guarantee good Core Web Vitals in the field if real user conditions (slower devices, unstable connections) significantly differ from lab conditions.

Impact on SEO

Core Web Vitals are part of the Page Experience signals in Google's algorithm, alongside HTTPS, absence of interstitials, and mobile responsiveness. Pages with good Core Web Vitals have a ranking advantage — this is especially significant when content quality and link profiles are comparable. Better technical performance can tip the scales toward a higher position.

Beyond the direct impact on SEO, good Core Web Vitals translate to:

  • Lower bounce rate — fast pages retain users
  • Higher conversion rate — Google research shows that a 100 ms improvement in LCP can increase conversion by up to 1.3%
  • Better UX — users are more likely to return to pages that perform smoothly
  • Positive impact on CTR — Google may display a "fast page" badge in mobile results

Priority summary

If your site has Core Web Vitals issues, start with the metric showing the worst results in the Google Search Console report. Typically, the quickest wins come from LCP optimization (image compression, CDN, preload), followed by CLS (image dimensions, space reservation), and finally INP (JavaScript optimization). Check our guide on how to improve page speed for specific optimization steps. Regular monitoring and iterative improvement are the key to maintaining good results in the long run.

Need help?

High-performance websites that convert — check out our offer.