Web Vitals Lite

About

See your Core Web Vitals at a glance.

Web Vitals Lite adds a lightweight, always-visible floating badge to every page showing real-time LCP, CLS, and INP scores with color-coded pass/fail ratings based on Google's Core Web Vitals thresholds.

How it works:

1. Install Web Vitals Lite — it works immediately with zero configuration.
2. A small floating badge appears in the bottom-right corner of every page.
3. See color-coded dots: green (good), yellow (needs improvement), or red (poor).
4. Click the badge to expand and see detailed scores and threshold information.
5. One-click copy a formatted vitals report to your clipboard.

Features:

- Real-time LCP, CLS & INP — Metrics update as the page loads and as you interact.
- Color-coded pass/fail — Green, yellow, and red ratings based on Google's official thresholds.
- Expandable detail view — Click the badge for full metric names, values, and threshold ranges.
- One-click copy report — Copy a formatted report of all vitals with the page URL.
- Toggle visibility — Show or hide the badge from the popup. Your preference is saved.
- Shadow DOM isolation — The badge never breaks or is broken by the host page's styles.
- 100% local processing — No data is collected, stored, or transmitted. No external API calls.
- Zero configuration — Works on every page immediately after installation.

Core Web Vitals thresholds:

- LCP (Largest Contentful Paint): Good ≤ 2.5s, Poor > 4s
- CLS (Cumulative Layout Shift): Good ≤ 0.1, Poor > 0.25
- INP (Interaction to Next Paint): Good ≤ 200ms, Poor > 500ms

Privacy:

Web Vitals Lite does not collect, transmit, or share any data. All performance measurements happen locally in your browser using the built-in Performance API. No analytics, no telemetry, no third-party services.