Web Vitals Dashboard

A standalone prototype for measuring Core Web Vitals on wal.sh. Phase 1: console + on-page logging. No beacons, no analytics backend.

Live Metrics

LCP

Largest Contentful Paint. Time until the largest visible element (image or text block) finishes rendering. Measures perceived load speed. Good ≤ 2500 ms.

INP

Interaction to Next Paint. Latency of the slowest interaction (click, tap, key press) throughout the page's lifetime. Measures responsiveness. Good ≤ 200 ms.

CLS

score

Cumulative Layout Shift. Sum of unexpected layout shifts. Quantifies visual stability — how much content jumps around as the page loads. Good ≤ 0.1 (unitless).

FCP

First Contentful Paint. Time until the first piece of content (text, image, SVG) is rendered. Indicates that the page is starting to load. Good ≤ 1800 ms.

TTFB

Time to First Byte. Time from navigation start until the first byte of the response is received. Reflects server response time and network latency. Good ≤ 800 ms.

Sample Page Content

The sections below provide elements that the browser can measure. The hero image placeholder is typically the LCP element. The button lets you generate an interaction for INP. The delayed block tests CLS by inserting content after load.

Hero Image Placeholder (LCP candidate)

Why Measure Web Vitals?

Core Web Vitals are a set of real-world, user-centered metrics that quantify key aspects of the user experience: loading speed (LCP), interactivity (INP), and visual stability (CLS). Google uses these as ranking signals, but more importantly, they correlate with whether users perceive your site as fast and reliable.

LCP replaced older metrics like load and DOMContentLoaded because those events don't reflect what the user actually sees. A page can fire load while the viewport is still blank. LCP measures when the largest visible element is painted.

INP replaced First Input Delay (FID) in March 2024. FID only measured the first interaction; INP tracks all interactions and reports the worst one, giving a more complete picture of responsiveness.

CLS captures how much the page layout shifts unexpectedly. Common culprits: images without dimensions, ads injected above content, and web fonts that change text size on swap.

Test Interaction (INP)

Click the button below to generate an interaction event. The INP metric reports the worst interaction latency observed across the entire page session. Try clicking multiple times.

Layout Shift Test (CLS)

Three seconds after page load, a block of text will be inserted below. If it pushes content down, the browser records it as a layout shift. Watch the CLS card update.

Phase 2: Beacon Endpoint

This prototype logs metrics to the console and renders them on-page. In phase 2, each metric will be sent as a JSON beacon to beacon.termbox.org using navigator.sendBeacon() so we can aggregate real-user measurements (RUM) across sessions.

The beacon payload will include: metric name, value, rating, attribution data, page URL, connection type, and a session ID. The endpoint will store events in a time-series database for dashboarding.