Core Web Vitals: Measuring What Users Feel

Core Web Vitals are useful because they turn three parts of perceived quality into operational signals: whether important content appears promptly, whether interactions receive a timely visual response, and whether the page remains visually stable. They are not a complete definition of user experience, and a single score is not a diagnosis.

The practical thesis is that teams should manage the metrics as distributions tied to real page types and releases. Measure field and lab data for their different purposes, preserve attribution to the responsible element or interaction, and make the smallest fix that addresses the observed phase. That discipline matters more than collecting another dashboard full of unlabeled averages.

This article assumes the mechanics of browser rendering are already familiar. The focus is the measurement loop: define a representative population, locate the cause of a poor observation, change the relevant resource or task, and verify that the field distribution improves without damaging another quality dimension.

Treat Each Vital as a User-Centered Contract #

The three stable Core Web Vitals describe different failure modes. Largest Contentful Paint (LCP) records when the largest eligible content element visible in the viewport finishes rendering. It is a loading signal. Interaction to Next Paint (INP) summarizes the latency of a user’s interactions over a page visit, with an adjustment that prevents a long visit from being represented only by one extreme observation. It is a responsiveness signal. Cumulative Layout Shift (CLS) sums unexpected layout-shift scores across session windows and reports the worst window. It is a stability signal.

Commonly used quality boundaries are:

For a page population, evaluate the 75th percentile separately for mobile and desktop rather than averaging every visit together. The percentile asks whether at least three quarters of eligible experiences meet the boundary. A mean can conceal a substantial slow cohort, while one spectacularly bad trace can distract from the distribution that most users encounter.

Each metric is deliberately narrow. A good LCP does not prove that the page is usable: a consent dialog might cover the content, or an early hero might be followed by an unusable form. INP does not measure an interaction that never happens, and it does not replace task-completion metrics. CLS excludes shifts soon after qualifying user input, because some movement is expected after a deliberate action. Pair the vitals with errors, abandonment, conversion, accessibility, and product-specific timings rather than treating them as a universal grade.

Define the reporting unit before setting a target. A route-level aggregate can mix a cached article with a personalized dashboard. Group pages into templates or experiences whose loading and interaction behavior is comparable. Record device class, effective connection type where available, navigation type, geographic region, application version, and key experiment assignments. Segmentation is not an invitation to excuse bad results; it is how an actionable population is found.

Use Field and Lab Data for Different Questions #

Field data comes from real visits through a real-user monitoring library or an aggregated browser dataset. It includes the diversity that synthetic tests cannot cheaply reproduce: slower devices, cold caches, extensions, background tabs, intermittent networks, long visits, and interactions the test author did not predict. Field evidence is authoritative for deciding whether users meet the target, but it arrives after deployment and can be sparse on low-traffic routes.

Lab data runs a controlled page load or scripted journey. It is repeatable enough for debugging and release checks. A trace can reveal the LCP resource, long tasks around an interaction, or the DOM nodes participating in a shift. Yet a single desktop run on a fast workstation is not a population. Even simulated throttling is a model, not a representative sample by itself.

Use the two as a loop:

1. Field monitoring identifies a template, segment, release, or interaction with a poor distribution.
2. Lab reproduction matches the important conditions and captures detailed attribution.
3. A focused change is compared against the same lab scenario and correctness checks.
4. A canary confirms that the field distribution moves after deployment.

The two sources often disagree for legitimate reasons. A lab load may stop after initial content and therefore reveal nothing about INP during a five-minute editor session. A synthetic run may always have an empty cache, while returning visitors do not. Conversely, field LCP can look worse because the population includes low-end phones or a remote region absent from the lab. Investigate the population and scenario before debating which tool is right.

Sampling and eligibility also matter. Report how many visits produced each metric and what fraction of traffic was sampled. LCP needs a qualifying element; INP needs at least one qualifying interaction. A page with no INP observation is not a zero-latency page. Avoid comparing a seven-day window containing one release with a 28-day window containing several, and annotate deployments so gradual field changes have context.

Preserve Attribution Instead of Recording Only Numbers #

A metric value should travel with enough context to suggest the next inspection. The web-vitals package can report entries and attribution data without requiring every application to implement the browser-observer details directly. The exact integration depends on the installed version, but the boundary can remain small:

import { onCLS, onINP, onLCP, type Metric } from 'web-vitals';

type VitalEvent = {
  name: Metric['name'];
  value: number;
  rating: Metric['rating'];
  metricId: string;
  navigationType: string;
  routeTemplate: string;
  release: string;
};

