Skip to main content
Core Web Vitals are standardized performance metrics defined by Google that measure real user experience on web pages. Sentry’s JavaScript SDK captures these metrics automatically for browser-based applications.

​
Core Web Vitals

LCP — Largest Contentful Paint

Measures loading performance. Time from navigation start until the largest image or text block in the viewport is rendered. Good: ≤ 2.5 s

INP — Interaction to Next Paint

Measures interactivity. Latency from user interaction (click, tap, keypress) to the next frame paint. Good: ≤ 200 ms

CLS — Cumulative Layout Shift

Measures visual stability. Cumulative score of unexpected layout shifts during the page lifetime. Good: ≤ 0.1

TTFB — Time to First Byte

Time from request start to the first byte of the response. Indicates server and network latency. Good: ≤ 800 ms

FCP — First Contentful Paint

Time from navigation start until any content (text, image, canvas) is first rendered. Good: ≤ 1.8 s

FID — First Input Delay

(Legacy) Delay between first user interaction and the browser’s response. Replaced by INP in modern browsers.

​
How Sentry collects Web Vitals

The Sentry JavaScript SDK uses the browser’s Performance Observer API and the web-vitals library to collect metric values during pageloads and navigations. These are attached as measurements on the page-load transaction: 
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "...",
  integrations: [
    Sentry.browserTracingIntegration(), // enables Web Vitals collection
  ],
  tracesSampleRate: 1.0,
});
No additional configuration is required. As long as browserTracingIntegration is enabled, Web Vitals are captured automatically.

​
Scoring

Sentry categorizes each Web Vital score into three buckets:
CategoryDescription
GoodWithin the recommended threshold; no action needed
Needs improvementBetween good and poor thresholds; worth investigating
PoorExceeds the poor threshold; high user impact
Sentry computes a weighted Performance Score (0–100) for each pageload by combining the individual vitals. LCP and INP carry the most weight.

​
Web Vitals in the Sentry UI

​
Performance overview

The Web Vitals tab in Performance shows aggregate p75 values for all vitals across your frontend transactions, along with trend charts and a score histogram.

​
Filtering by page or route

Use the transaction filter to see vitals for a specific page or route:
  • Filter by transaction:/checkout to see vitals only for that page
  • Break down by browser, os, or any custom tag
  • Compare environments (production vs. staging)

​
Historical charts

For each vital, Sentry shows a time-series chart of the p75 value over the selected time range. This lets you correlate performance regressions with deploys.

​
Opportunities view

The Opportunities section ranks your pages by their potential performance improvement impact. It highlights:
  • Pages with the most poor LCP or CLS scores
  • Pages visited by the most users (so improvements have the widest reach)
  • Estimated performance score improvement if the vital is fixed
Sort the Opportunities view by score improvement × page views to find the highest-leverage optimizations. A page with a poor score but low traffic is less impactful than a slightly degraded page with millions of visits.

Build docs developers (and LLMs) love

Get started for freeTalk to us