Real User Monitoring & Web Vitals
Capture real-world performance metrics directly from live visitors across different network conditions, devices, and browser engines.
“Zero synthetic lab bias. Evaluate real-world Core Web Vitals directly from production users.”
The 5 Core Vitals
LCP (Largest Contentful Paint)
Measures perceived loading speed: marks when the main page content has likely rendered.
INP (Interaction to Next Paint)
Measures page responsiveness: latency of all user clicks, taps, and key presses.
CLS (Cumulative Layout Shift)
Measures visual stability: quantifies unexpected layout shifts during the page lifecycle.
TTFB (Time to First Byte)
Measures server response speed: time elapsed between client request and first byte of response.
Scoring Thresholds
The dashboard evaluates performance against standard Google thresholds:
| Parameter | Type | Requirement | Description |
|---|---|---|---|
| LCP | Milliseconds | Optional | Good: ≤ 2500ms · Needs Improvement: 2500-4000ms · Poor: > 4000ms |
| INP | Milliseconds | Optional | Good: ≤ 200ms · Needs Improvement: 200-500ms · Poor: > 500ms |
| CLS | Unitless Score | Optional | Good: ≤ 0.1 · Needs Improvement: 0.1-0.25 · Poor: > 0.25 |
| TTFB | Milliseconds | Optional | Good: ≤ 800ms · Needs Improvement: 800-1800ms · Poor: > 1800ms |
| FCP | Milliseconds | Optional | Good: ≤ 1800ms · Needs Improvement: 1800-3000ms · Poor: > 3000ms |
Resource Timing Waterfall
The SDK automatically captures the top 20 slowest resources per page view (excluding analytics endpoints) with transfer sizes and durations:
| 1 | { |
| 2 | "name": "https://cdn.example.com/assets/hero.webp", |
| 3 | "initiatorType": "img", |
| 4 | "duration": 342, |
| 5 | "transferSize": 184500, |
| 6 | "encodedBodySize": 182000, |
| 7 | "decodedBodySize": 182000, |
| 8 | "startTime": 120, |
| 9 | "responseEnd": 462 |
| 10 | } |
JS Heap Memory Snapshots
On Chromium browsers, the SDK monitors performance.memory to track memory leaks across Single Page Application route transitions:
usedJsHeapSize— Currently allocated memory.totalJsHeapSize— Total allocated heap memory.jsHeapSizeLimit— Maximum available memory limit before tab crash.