function sendVital(metric: Metric): void {
  const event: VitalEvent = {
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    metricId: metric.id,
    navigationType: metric.navigationType,
    routeTemplate: document.body.dataset.routeTemplate ?? 'unknown',
    release: document.documentElement.dataset.release ?? 'unknown',
  };

  const body = JSON.stringify(event);
  navigator.sendBeacon('/rum/vitals', body) ||
    fetch('/rum/vitals', { method: 'POST', body, keepalive: true });
}

onLCP(sendVital);
onINP(sendVital);
onCLS(sendVital);

In a production integration, include an allowlisted element identifier for LCP and CLS, and an interaction name for INP. Do not upload arbitrary text, full selectors, URLs with secrets, or user input. High-cardinality selectors make aggregation expensive and can leak private data. Prefer stable labels such as product-hero, search-results, or cart-add assigned by application code.

For LCP, retain the candidate element, resource URL class, resource timing phases, and time to first byte. For INP, separate input delay, event-handler processing, and presentation delay, then attach the event type and named interaction. For CLS, retain the shifted nodes, prior and current rectangles, and whether a recent input excluded the shift. Browser development tools expose these details during a trace; real-user monitoring should capture a privacy-safe subset.

Deduplicate updates by metric ID. LCP can change as larger candidates appear, CLS accumulates, and INP is updated as interactions occur. Sending only the first callback underreports later events. Sending every callback as an independent visit overcounts. Either transmit updates with a stable ID and upsert server-side, or flush the final known values when the page is hidden.

Work a Regression from Population to Root Cause #

Consider an illustrative commerce product template. The numbers below are hypothetical and show the reasoning, not observed benchmark results. After release r42, the mobile field population changes as follows:

The LCP attribution says product-hero remains the candidate, while server response time is stable. Resource timing shows that the image request now starts substantially later relative to navigation. A release diff reveals that the image component was changed to loading="lazy" for every image, including the initially visible hero. The browser cannot prioritize a resource it has been instructed to defer.

The lab reproduction uses a cold cache, the mobile viewport that exposes the hero, the same image variant, and controlled network and CPU settings. A trace confirms the late request. The focused candidate restores eager loading for only the above-the-fold hero, includes explicit dimensions, and marks it fetchpriority="high". It does not preload every product image, because competing high-priority requests would dilute the signal.

The verification has four layers. A component test asserts that the primary hero gets eager/high-priority attributes while gallery thumbnails remain lazy. A lab trace confirms early discovery and checks that no new request displaces critical CSS. A canary compares release-labeled field distributions for equivalent traffic. Finally, error and bandwidth signals ensure that a larger or incorrect image variant was not introduced.

This example shows why a generic instruction such as “optimize images” is too broad. Compression might reduce transfer time, but it would not address an image request that begins late. Server caching would not address it either. Attribution identifies the phase that owns the delay and gives the experiment a falsifiable expected result.

Repair LCP at the Phase That Owns the Delay #

LCP can be decomposed into time to first byte, resource load delay, resource load duration, and element render delay for resource-backed candidates. The decomposition is more useful than the total because each phase has different controls.

If server response dominates, inspect redirects, edge routing, cache eligibility, backend work, and HTML streaming. Set a budget for the document response rather than hiding it behind a faster image. If resource load delay dominates, make the candidate discoverable in the initial markup, avoid lazy-loading it, and use preload or fetchpriority selectively. A CSS background image discovered late may be better represented as an image element when it carries content.

If transfer duration dominates, serve an appropriately sized responsive image, select an efficient format supported by the delivery path, compress to an acceptable quality, and use a nearby cache. Verify that srcset and sizes select the intended candidate at real viewport widths. A tiny placeholder does not improve the metric if it is not the final LCP content.

If element render delay dominates, look for client logic or styles that keep an already-loaded candidate hidden, an expensive main-thread task that postpones its presentation, or a web font required for a text candidate. Remove artificial reveal delays. Prioritize only what is actually critical; preloading many fonts and images can create contention and make the true candidate later.

LCP candidates can differ by device and content. A text heading may win on one article while a poster image wins on another. Aggregate by candidate label and template before standardizing a fix. Always recheck CLS when changing dimensions or placeholders, and monitor total bytes when moving resources earlier.

Repair INP by Separating Delay, Work, and Presentation #

