Interactive labs
Feel the metrics. Each lab runs in your browser — use DevTools Performance panel alongside for deeper traces.
CLS — layout shift
Compare reserved image space vs unreserved late load.
CLS Playground — reserve space or let it shift
Content below will jump when the image loads without reserved space.
This paragraph shifts when layout is unstable.
CLS score: measuring… (interact to trigger load)
INP — main thread blocking
Blocking loop vs chunked work with scheduler.yield().
INP Lab — blocking loop vs scheduler.yield()
Click a button — Event Timing will report interaction latency.
LCP — resource priority
fetchpriority="high" on hero images.
LCP Race — preload + fetchpriority vs default
Hero image load time will appear here.
Layout thrashing
Interleaved geometry reads/writes vs batched.
Layout thrashing — interleaved reads/writes vs batched
Creates 50 boxes — measures layout work duration.
Event loop
Visualize task, microtask, and render ordering.
Event loop visualizer
Tasks (dark), microtasks (green), render (teal) appear in order.
content-visibility
2000 rows with and without deferred rendering.
content-visibility — 2000 rows with vs without
Measures time to append 2000 list items.