// context projectglobal

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:

MetricGoodNeeds improvementPoor
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 on context.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.

Next

// related

See also