# WebVitalsPage > A web vitals report - a Core Web Vitals verdict, gauges for LCP, INP, CLS, FCP and TTFB with distributions, a trend chart with Google's limits, and pages to fix. Source: https://docs.nasaqui.com/components/web-vitals-page ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/web-vitals-page.json ``` The web vitals page opens with a verdict (passes Core Web Vitals only when LCP, INP and CLS are all good at the 75th percentile), then a `WebVitalGauge` per metric with the distribution of page loads, a `TimeSeriesPanel` for the selected metric with Google's good and poor limits drawn, and a table of the busiest pages rated per metric. A mobile / desktop switch appears when you pass `device` and `onDeviceChange`. Until connected it shows `AnalyticsConnect`. ## When to use - Real-user performance reporting from CrUX or your own RUM. - Deciding which pages to fix first. ## When not to use - Server-side latency: use [`ApmPage`](https://docs.nasaqui.com/components/apm-page). - One-off Lighthouse audits. ## Import ```tsx import { WebVitalsPage } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx import { WebVitalsPage } from "@fadymondy/nasaq/web"; import { useState } from "react"; export function Vitals({ service, data }: { service: React.ComponentProps["service"]; data?: React.ComponentProps["data"] }) { const [period, setPeriod] = useState(28); return {}} onDisconnect={async () => {}} />; } ``` ## Anatomy ``` WebVitalsPage AnalyticsPageFrame verdict card passes / does not pass / not enough data WebVitalGaugeGrid five selectable gauges TimeSeriesPanel selected metric + good/poor lines pages table LCP, INP, CLS per page, rated ``` ## API ### WebVitalsPage | Prop | Type | Default | Description | | --- | --- | --- | --- | | `service` | `IntegrationService` | required | The source and its state; anything but `connected` shows the connect screen. | | `data` | `…Data` | none | The report. While it is undefined the page shows skeletons. | | `period / onPeriodChange` | `number / (n) => void` | required | The reporting period in days (hours for the APM page). | | `loading` | `boolean` | `false` | Skeletons. | | `error / onRetry` | `ReactNode / () => void` | none | Shows an error with a retry button. | | `onRefresh / refreshing / updatedAt` | `() => Promise / boolean / date` | none | Refresh button and the updated time. | | `onConnect / onDisconnect / onSelectAccount` | `async callbacks` | required | OAuth and account picker hooks; the host does the real work. | | `className` | `string` | none | Extra classes on the root. | | `site` | `string` | none | The origin, for the subtitle. | | `device / onDeviceChange` | `"mobile" \| "desktop" / (device) => void` | none | Shows the device switch. | | `metric / onMetricChange` | `WebVitalId / (metric) => void` | `LCP` | The charted metric, controlled or not. | | `onPageClick` | `(row) => void` | none | Makes page rows clickable. | | `labels / frameLabels` | `Partial<…>` | none | Page strings and the shared header strings. | ### WebVitalsData `vitals` (per metric: `{ p75?, previous?, distribution? }`; ms, CLS as a score), `series` (rows of `date` with each metric's p75 under its id) and `pages` (`{ id, url, loads, vitals }`). ## Examples Device switch: ```tsx import { WebVitalsPage, type IntegrationService, type WebVitalsDevice } from "@fadymondy/nasaq/web"; import { useState } from "react"; export function Split({ service }: { service: IntegrationService }) { const [device, setDevice] = useState("mobile"); return {}} onConnect={async () => {}} onDisconnect={async () => {}} />; } ``` ## Accessibility The page has one `h1`; tabs follow the WAI-ARIA tabs pattern (arrow keys move, the panel is labelled by its tab). Charts and tables carry text alternatives. Disconnect asks for confirmation. Localise every string you override through `labels`. The verdict is text with an icon, not colour alone. ## RTL & i18n - The whole page mirrors; charts run right to left. - URLs, paths and identifiers stay left-to-right inside Arabic text. - Every figure uses the active locale with Western digits and is bidi-isolated (`Num`), so `+12.4%` keeps its order in Arabic. - Metric ids (LCP, INP, CLS) and page URLs stay left-to-right. ## Styling & tokens - Colours come from tokens (`--primary`, `--nq-success`, `--nq-warning`, `--nq-danger`, `--nq-tag-*`); never pass raw hex. - Composed from tokens only; extend with `className`. ## Do / Don't - Do pass the 75th percentile. - Do send CLS as a plain score and the others in milliseconds. - Don't call a page good when one Core Web Vital is not. ## Related - [`web-vital-gauge`](https://docs.nasaqui.com/components/web-vital-gauge) - [`time-series-panel`](https://docs.nasaqui.com/components/time-series-panel) - [`status`](https://docs.nasaqui.com/components/status) - [`analytics-connect`](https://docs.nasaqui.com/components/analytics-connect) ## Lab https://docs.nasaqui.com/?path=/docs/components-monitoring-pages-web-vitals--docs ## Code ### React ```tsx import { WebVitalsPage } from "@fadymondy/nasaq/web"; import { useState } from "react"; export function Vitals({ service, data }: { service: React.ComponentProps["service"]; data?: React.ComponentProps["data"] }) { const [period, setPeriod] = useState(28); return {}} onDisconnect={async () => {}} />; } ``` ### shadcn ```tsx import { WebVitalsPage } from "@/components/ui/web-vitals-page"; import { useState } from "react"; export function Vitals({ service, data }: { service: React.ComponentProps["service"]; data?: React.ComponentProps["data"] }) { const [period, setPeriod] = useState(28); return {}} onDisconnect={async () => {}} />; } ``` ### Vue ```vue ``` ### Blade ```blade @php $service = [ 'id' => 'crux', 'name' => 'Chrome UX Report', 'scopes' => [['id' => 'crux.read', 'label' => 'Read field data', 'required' => true]], 'status' => 'connected', 'connectedAs' => 'ops@nasaq.dev', ]; $data = [ 'vitals' => [ 'LCP' => ['p75' => 2300, 'previous' => 2700, 'distribution' => ['good' => 0.78, 'needsImprovement' => 0.15, 'poor' => 0.07]], 'INP' => ['p75' => 180, 'previous' => 210, 'distribution' => ['good' => 0.84, 'needsImprovement' => 0.11, 'poor' => 0.05]], 'CLS' => ['p75' => 0.08, 'previous' => 0.12, 'distribution' => ['good' => 0.86, 'needsImprovement' => 0.09, 'poor' => 0.05]], 'FCP' => ['p75' => 1600, 'previous' => 1750, 'distribution' => ['good' => 0.72, 'needsImprovement' => 0.2, 'poor' => 0.08]], 'TTFB' => ['p75' => 700, 'previous' => 760, 'distribution' => ['good' => 0.8, 'needsImprovement' => 0.14, 'poor' => 0.06]], ], 'series' => [ ['date' => '2026-09-27', 'LCP' => 2500, 'INP' => 190, 'CLS' => 0.09, 'FCP' => 1700, 'TTFB' => 740], ['date' => '2026-09-28', 'LCP' => 2400, 'INP' => 185, 'CLS' => 0.085, 'FCP' => 1650, 'TTFB' => 720], ['date' => '2026-09-29', 'LCP' => 2300, 'INP' => 180, 'CLS' => 0.08, 'FCP' => 1600, 'TTFB' => 700], ], 'pages' => [ ['id' => 'p1', 'url' => '/', 'loads' => 48210, 'vitals' => ['LCP' => 2100, 'INP' => 150, 'CLS' => 0.05]], ['id' => 'p2', 'url' => '/pricing', 'loads' => 9120, 'vitals' => ['LCP' => 3400, 'INP' => 320, 'CLS' => 0.21]], ], ]; @endphp ``` ### HTML + Alpine ```html

Web vitals

Real-user performance of nasaq.dev, judged at the 75th percentile

Connected Connected to ops@nasaq.dev

Passes Core Web Vitals

LCP, INP and CLS are all good for at least 75% of page loads.

Trend: LCP

LCP at the 75th percentile per day. Dashed lines mark Google's good and poor limits.
Average 2,400

Pages to fix first

Pages with the most page loads, rated on each metric
Page Page loads LCP INP CLS
/ 48,210 2.1 s 150 ms 0.05
/pricing 9,120 3.4 s 320 ms 0.21
```