Core Features
Web Vitals
Real-user performance metrics — Core Web Vitals (LCP, INP, CLS) plus FID and TTFB — collected with Google's web-vitals library.
What gets collected#
| Name | Type | Default | Description |
|---|---|---|---|
| LCP | ms | — | Largest Contentful Paint — time until the largest visible element finished rendering. Google's threshold for 'good' is ≤ 2500ms. |
| INP | ms | — | Interaction to Next Paint — latency of the slowest user interaction during the page lifetime. Replaced FID as a Core Web Vital in March 2024. Good ≤ 200ms. |
| CLS | score | — | Cumulative Layout Shift — sum of all unexpected layout shifts. Unitless score; good ≤ 0.1. |
| FID | ms | — | First Input Delay — legacy metric, kept for back-compat. Good ≤ 100ms. |
| TTFB | ms | — | Time to First Byte — server response time as observed by the browser. Good ≤ 800ms. |
How collection works#
Reliable wraps the official web-vitals library. Each metric fires once per page load, at the moment it's measurable:
LCP → fires when LCP is finalized (e.g. user scrolls or hides the tab)
INP → fires on visibilitychange/pagehide once interactions have stabilized
CLS → fires on visibilitychange/pagehide with the cumulative score
FID → fires on the first user interaction
TTFB → fires immediately after navigation timing is availableEach fired metric is sent as a POST /vitals with the metric name, value, rating (good / needs-improvement / poor), and the current path.
Per-route attribution#
In single-page apps, each metric is attributed to the route that was active when it fired. Reliable reads location.pathname at send time, so:
// User navigates: /home → /products → /cart
// LCP fires after the /cart page is finished rendering
// → vital is recorded with path: '/cart'Vitals fire once per page load
Disabling vitals#
If you have your own analytics for performance and don't want duplicate data, disable vitals at init:
init({
publicKey: 'pk_live_rl_...',
captureVitals: false,
});The web-vitals library is still bundled in (it's a small ~3 KB dependency), but no listeners are installed and no requests are sent.
Where to view them#
In the Reliable dashboard, vitals appear under Frontend Health → Vitals. You'll see p50/p75/p95 distributions per metric, broken out by route, device, and time window. The p75 is what Google uses for ranking — it's the most actionable threshold to watch.