INP starts when an input is received and ends at the next presented frame. Its attribution points to three opportunities. Input delay means earlier work prevented the event callbacks from starting. Processing duration means the callbacks themselves ran too long. Presentation delay means the browser could not promptly present the resulting state after handlers completed.

For input delay, remove or split unrelated long tasks, delay nonessential third-party work, and avoid scheduling large startup jobs immediately before likely interactions. For processing time, keep the synchronous handler limited to the state required for immediate feedback. Replace repeated full-list scans, bound validation, and move independent follow-up work after a yield. For presentation delay, reduce the amount of UI invalidated by the update and inspect unusually large synchronous DOM changes.

A yield creates an opportunity for higher-priority work; it does not make total work disappear. Break a long operation at boundaries that preserve invariants:

async function applyFilters(rows: readonly Row[], signal: AbortSignal): Promise<Row[]> {
  const visible: Row[] = [];

  for (let offset = 0; offset < rows.length; offset += 250) {
    if (signal.aborted) throw signal.reason;
    visible.push(...filterChunk(rows.slice(offset, offset + 250)));
    await scheduler.yield();
  }

  return visible;
}

Chunk size is a tuning parameter, not a constant to copy blindly. Test on slower devices, cancel obsolete work when a newer input arrives, and ensure partial results cannot overwrite a newer state. A worker can help with suitable CPU-heavy data transformations, but serialization and coordination costs belong in the measurement.

Name important interactions and measure them independently. search-type, filter-toggle, and cart-add have different code paths and expectations. A good page-level INP can hide a consistently poor rare checkout interaction, while one bad third-party interaction can dominate a long visit. Preserve both page-level reporting and interaction-level diagnostics.

Repair CLS by Reserving Space and Controlling Insertion #

CLS is not a count of visual movement. A shift score combines the viewport area affected with the distance moved, then session-window rules group unexpected shifts. The useful question is which element changed geometry without a recent qualifying input and what upstream content caused it.

Images, video, embeds, and advertisements should reserve their eventual space through dimensions or a stable aspect ratio. Dynamic banners should use a preallocated region or replace existing content instead of pushing the page after load. Infinite lists should avoid inserting items above the reading position unless scroll anchoring and product behavior have been deliberately verified.

Fonts can shift text when fallback and final glyph metrics differ. Preload only truly critical fonts, use an appropriate display strategy, and consider font metric overrides so the fallback occupies similar space. Do not solve a small text shift by making all text invisible for longer; that trades stability for loading quality.

Animations should prefer transforms and opacity when the visual effect does not require layout movement. A transform can still be disorienting, so this is not a license for excessive motion. Also distinguish expected shifts after input from delayed consequences. A panel opening immediately after a click may be excluded, but an asynchronously inserted message arriving much later can still count. Reserve the outcome’s space when its arrival is predictable.

Debug shifts with overlays or trace records rather than watching the page and guessing. Reproduce responsive breakpoints, translated text, empty and error states, slow media, consent controls, and ads with delayed fill. A stable happy path says little about content whose final size is unknown.

Set Budgets, Verify Releases, and Operate the Loop #

Use two kinds of guardrail. A field objective states the desired 75th-percentile outcome for a representative population. A lab budget catches likely regressions before users encounter them. The lab threshold should account for normal run variance and should not pretend to predict the exact field percentile. Store trace artifacts for failed runs so a budget failure is diagnosable.

Test fixtures should make candidates deterministic: fixed text, known images, controlled third-party behavior, and explicit viewport sizes. Script key interactions for INP, including the slower states that users actually reach. For CLS, observe long enough to include delayed content. Run multiple samples and compare distributions or robust summaries rather than failing on one noisy number.

After deployment, annotate dashboards with release and experiment versions. Canary by a representative traffic slice, then watch vitals alongside errors, task completion, bytes, and backend load. Roll back when the targeted metric moves materially in the wrong direction or when the fix damages another guardrail. Keep raw attribution long enough to investigate, subject to privacy and retention constraints.

Common operational failures include changing the measurement library and application in the same release, silently dropping callbacks during navigation, mixing mobile and desktop, treating missing INP as zero, and optimizing a global aggregate whose poor cohort remains hidden. Add telemetry-health checks for event volume, eligible-rate changes, unknown route labels, and release coverage.

The durable workflow is compact: define the user population, inspect the 75th-percentile field distribution, reproduce the relevant conditions, attribute the metric to an element or interaction and phase, make a targeted repair, and verify both lab mechanism and field outcome. Core Web Vitals become valuable when they narrow decisions. They become theater when the number is detached from the users, page types, and code that produced it.