Performance & web vitals

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.

Web vitals dashboard

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.

Next steps