Skip to main content
Browser monitoring is a beta AppSignal Labs feature. The @appsignal/browser package is published under the beta tag on npm, and its configuration and API may still change between beta releases. Share feedback in our Discord community.
Web vitals measure how quickly a page loads and responds. They also show whether its layout shifts unexpectedly. AppSignal measures them on real users’ devices and connections. Collection starts with init(). There is nothing to configure.

​
What each metric measures

LCP, INP, and CLS are the three Core Web Vitals. FCP and TTFB help explain a poor LCP. Slow TTFB points to the server or network. Fast TTFB with slow LCP points you toward resource loading or rendering. Every value is rated against these thresholds. AppSignal labels each summary value with a rating. The per-route table uses the same ratings.

​
How values are attributed to routes

LCP, FCP, and TTFB measure the page load. The browser measures each of them once, when the page first loads, and never again. In a single-page application, they belong to the route loaded first. Later client-side routes do not receive new load metrics. Measuring them again per route would need a browser feature that is still experimental. CLS and INP can build up while a page is open. When the browser supports them, AppSignal attributes observed values to the active route. It resets those values on navigation. To keep routes separate and readable, tell AppSignal the route template each time your router navigates:
Without a template, the processor replaces recognizable IDs in web-vital URLs, such as numbers and UUIDs. It may miss IDs specific to your app. Errors use the raw path unless you set a template, so one call also improves error grouping. There is a second reason to use templates. AppSignal only keeps a limited number of separate routes per application. Once you go past it, the rest are lumped together into one unnamed group that the route filter leaves out. Without explicit templates, routes whose IDs the processor cannot recognize can reach that limit sooner.

​
When values are sent

Web vitals are batched and sent at page and route boundaries:
  • When the page is hidden, which covers switching tabs and backgrounding the app.
  • When the page is closed or navigated away from.
  • On a client-side route change.
If a page crashes or is force quit before any of those happen, nothing is recorded for that visit. For hash-based routers, AppSignal treats #/orders as a navigation. It does not treat a plain in-page anchor such as #pricing as one.

​
Browser support

The SDK reports a metric only when the browser provides the performance entries needed to measure it. CLS needs layout-shift; INP needs event-timing. Browsers without those entry types do not contribute those metrics. LCP, FCP, and TTFB are collected through the web-vitals library when available.

​
Reviewing performance in AppSignal

The Performance view summarizes each metric for the selected period. Filter it by percentile, time, app version, or route. Read more in front-end performance in AppSignal.