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. Each metric shows its p75 and the share of samples rated good, needs improvement and poor, with per-route, device and connection breakdowns. The range picker switches every Frontend Health tab between the last 24 hours, 7 days and 30 days. The p75 is what Google uses for ranking, it's the most actionable threshold to watch, and it is graded with the same thresholds listed above (a value exactly on the threshold counts as good).