How to Improve INP Score: Fix Interaction to Next Paint Fast

This guide shows you how to measure Interaction to Next Paint, find the scripts that slow it down and fix them, with extra detail for WordPress sites. If you want to know how to improve INP score results quickly, start with third party scripts and long tasks, because that is where most of the delay hides.

What is a good INP score?

A good INP score is 200 milliseconds or less, measured at the 75th percentile of real page visits, with mobile and desktop judged separately. According to web.dev’s explainer on Interaction to Next Paint, anything above 200 ms and up to 500 ms needs improvement, and anything above 500 ms is poor.

INP replaced First Input Delay as a Core Web Vital in March 2024. The difference matters. FID only measured the delay before the first interaction started, while INP watches every click, tap and key press during the whole visit and reports one of the slowest. Scrolling and hovering do not count.

What causes poor INP?

Poor INP is caused by JavaScript and rendering work that keeps the browser’s main thread busy when the user interacts, so the next frame cannot be painted quickly. Every interaction has three parts, and any of them can be the slow one.

• Input delay: the browser is busy with another task, often a third party script, when the user clicks.
• Processing duration: your own event handlers take too long, for example a filter that rebuilds the whole product grid.
• Presentation delay: after the handlers finish, the browser needs a long time to recalculate styles, lay out and paint, usually because the DOM is huge.

On the WordPress sites I audit, the usual suspects are chat widgets, cookie banners, heatmap and session recording tools, several analytics tags loaded through a tag manager, page builder animations and sliders. Large mega menus and WooCommerce filters with thousands of DOM nodes come next.

Note that a poor INP is rarely caused by your hosting. Server speed affects how fast the page loads, but INP is about what happens in the visitor’s browser after the page has loaded, so a faster server alone will not fix it.

How do I measure INP on my site?

You measure INP with field data from real users first, then reproduce the slow interactions in the lab to diagnose them. Lab tools such as Lighthouse cannot report INP on their own because there is no real user clicking.

1. Check Search Console. The Core Web Vitals report groups URLs with poor or needs improvement INP. This tells you which templates are affected.
2. Check PageSpeed Insights. The field data section at the top shows your INP from the Chrome UX Report if the page or origin has enough traffic.
3. Find the slow interaction. Real user monitoring, or the web-vitals JavaScript library with attribution, tells you which element was clicked and which phase was slow.
4. Reproduce it in Chrome DevTools. Record a performance trace while you perform that interaction with CPU throttling on, then look for long tasks around the click.

The web.dev collection on how to optimize INP covers finding slow interactions in the field and diagnosing them in the lab in more depth.

How do you improve INP step by step?

You improve INP by doing less work on the main thread and by giving the browser a chance to paint between chunks of work. web.dev’s list of the most effective ways to improve Core Web Vitals names three priorities for INP: yield often to break up long tasks, avoid unnecessary JavaScript and avoid large rendering updates.

1. Audit third party scripts. List every tag on the page. Remove anything nobody uses, and load chat widgets or recording tools only on the pages that need them, or after the first interaction.
2. Break up long tasks. Any task over 50 ms can delay input. In your own code, split work into smaller pieces and yield to the main thread between them, for example with scheduler.yield() where supported or a setTimeout fallback.
3. Show feedback first. In click handlers, update the visible part (open the menu, show a spinner) first and defer analytics calls or heavy calculations until after the next paint.
4. Shrink the DOM. Simplify mega menus, paginate long lists and avoid page builder sections nested many layers deep.
5. Avoid layout thrashing. Do not read layout values and write styles in a loop. Use CSS content-visibility for long off screen sections.
6. Remove unused code. Use the Coverage panel in DevTools to find scripts that load on every page but run on few, and split them so they load only where needed.

How do you improve INP on WordPress specifically?

On WordPress, most INP gains come from loading fewer plugins’ scripts on each page rather than from code rewrites. Many plugins enqueue their JavaScript site wide even when their feature appears on one page.

• Use a script manager plugin, or your theme’s options, to unload contact form, slider and review scripts on pages that do not use them.
• Use the “delay JavaScript until interaction” option in caching plugins carefully. It helps load metrics, but the delayed scripts can then all run on the first click, which can make INP worse. Test with real interactions after enabling it.
• Replace heavy page builder sliders and animated counters with static blocks where they add little value.
• Keep WooCommerce filters server side or debounced so each click does not rebuild the whole grid.

If your theme is the root of the problem, a lighter build is often cheaper than endless tuning. My WordPress website design service builds on lean themes with only the scripts each page needs.

What does an INP fix look like with real numbers?

Use my free SEO audit checklist to keep Core Web Vitals in your monthly checks. If you would like the diagnosis and fixes done for you, my technical SEO service covers INP, LCP and CLS work on WordPress and custom sites. No speed fix guarantees rankings, but slow interactions cost you conversions every day.

Frequently asked questions