How to Fix INP (Interaction to Next Paint)

What INP is, and why it replaced FID

INP became a Core Web Vital on March 12, 2024, replacing First Input Delay (web.dev). FID only measured the delay before the first interaction started being handled. INP looks at the interactions across the whole visit and reports one of the slowest, from the input until the browser paints the next frame.

That is why a page can have had a perfect FID and still fail INP: menus, filters, add-to-cart buttons and accordions that you click after the page loads now count.

Google's ranking systems use Core Web Vitals, but Google also says a good score does not guarantee top rankings and relevance comes first (Google page experience). Fix INP because slow clicks lose sales, and because it can help when pages are otherwise close.

Step 1: confirm the problem in field data

Lab tools cannot click like your visitors, so start with real-user data.

1. Search Console > Experience > Core Web Vitals. Open the mobile report. Groups marked "INP issue: longer than 200ms" show which templates fail.
2. PageSpeed Insights for one URL from that group. The top section ("Discover what your real users are experiencing") is field data from the Chrome UX Report.
3. If your site has too little traffic for field data, add the web-vitals JavaScript library to log INP and the element that was clicked to your analytics.

Step 2: find the slow interaction

1. Open the page in Chrome on a mid-range phone or with CPU throttling (DevTools > Performance > CPU: 4x slowdown).
2. Start a Performance recording, click the elements real users click (menu, filters, add to cart, accordion, form fields), stop recording.
3. Look at the Interactions track. Long interactions show three parts: input delay (the main thread was busy), processing time (your event handlers), presentation delay (layout and paint after the handlers).

Which part is biggest tells you which fix to use.

Step 3: fix by cause

Step 4: the fixes that help most sites

• Audit third-party scripts. List every tag in your tag manager. Remove the ones nobody uses. Chat widgets, heatmaps and review widgets are common INP problems.
• Yield inside long tasks. Any task over 50 ms blocks the main thread. Split loops and heavy work into chunks.
• Give instant feedback. Show the pressed state, spinner or open menu first, then do the expensive work.
• Debounce input handlers. Search-as-you-type and filters should not re-render on every key press.
• Avoid giant DOMs. Long product grids and mega menus with thousands of nodes slow every update. Paginate or virtualize.
• Check your framework. React, Vue and similar frameworks have their own tools for splitting work and avoiding needless re-renders. Use their profilers.

Worked example (fictional site). northwind-outdoors.com had a mobile INP of 380 ms on category pages. A Performance trace showed the "Filter" button had 260 ms of input delay: a reviews widget and a heatmap script were parsing on the main thread whenever shoppers tapped. Loading both after the first interaction and removing an unused A/B testing tag brought the trace down to about 140 ms. Field data takes 28 days to fully reflect a fix, so the team checked it again a month later.

Step 5: validate the fix

1. Ship the change.
2. In Search Console, open the failing group and click Validate fix. Validation tracks the next 28 days of field data.
3. Keep logging INP with the web-vitals library so you see the change sooner than the 28-day window.