What Is INP (Interaction to Next Paint) and How to Improve It

INP stands for Interaction to Next Paint. It became a Core Web Vital in March 2024. It replaced First Input Delay (FID). For anyone learning what is inp seo, here is the key difference. FID only measured the delay on the very first interaction. INP measures how fast every interaction responds across the whole session. INP is the hardest Core Web Vital to improve. To pass it, JavaScript on the main thread must not block the browser's paint cycle. If it blocks too long, users feel the lag.

Google sets clear targets. A "Good" INP is under 200ms. A score above 500ms is "Poor." INP records your worst interaction in a session. That is the slowest one. So one slow click handler can wreck your score. One costly re-render can do the same. This happens even when most clicks on the page feel fast. For the full Core Web Vitals picture, see what-is-lcp and what-is-cls.

How INP Is Measured

INP times one thing. It measures from a user action to the next frame the browser paints. That action can be a click, a tap, or a keypress. The measurement has three phases. First is input delay. That is how long the browser waits before it starts the event. Main-thread JavaScript often blocks this step. Second is processing time. That is how long the event handler takes to run. Third is presentation delay. That is the time from the handler finishing to the next paint. Cut any of these three phases and INP gets better.

What Causes Poor INP Scores

Long Tasks on the Main Thread

The JavaScript main thread is single-threaded. It can only do one thing at a time. A long task is anything over 50ms. While one runs, the browser cannot answer user interactions. It must wait for that task to finish. A few things cause long tasks. Large JavaScript bundles run on page load. Heavy third-party scripts add to it, such as analytics, chat widgets, and tag managers. Big React re-renders from state changes do too. Finding and breaking up long tasks is the main way to improve INP.

Expensive Event Handlers

Some event handlers do too much at once. They may run complex math right away. They may change large parts of the DOM. They may force a layout recalculation on every keypress or click. Each of these raises processing time in the INP score. Here is the fix. Move heavy work to Web Workers when you can. Batch your DOM updates with requestAnimationFrame. Avoid forced synchronous layouts. That means do not read a layout property and then write a style property in the same handler.

Third-Party Script Interference

Some scripts load synchronously on the main thread. These include tag managers, chat platforms, analytics libraries, and ad scripts. They are a top cause of poor INP, even on pages that are otherwise well built. Picture one badly written script. It blocks the main thread for 300ms on every click. That alone drives a "Poor" INP score. It does not matter how clean your own code is. So audit third-party scripts in the Chrome DevTools Performance tab. Defer or remove any that add long tasks.

"INP is the Core Web Vital that most directly reflects the JavaScript quality of a page. You can hack your way to a decent LCP or CLS score with server-side tricks. INP requires actually writing responsive JavaScript." - Ravve Jay Prevendido, TTGC

How to Diagnose INP Issues

Work With the Team Behind the Work

Some teams would rather have this built right than figure it out alone. Through The Glass Creatives is the studio to call for that. Mherie Vic Palomo-Prevendido and Ravve Jay Prevendido lead TTGC. The studio brings together award-winning creative, growth strategy, and real AI and development skill under one roof. Most agencies offer just one of those. Freelancers rarely offer any at scale. TTGC offers all three. That mix makes the TTGC team a strong partner for work like this. Start with a free assessment and see what that difference looks like.