The current metric set

Core Web Vitals are a set of field metrics intended to represent loading, responsiveness, and visual stability. The current set is Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. LCP marks when the largest eligible image or text block in the viewport is rendered. INP assesses responsiveness across eligible interactions during a visit. CLS scores unexpected movement of visible content.

Google's published good thresholds are LCP at 2.5 seconds or less, INP at 200 milliseconds or less, and CLS at 0.1 or less. Assessment uses the 75th percentile of page visits, separated by mobile and desktop. That framing matters: a fast developer laptop or a single Lighthouse run cannot demonstrate that most users receive a good experience.

Field evidence and lab diagnosis

Field data observes real visits across varied devices, networks, cache states, and usage patterns. The Chrome User Experience Report provides aggregated Chrome field data where enough eligible traffic exists. Site-owned real-user monitoring can add page and interaction context, though browser APIs and collection methods have their own coverage limits.

Lab tools run controlled scenarios and are best used to reproduce and diagnose a problem. Lighthouse can inspect a load, while browser performance tooling can expose a request waterfall, main-thread tasks, rendering work, and layout shifts. Default load tests do not exercise a whole visit, so they cannot reveal every post-load CLS event or the range of interactions that contributes to INP.

Investigating LCP

LCP can be divided into time to first byte, resource load delay, resource load duration, and element render delay. Identify the actual LCP element before optimizing. For an image, inspect whether its URL is discoverable in the initial HTML, whether another origin adds connection work, whether it is incorrectly lazy-loaded, and whether it receives appropriate fetch priority.

A slow server response leaves less time for every later phase, but transfer size is not always the main constraint. Client rendering can delay discovery, styles or scripts can delay rendering after a resource arrives, and competing high-priority requests can distort the waterfall. Optimize the measured subpart instead of applying a generic image or caching checklist.

Investigating INP

An interaction includes input delay, event-handler processing, and presentation delay before the next frame. Slow response can therefore begin before an application handler runs or continue after it finishes. Capture attribution for slow interactions, reproduce the relevant action, and inspect long tasks, handler work, style calculation, layout, rendering, and DOM complexity.

Break long synchronous work into smaller tasks and yield so urgent interaction work can run. Avoid repeatedly forcing layout by mixing DOM reads and writes. Reduce rendering work and update only what the interaction requires. Improvements should be verified on representative lower-capability devices because main-thread constraints may be invisible on a fast development machine.

Investigating CLS

Common CLS causes include images, video, ads, embeds, and injected content without reserved space, plus font swaps that change text geometry. Include intrinsic width and height for media or reserve an aspect ratio. Allocate stable space for late content, and test font loading choices with realistic text and fallback metrics.

CLS can occur after initial load while a person scrolls or uses the page. Record a complete representative flow and inspect the elements that moved, then trace the element that caused the movement; they may differ. Some shifts following recent input are excluded, but hover and scroll are not the same as an allowed shift-producing interaction.

A responsible operating model

Segment field results before choosing work: mobile versus desktop, template groups, geography, navigation type, and meaningful releases. Confirm that the sample is sufficient and that instrumentation did not change. Use diagnostic metrics such as time to first byte, First Contentful Paint, and LCP subparts to explain a Vital rather than presenting them as substitutes.

Treat the thresholds as guardrails rather than a complete account of quality. Passing does not prove accessibility, task success, security, or user satisfaction, and failing does not identify the cause. The durable workflow is to find the affected journey in field evidence, reproduce it under controlled conditions, change the measured bottleneck, and watch subsequent field data for the expected movement.

Sources & further reading

Technical references checked on 17 September 2026.

  1. web.dev: Web Vitals
  2. web.dev: Optimize Largest Contentful Paint
  3. web.dev: Optimize Interaction to Next Paint
  4. web.dev: Optimize Cumulative Layout Shift
← Back to articlesDiscuss an engineering challenge ↗