core-web-vitals-for-uilisted

<!-- last-verified: 2026-07 --> # Core Web Vitals for UI Three field metrics, measured at the **p75** of real users. Treat the thresholds as build constraints, not a post-launch audit. | Metric | Measures | Good (p75 field) | |---|---|---| | **LCP** | Largest contentful paint | **≤ 2.5s** | | **INP** | Interaction to Next Paint | **≤ 200ms** | | **CLS** | Cumulative Layout Shift | **≤ 0.1** | **INP replaced FID in March 2024.** FID only measured input *delay*; INP measures the full interaction — input to the next painted frame — so slow event handlers and render work now count against you. Old "good FID" code can fail INP. ## 1. INP — keep interactions responsive The main thread paints. Anything hogging it delays the next frame. - **Break up long JS tasks and yield the main thread.** Split work over 50ms into chunks and yield between them (`await scheduler.yield()`, or a `setTimeout(0)` / `await new Promise(r => setTimeout(r))` boundary) so a queued click can be handled between chunks instead of after all the work finishes. - **Batch DOM reads and writes; never interleave them.** Read all layout values first, then write all mutations. Alternating read → write → read → write forces the browser to recompute layout each cycle — **layout thrashing** — and each forced reflow blocks the frame. - **Give immediate visual feedback during async waits.** On click, paint a spinner / disabled / pressed state *before* awaiting the network or heavy work. The interacti