Skip to main content
Gate it exactly like the widget. When the panel is open it shows the live values for the current page.

What it collects

Web Vitals

LCP with its element, CLS by session window, INP, TTFB and FCP — from raw PerformanceObserver, with no dependency.

Long animation frames

Frames over 50 ms, the worst script in each, and total blocking time.

Image audit

Raw <img>, lazy-loaded LCP elements, missing fetchpriority, over-download and missing dimensions.

Streaming waterfall

When each Suspense boundary actually filled — shell engine layer 3.

The image audit runs twice

The over-download check needs naturalWidth, which is 0 until an image has decoded — and a lazy image below the fold has not even started. Auditing once silently drops the most valuable finding on exactly the images most likely to be oversized. So there is an early pass for the structural findings, and a second pass once the images that were still loading settle.

Observer effect

Everything is passive observation. The state object is shared by reference, so there is no polling and no copying, and the only active DOM walk — the image audit — runs after load in an idle callback.
Synthetic runs measure with the collector and widget off. A measurement tool that competes for the main thread moves the numbers it reports.

Shipping samples somewhere

On pagehide the collector beacons a compact sample. See staging for the endpoint.