CodeParkAn interaction's delay has three parts: input delay, processing time and presentation delay. You shrink each one separately. INP (Interaction to Next Paint) measures this total delay, from the user's input to the next frame on screen.
The three parts:
- Input delay is the wait before your handlers can run, because the main thread is busy with other tasks.
- Processing time is the time spent running the event handlers.
- Presentation delay is the time to recalculate styles, run layout and paint the next frame.
To cut input delay, reduce long tasks during page load. Ship less JavaScript, use code splitting, and break work into chunks.
To cut processing time, do only the urgent visual update in the handler, and yield the rest. Yielding means giving the main thread back to the browser so it can paint. You can yield with await new Promise(r => setTimeout(r)), or with scheduler.yield() where it is supported. You can also move heavy computation to a web worker. And avoid layout thrashing in handlers.
To cut presentation delay, keep the DOM small and avoid large re-renders.
Use field data (data from real users) to find which interactions are slow. Then profile them in DevTools.
- An interaction's delay is made of input delay, processing time and presentation delay.
- Break up long tasks and yield to the main thread so the browser can paint.
- Move heavy work to a web worker.
- A smaller DOM and fewer re-renders reduce rendering cost.
- Find slow interactions from field data, then profile them in DevTools.