Investigate a slow interaction

An interaction is more than its event handler. Its visible latency can contain three broad parts:

1. Input delay: the event waits because the main thread is busy.
2. Processing time: event handlers and their synchronous work run.
3. Presentation delay: style, layout, paint, and compositing happen before the result appears.

That distinction prevents the wrong fix. Rewriting a short handler will not help when it waits behind an earlier long task. Splitting JavaScript will not help a component that triggers an enormous layout and paint.

Record the slow interaction in the Performance panel. Select its interaction marker and inspect the Main track from input to the next frame:

• Work before the handler points to input delay.
• Wide function calls inside the handler point to processing cost.
• Rendering work after the handler points to presentation delay.

Then reduce the dominant part. Remove unnecessary handler work, update less of the DOM, avoid forced synchronous layout, defer non-visible follow-up work, or split long computation so the browser can present a frame.

INP represents the page’s interaction latency over a real visit, so an average handler duration can hide a rare but painful action. Test important interactions and investigate the slow end of the distribution.

Add a deliberate 300 ms loop before a button handler and record the click. Then move that unrelated work to run after the visible update and yield first. Compare the input-to-paint interval, not just the handler’s own duration.