Monitor how fast your pages feel to real users. With the Record web vitals feature enabled, the JavaScript tag captures page performance metrics like LCP, FCP, and TTFB from every sampled page load.

View web vitals

Open the Web vitals dashboard from Metrics. The dashboard is created automatically for every application and charts the average alongside the p50, p90, p95, and p99 percentiles for each metric:

• Time to first byte: Full time to the first byte, including DNS, TCP, TLS, and server time.
• HTTP request time to first byte: Server time only, from sending the request to the first byte.
• First contentful paint: Time until the first content renders.
• Largest contentful paint: Time until the largest element renders.
• JavaScript used heap size: JS memory usage. A steadily growing baseline is the signature of a memory leak.
• User agent specific memory: Total browser memory for your site, plus a breakdown by JavaScript, DOM, and shared memory. Requires cross-origin isolation.

Focus on a single page with the URL filter at the top of the dashboard. It's a regular dashboard: change time ranges, add charts, or customize a copy.

Chart web vitals your way

The web vitals are available as metrics on your application, with percentile aggregations like p50, p90, p95, and p99. Create your own charts in Metrics to:

• Track p95 Largest Contentful Paint per page.
• Compare performance across releases or environments.
• Alert on performance regressions with chart alerts.

Performance in context

Performance data connects to the rest of real user monitoring:

• Sessions: Open a session to see the pageload timeline of a specific visit, including backend spans when your backend is traced with Better Stack.
• Slow page investigation: Filter sessions by page with the search bar, then watch the replay to see what the user experienced.

Measure browser memory

Chrome, Edge and other Chromium browsers can report how much memory your site uses, split into JavaScript, DOM and shared memory. They report it only on pages that are cross-origin isolated.

1. Keep Record JS heap memory (Chrome) on in your application's Frontend tab. It's on by default.

2. Serve every page of your site with these two response headers:

   Response headers

   Copied!

   Cross-Origin-Opener-Policy: same-origin
   Cross-Origin-Embedder-Policy: require-corp
   

3. Run crossOriginIsolated in the browser console on your site. It should return true.

These headers block content from other sites

Browsers then block images, scripts, fonts and iframes from other sites unless those sites allow it. Pop-ups to other sites, such as sign-in or payment windows, also lose their connection to your page.

Memory shows up in Web vitals after the next page load and updates about every 5 minutes.

Next steps

• Website visits: traffic and engagement metrics.
• Session replays: watch what real users experienced.