Performance Playground
Performance Playground
Validate Core Web Vitals, endpoint latency, rendering stability, and runtime health.
Purpose
This playground concentrates on frontend rendering metrics, slow backend responses, layout instability, and leak-prone runtime behavior.
LCP paint playground
A healthy hero image is optimized and paints quickly as the largest contentful element.
Waiting for hero paint…
Largest element painted after
—
Endpoint latency playground
A healthy product list responds in under 500ms. Compare the slow path to the fast control.
Slow path elapsed
—
Fast control elapsed
—
Layout shift playground
A healthy product grid reserves image dimensions before media loads so content does not jump.
Trail pack
Summit lamp
Ridge boots
Camp stove
Layout shifted
no
Shift events
0
Timer-leak playground
Mount and unmount the dashboard widget a few times, then watch the live counters. A well-behaved widget stops ticking once it is removed.
Live timer ticks
0
Active intervals
0
Image lazy-load playground
A healthy page lazy-loads below-fold images so only in-viewport media requests on first paint.
Eager path (buggy)
Images requested on mount: 6 (all of them)
Lazy control (healthy)
Lazy images declared: 6
Report cache playground
A healthy reports endpoint caches aggregated metrics and only recomputes when data changes.
Computed in
—
Recomputes (no cache)
0
Input delay playground
A healthy page keeps Total Blocking Time low so the first tap responds immediately after mount.
Known Intentional Issues (7)
Show hints (7)
Product images served without optimization causing LCP > 4s
Run Lighthouse and assert LCP <= 2500ms
Product list endpoint has artificial 2-3s delay
Assert GET /api/products response time is under 500ms
Product grid causes Cumulative Layout Shift (CLS) on load
Run Lighthouse and assert CLS <= 0.1
Dashboard component creates a setInterval that never clears on unmount
Mount and unmount dashboard 10 times and assert heap memory does not grow monotonically
Below-fold product images are not lazy loaded
Assert product images beyond the first viewport row have loading='lazy' attribute
Reports endpoint recalculates all metrics on every request with no caching
Assert 10 consecutive GET /api/reports requests complete in under 200ms each
First Input Delay (FID) caused by large synchronous JS on mount
Run Lighthouse and assert Total Blocking Time <= 300ms
Metrics reference
| Metric | Target | What it tests |
|---|---|---|
| LCP | ≤ 2.5s | Largest Contentful Paint |
| CLS | ≤ 0.1 | Cumulative Layout Shift |
| TBT | ≤ 300ms | Total Blocking Time |
| API p95 | ≤ 500ms | Endpoint response time |