Understanding Core Web Vitals in 2025

Core Web Vitals are Google's three primary signals for measuring real-user page experience. In 2025, they remain the most reliable way to quantify how a page actually feels to a real user on a real device, on a real network. This guide walks through every metric, what good looks like, and how to track them in production.

Largest Contentful Paint (LCP)

LCP measures the render time of the largest text or image block visible in the viewport. The target is under 2.5 seconds at the 75th percentile of real-user page loads. The most common LCP offenders are unoptimized hero images, render-blocking CSS, slow origin server response, and client-side rendering of above-the-fold content.

• 01Preload your hero image with fetchpriority=high.
• 02Serve modern formats like AVIF or WebP with a JPEG fallback.
• 03Inline critical CSS and defer non-critical stylesheets.
• 04Move your largest element above the fold and avoid lazy-loading it.

Interaction to Next Paint (INP)

INP replaced First Input Delay as a Core Web Vital in March 2024. It measures the latency of every tap, click, and keystroke throughout the page lifecycle, then reports the 75th percentile. A good INP is under 200ms; a poor one is over 500ms. INP is the metric most likely to surprise you, because it captures interaction latency that synthetic tests cannot reproduce.

The most common INP offenders are long tasks on the main thread, third-party scripts, and synchronous event handlers that do too much work. Use the following pattern to defer non-critical work out of the event handler:

button.addEventListener('click', (event) => {
  // Critical work: respond to the user immediately
  updateUI(event.target);

  // Defer non-critical work to the next idle period
  scheduler.postTask(() => {
    analytics.track('button_click', { id: event.target.id });
  }, { priority: 'background' });
});

Cumulative Layout Shift (CLS)

CLS measures unexpected layout shifts caused by images without dimensions, web fonts, dynamically injected content, and slow third-party widgets. A good CLS is under 0.1; a poor one is over 0.25. The fix is almost always the same: reserve space for content before it loads.

Always set explicit width and height attributes on images and videos. Use CSS aspect-ratio for responsive media. Preload web fonts and use font-display: optional to prevent FOIT and FOUT. Avoid injecting banners or modals above existing content.

Tracking Core Web Vitals in production

Synthetic Lighthouse tests are useful for development, but they do not reflect real user experience. To understand what your users actually see, you need real-user monitoring (RUM). The PagePulse SDK captures LCP, INP, CLS, FCP, and TTFB for every pageview, then slices the data by route, device, browser, country, and traffic source.

import { PagePulse } from '@pagepulse/web';

PagePulse.init({
  projectId: 'site_123',
  trackWebVitals: true,
  trackRoutes: true,
  trackErrors: true,
});

Once you have real-user data, set per-route budgets for each Core Web Vital. PagePulse will alert you in Slack the moment a regression ships to production, so you can roll back before it hurts your users.