INP Optimization: Fix Interaction to Next Paint
What INP Measures
INP (Interaction to Next Paint) measures the delay between a user interaction (click, tap, keyboard input) and the next visual update on screen. Unlike FID which only measured input delay, INP measures the full interaction: input delay, processing time, and presentation delay. Google requires INP under 200ms for a Good score. Between 200-500ms is Needs Improvement. Over 500ms is Poor. INP captures the worst interaction on the page during the user's visit, making it sensitive to any slow event handlers.
How to Find INP Issues
In Chrome DevTools, go to the Performance panel and enable Web Vitals. Click Record, interact with the page (click buttons, open dropdowns, type in inputs), then stop recording. Look for INP markers in the timeline - clicking on them shows the full breakdown: input delay, processing time, and presentation delay. The Performance Insights panel also surfaces INP automatically. In production, use the web-vitals JavaScript library to measure real-user INP and report it to your analytics.
Long Tasks: The Main INP Cause
JavaScript that runs for more than 50ms blocks the main thread and prevents the browser from responding to user interactions. These are called Long Tasks. Break up long tasks using scheduler.yield(), setTimeout with 0ms delay to yield between chunks, or the Scheduler API's postTask. Instead of running one 200ms function, break it into four 50ms chunks with yields between each - the browser can process user interactions between chunks.
Third-Party Scripts
Analytics trackers, chat widgets, A/B testing scripts, and ad networks are common sources of long tasks. They run JavaScript that blocks the main thread during user interactions. Fix: load all non-critical third-party scripts with async or defer attributes, lazy load chat widgets until the user moves their mouse or scrolls, use Partytown to run third-party scripts in a web worker (off the main thread), and audit your third-party script load with the Chrome Coverage tool to identify unused code.
React and Framework-Specific Fixes
React applications commonly have INP issues due to expensive re-renders triggered by user interactions. Fix: use useMemo and useCallback to prevent unnecessary re-renders, use React Transition API to mark non-urgent state updates, implement virtualization for long lists (react-virtual, react-window), defer non-critical rendering work with startTransition, and split large components into smaller ones that only re-render when their specific state changes.
Event Handler Optimization
Heavy event handlers that run synchronously on click or input events directly increase INP. Common patterns to fix: form validation that runs on every keypress, search autocomplete that queries on every input change without debouncing, click handlers that do expensive DOM operations. Fix with debouncing (wait until the user stops typing before running logic), requestAnimationFrame for visual updates, and moving expensive work off the critical path.