Introduction
In Google's Core Web Vitals framework, Interaction to Next Paint (INP) replaced First Input Delay (FID) as the official metric for measuring user interface responsiveness.
While FID only measured the delay of the very first click, INP assesses all user interactions (clicks, taps, key presses) throughout the entire page session.
If clicking an accordion, mobile menu, or filter button locks the main thread and causes UI lag, your INP score fails.
Here is how developers analyze and optimize interaction latency to achieve a 'Good' score under 200 milliseconds.
The Three Phases of an Interaction
Every interaction latency is divided into three distinct phases: Input Delay, Processing Time, and Presentation Delay.
Input Delay is the time the browser waits before it can begin handling the event, usually caused by long JavaScript tasks occupying the main thread.
Processing Time is the duration required to execute your event callback functions and update state.
Presentation Delay is the time taken to calculate layout, recalculate styles, and paint the new frame to the screen.
Optimizing INP requires addressing all three phases.
Breaking Up Long JavaScript Tasks with scheduler.yield()
Any JavaScript task that runs on the main thread for longer than 50 milliseconds is considered a 'Long Task'.
If a user clicks a button while a heavy background script is running, the click event must wait in line, blowing past the 200ms budget.
Modern developers break up monolithic calculation loops using modern browser APIs like scheduler.yield() or setTimeout(0).
This yields control back to the main thread so high-priority user input can be processed immediately.
Optimizing DOM Depth and CSS Selectors
Excessive DOM nodes (such as deep, nested <div> wrappers created by complex page builders) drastically increase presentation delay.
When an interaction toggles a CSS class on an element, the browser may have to recalculate styles across thousands of descendants.
Keep total DOM elements on a page under 1,500 nodes and avoid expensive CSS selectors with deep universal qualifiers.
Use CSS visibility: hidden or content-visibility: auto to prevent off-screen elements from triggering expensive layout calculations.
Frequently Asked Questions
What is considered a 'Good' INP score? — An INP measurement at or below 200 milliseconds is classified as Good by Google. Above 500ms is classified as Poor.
Does INP affect Google search rankings? — Yes, INP is an official Core Web Vitals signal evaluated in Google search ranking algorithms.
How can I measure INP locally? — Use the Chrome DevTools Performance panel, or install the Web Vitals Chrome extension to inspect interaction delays in real-time.