Interaction to Next Paint

What it is Interaction to Next Paint captures exactly how responsive your interface feels the moment a real human touches it. It records the gap between the instant someone clicks a button taps a menu scrolls a carousel or hits a key and the moment the browser paints the resulting visual change. Google replaced First Input Delay with INP in 2024 because the old metric only looked at the first interaction and missed all the jank that happened later. INP tracks every interaction across the full session grabs the slowest one at the 75th percentile and reports that number from real Chrome users. The 2026 premium bar sits at 200 milliseconds or lower. Below 100 milliseconds the site feels like native software. The body trusts it immediately and the brand reads as engineered with care. Above 500 milliseconds the delay feels sticky and cheap. Users never quote the number but they translate the physical hesitation into conclusions about quality competence and respect. Every heavy hero animation complex hover state unoptimized component or third party script that blocks the main thread feeds this number. Designers own INP because the decisions that destroy it happen in the first round of Figma files and brand briefs long before engineers open their editors.

What it is not INP is not a load metric. It does not measure how fast the hero image appears or how quickly the page becomes readable. That is LCP work. INP stays quiet until the user initiates contact. It is not Cumulative Layout Shift which tracks surprise movement of content. It is not Total Blocking Time which only looks at main thread work during the initial load. It is not the old FID metric it replaced. FID stopped at the first event handler while INP continues until the paint actually lands which catches far more real world friction. It is not a number you can fake in perfect lab conditions on a MacBook with fiber internet. The data that matters comes from real users on phones with background apps low batteries and spotty connections. Most of all it is not purely an engineering problem. Engineers can minify bundles but they cannot undo a design spec that demands six font weights an autoplay video three analytics trackers and a chat widget that all fight for the main thread the second someone tries to use the navigation.

Concrete example Linear ships a median INP of 87 milliseconds on its 2026 marketing site. Tap any nav item and the menu expands instantly with zero hitch because the team cut the hero video deferred every non critical script and kept the JavaScript bundle under 180 kilobytes. The product sells speed so the marketing site must deliver the same physical sensation or the brand promise collapses. Vercel keeps its deployment previews in the same band. Hover a link and the underline animation plus preview card expansion both snap back under 70 milliseconds even though the page pulls live edge data from multiple regions. Stripe demonstrates it best in checkout. Type a card number and the validation UI updates in 52 milliseconds while fraud detection scripts run silently in the background. The premium feeling of moving money is reinforced by the premium feeling of zero lag. Apple maintains sub 170 millisecond INP on product pages stuffed with WebGL models scroll linked animations and dynamic 3D configurators. They hand subset fonts profile every interaction path and reject any marketing pixel that cannot prove it stays off the main thread. Figma takes the crown for power user tools. Select 400 vector objects on a dense canvas open the command palette and start typing. Results filter with zero delay and the drag operation never drops a frame because the team treats canvas responsiveness as a non negotiable design constraint. The cautionary tale is the average post Series A B2B SaaS homepage. Their INP lands at 610 milliseconds because a 9 megabyte hero video autoplays four analytics scripts load on DOMContentLoaded the chat widget warms up immediately and a consent banner injects late. Click the features menu and the user waits more than half a second while the main thread clears its queue. The brand spent 250000 dollars on illustration and messaging yet the first physical signal the visitor receives is lag. Bounce rate sits at 71 percent and nobody ties it back to the design choices that approved all the heavy assets.

When to use / when not to Use strict INP targets on every surface that shapes brand perception or power user efficiency. Marketing homepages need it because the entire decision often happens inside three seconds of first contact. Dashboards checkout flows AI chat interfaces and especially command palettes all die when INP creeps above 150 milliseconds. Bake the 200 millisecond line into the one page perf budget before the first wireframe and make design brand and marketing sign it. Defend it in stakeholder meetings by talking about how slow interactions read as cheap or neglected next to Linear Stripe or Apple. Do not treat it as optional on temporary campaign pages. In 2026 every touchpoint carries the brand and AI search layers already factor responsiveness into ranking. The only situations where you can relax the target are fully static brochure sites with zero forms or navigation and purely internal admin tools used exclusively by trained staff who have no alternative. Even then aim for under 300 milliseconds because user tolerance dropped sharply after 2024. Never push INP optimization downstream to engineering after designs are locked. The autoplay video the extra font weights the unprofiled hover animations and the pile of third party tags all originate in design and marketing decisions. Cut them at the brief stage or accept that your brand will feel second tier the moment anyone tries to use it.

Interaction to Next Paint is the brand metric that lives in the users body and decides whether your interface feels like butter or like a neglected prototype nobody cared enough to finish.