Why it matters
Interaction to Next Paint measures the delay from tap/click to the next frame. Above 200 ms the UI feels laggy; above 500 ms it feels broken.
How to fix it
Paint the visual acknowledgement synchronously, then defer the rest (startTransition, scheduler.yield()). Keep event handlers under 50 ms and avoid re-rendering large trees on click.
Example
button.onclick = async () => { button.ariaBusy = 'true'; await scheduler.yield(); doExpensiveWork(); };References
More smoothness rules
void smooth reports 13 rules in this category. How the page feels after it loads: dropped frames during a scripted scroll, long animation frames, INP of real clicks, shifts after input, animated layout properties, idle rAF loops and reduced-motion handling.
scroll-jankFrames are dropped while scrollinglong-frames-during-scrollLong animation frames block scrollingscroll-listener-nonpassiveNon-passive wheel/touch listenerlayout-shift-after-inputLayout shifts long after an interactionlayout-shift-on-scrollLayout shifts while scrollinganimate-layout-propertyAnimation of a layout-triggering propertytransition-alltransition: allwill-change-overusewill-change is applied too broadly