Web Vitals in the Dashboard
The SDK captures Google’s Core Web Vitals automatically when data-capture includes vitals (or is set to all, the default). The dashboard then surfaces them in two places without you having to set anything up.
Top Pages — color dot per path
Each row in the Top Pages panel has a tiny colored dot before the path name:
- 🟢 Green — all vitals within Google’s “good” threshold.
- 🟡 Yellow — at least one metric in “needs improvement.”
- 🔴 Red — at least one metric in “poor.”
Hover the dot to see every metric and value (LCP 1.4s · CLS 0.05 · INP 180ms). If a page has no vitals data yet, no dot is shown.
The badge reflects the worst metric. A page with a fast LCP but a huge CLS still goes red — the goal is to surface trouble, not average it away.
Visitor Detail Drawer — per-visitor median
Open the drawer for any visitor (click their avatar). Below the stats grid you’ll see a Web Vitals row:
Web Vitals LCP 1.8s INP 150ms CLS 0.04 FCP 1.2s Each metric is colored against the same thresholds. Values are the median of every vitals sample recorded for that visitor across all their sessions.
If the visitor never triggered a vitals measurement (e.g. very short sessions, no first input), the row doesn’t render.
Thresholds we use
Per web.dev/vitals:
| Metric | Good | Needs improvement | Poor |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2.5 s | ≤ 4 s | > 4 s |
| FID (First Input Delay) | ≤ 100 ms | ≤ 300 ms | > 300 ms |
| INP (Interaction to Next Paint) | ≤ 200 ms | ≤ 500 ms | > 500 ms |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 |
| FCP (First Contentful Paint) | ≤ 1.8 s | ≤ 3 s | > 3 s |
These are Google’s thresholds — same numbers PageSpeed Insights and Search Console use.
What’s captured + when
The SDK uses PerformanceObserver (where supported). Browser support varies:
- LCP, CLS, FCP — Chromium, Safari 14+, Firefox 122+.
- FID — broadly supported but Google has deprecated it in favor of INP.
- INP — Chromium-only as of 2026.
If a metric isn’t supported, it’s silently skipped — no error, no fake data.
How vitals get into the dashboard
Vitals are sent as log records with level: 'info', message: 'LCP' (or 'CLS' etc), and context.value_ms (or context.value for unitless CLS). The dashboard queries those logs and aggregates by visitor or by path.
This means:
- Disabling logging disables vitals badging.
- If you turn off analytics (DNT), vitals logs still flow but without
visitor_id— the per-visitor row in the drawer won’t show, but the per-page dots in Top Pages still work (they’re keyed oncontext.path, not visitor).
Disabling
To skip vitals entirely:
<script
src="https://logu.ro/loguro.js"
data-api-key="brk_..."
data-capture="context,network,performance"
></script> (Default capture is all = context + network + performance + vitals + rage-clicks. Drop vitals from the explicit list to opt out without disabling everything else.)
Why care about vitals
Vitals are Google’s ranking signal for page experience. A page that consistently lands in “poor” hurts SEO and conversion. The badges let you spot which paths to optimize — usually / if your hero image is heavy, or any page with a third-party widget that shifts layout late.