Metrics reference

All metrics are color-coded using Web Vitals thresholds:

Status	Meaning
🟢 Green	Good — meets targets
🟡 Yellow	Needs improvement — may cause issues
🔴 Red	Poor — likely causing issues

Key thresholds

Metric	🟢 Good	🟡 Needs work	🔴 Poor
FPS	≥55	30–55	<30
Frame time	≤16.67ms	16.67–32ms	>32ms
Input latency	≤16ms	16–50ms	>50ms
INP	≤200ms	200–500ms	>500ms
CLS	<0.1	0.1–0.25	>0.25
TBT	<200ms	200–600ms	>600ms

Measures rendering smoothness using a requestAnimationFrame loop.

Metric	What it tells you
FPS	Frames per second. Target: 60.
Frame time	Average ms per frame. Target: ≤16.67ms.
Dropped frames	Frames exceeding 2× the expected frame time.
Frame jitter	Sudden spikes in frame time vs. baseline.
Frame stability	How consistent frame times are (percentage).

Measures interaction latency using the Event Timing API.

Metric	What it tells you
INP	Interaction to Next Paint — p98 of worst interactions. A Core Web Vital.
Input latency	Time from pointer event to next animation frame.
FID	First Input Delay — latency of the very first interaction.
Paint time	Rendering time via double-`requestAnimationFrame`.
Last interaction	Most recent interaction details. Click Inspect to highlight.
Slowest interaction	Worst interaction recorded. Click Inspect to highlight.

Each interaction includes a timing breakdown:

[wait Xms] → [js Xms] → [paint Xms]

Wait (input delay) — time before JS starts processing. High values mean the main thread was blocked.
JS (processing time) — time in event handlers. High values mean expensive handler logic.
Paint (presentation delay) — time from handler completion to visual update. High values mean expensive rendering.

Detects main thread blocking via the Long Tasks API.

Metric	What it tells you
Long tasks	Tasks blocking the main thread for >50ms.
Total blocking time	Sum of `(duration − 50ms)` for all long tasks. Matches Lighthouse TBT.
Thrashing	Style writes followed by long frames (forced synchronous layout).
DOM churn	Rate of DOM mutations per measurement period.

Detailed frame attribution via the Long Animation Frames API. Chrome 123+ and Edge 123+ only.

Metric	What it tells you
LoAF count	Animation frames exceeding 50ms.
Blocking duration	Total and longest blocking time from LoAFs.
P95 duration	95th percentile LoAF duration.
Script attribution	Which scripts caused slow frames — source URL, function name, invoker type.

Uses the React Profiler API. Only available with the default (React) entry — hidden when using ./universal.

Metric	What it tells you
Mount count and duration	How many times components mounted and how long each took.
Slow updates	React updates exceeding the 16ms frame budget.
P95 duration	95th percentile update time — worst-case experience.
Render cascades	`setState` during the commit phase (`useLayoutEffect`). Very expensive.

CLS measurement via the Layout Instability API with session windowing per the Web Vitals specification.

Metric	What it tells you
CLS	Cumulative Layout Shift score. A Core Web Vital.
Forced reflows	Layout reads after style writes, forcing synchronous layout.
Style writes	Inline style mutations observed via `MutationObserver`.

JS heap introspection via performance.memory. Chrome only.

Metric	What it tells you
Heap usage	Current JS heap size.
Memory delta	Change from baseline since last reset.
GC pressure	Allocation rate in MB/s. High = frequent garbage collection.
Compositor layers	Elements promoted to GPU layers.

Tracks render timing for elements with the elementtiming attribute via the Element Timing API.

Metric	What it tells you
Element count	Number of tracked elements on the page.
Largest render time	Slowest element to render (similar to LCP).
Individual elements	Render time for each tracked element.

<img src="/hero.jpg" elementtiming="hero-image" />
<div elementtiming="main-content">Key content</div>