Core Web Vitals · Interactive

Feel the metrics.
Break them, then fix them.

The three Core Web Vitals measure loading, responsiveness, and visual stability. Each panel runs a real "good" and "bad" version — watch the score cross the threshold, and see exactly which line of code caused it.

All values are measured live, in your browser, right now.

LCPLargest Contentful Paint

How long until the biggest thing on screen — usually a hero image or headline — actually renders. A heavy, unsized, render-blocking asset pushes this out.

Largest Contentful Paint: not measured yet.

Render stage

The number is the real render time of the element, from click to painted frame.

what just ranidle
// click a button to see the code path

INPInteraction to Next Paint

When you click or tap, how long until the screen visibly responds. Heavy JavaScript on the main thread blocks the paint and makes the UI feel frozen.

Interaction to Next Paint: not measured yet.

Interaction stage

Counter: 0

The bad button runs a ~350 ms synchronous task before the UI can repaint — that lag is your INP.

what just ranidle
// click a button to see the code path

CLSCumulative Layout Shift

How much the page jumps around as it loads. Content injected without reserved space shoves everything below it — the classic "I tapped the wrong button" moment.

Cumulative Layout Shift: not measured yet.

Layout stage

Watch the grey lines jump. The score is the real shift geometry run through the CLS formula (impact × distance), scoped to this panel.

what just ranidle
// click a button to see the code path