How do you optimize the interaction responsiveness (INP) of a complex SPA?

Optimizing INP in complex SPAs requires understanding the full interaction pipeline. Profile interactions: Chrome DevTools Performance tab → start recording, perform interaction, stop. The flame chart shows long tasks. Click the "Interaction" section in DevTools. Reduce input delay: avoid long tasks during the "hot periods" of user interaction. Defer non-critical work with scheduler.postTask(). Break up initialization code. Avoid synchronous operations in event listeners. Reduce processing time: minimize what happens in click handlers. Move expensive work out of the critical path: button.addEventListener("click", async () => { updateButtonAppearance(); // visual feedback first await scheduler.yield(); await expensiveWork(); }). Reduce presentation delay: minimize style invalidation scope with CSS containment. Avoid triggering layout after painting. React 18 patterns: wrap slow state updates in startTransition(() => setSlowState(newValue)) — React renders them asynchronously, not blocking the next frame. Long task budgeting: use PerformanceObserver to catch long tasks in CI: any task >50ms is a potential INP problem. Aim for event handlers to complete under 200ms total from input to presentation.