How to Improve Interaction to Next Paint (INP) on WordPress

On this page

1. How INP is measured
2. How to find slow interactions
3. Common causes on WordPress sites
4. Tame third-party scripts
5. Slim down plugins and page builder layouts
6. Fix slow menus, sliders and forms
7. Confirm the fix

Interaction to Next Paint (INP) measures how quickly a page visibly responds when someone taps, clicks or types. Tap the menu button and nothing happens for a moment; tap "Add to cart" and the button seems frozen. That lag is what INP captures. It replaced First Input Delay as a Core Web Vital in March 2024, and it's the metric many WordPress sites struggle with on phones. For the basics of all three metrics, see Core Web Vitals explained.

How INP is measured

INP	Google's rating
200 milliseconds or less	Good
Between 200 and 500 milliseconds	Needs improvement
More than 500 milliseconds	Poor

INP watches the clicks, taps and key presses during a visit and reports roughly the slowest one; on pages with many interactions, a few extreme outliers are ignored. Scrolling and hovering don't count. Each interaction has three parts:

• Input delay: waiting because the browser is busy with something else, often scripts still loading
• Processing: running the code attached to that tap, such as opening a menu or checking a form
• Presentation delay: working out the new layout and painting it, which takes longer on large, complex pages

All three happen on the browser's main thread, which does one thing at a time. A task that keeps it busy for more than 50 milliseconds is called a long task, and a tap that arrives during one has to wait.

How to find slow interactions

INP needs a real person to interact, so a standard page-load test can't measure it directly.

• Field data: PageSpeed Insights and Search Console's Core Web Vitals report show INP from real Chrome users, if your site gets enough traffic.
• Total Blocking Time: this lab metric adds up how much long tasks block the main thread during loading. It isn't INP, but a high figure usually means early taps will feel slow.
• Chrome DevTools: the Performance panel shows live INP as you click around. Turn on CPU throttling to behave more like a mid-range phone, then try the menu, accordions, filters and forms. Record a trace of a slow one to see which scripts ran.

Test on a real mid-range Android phone too. JavaScript that feels instant on a laptop can be far slower on the phones many Indian visitors use. For which numbers to trust, see speed test tools explained.

Common causes on WordPress sites

Cause	What happens
Too much JavaScript at load	Taps made while scripts are still being processed have to wait
Third-party scripts	Chat widgets, tag managers, pixels, heatmaps and ad scripts compete for the main thread
Heavy plugins	Sliders, pop-up builders, animation add-ons and builder add-on packs load code on every page
Busy event handlers	Menus, filters and search boxes do too much work on each tap or key press
Very large pages	Layouts with thousands of elements take longer to update and repaint

Tame third-party scripts

• List every external script: analytics, Tag Manager, ad pixels, chat, heatmaps, review widgets and embeds. Remove anything nobody uses.
• Clean up Tag Manager: tags from old campaigns, and tags that fire on every click, add work to each tap.
• Load chat widgets on demand: show a lightweight button that loads the full widget only when tapped. A simple WhatsApp link needs no script at all; see WhatsApp on your business website.
• Use previews for embeds: show an image for YouTube videos and maps, and load the real embed on tap.
• Be careful with "delay JavaScript" options: optimisation plugins that hold scripts back until the first interaction help loading scores, but that first tap can then trigger all the delayed scripts at once. Exclude scripts that menus and buttons need, and test the first tap on a phone.

Slim down plugins and page builder layouts

• Check which plugins load scripts on pages that don't use them, such as a form or slider plugin loading everywhere. Many can be limited to the pages that need them, through plugin settings or an asset-management plugin.
• Replace plugins that add a lot of code for one small job, and avoid stacking several page builder add-on packs.
• Reduce page size. Deeply nested sections, columns and inner containers make every update slower. In Elementor, flexbox containers usually produce leaner markup than old-style sections and columns. See why Elementor sites get slow.
• Keep long pages sensible: a home page with dozens of sections, counters and animations is harder for a phone to handle.

Fix slow menus, sliders and forms

Menus

Opening a mobile menu should be a simple show-and-hide, not a heavy animation. Mega menus with hundreds of links and images add rendering work; trim them or simplify the mobile version.

Sliders and carousels

Autoplaying sliders keep the main thread busy, so a tap can land in the middle of a slide change. A static hero, or one lightweight slider, is kinder to phones.

Forms, filters and search

• Show instant feedback, such as a pressed button or spinner, before doing heavy work or waiting for the server. Time spent waiting for the network after that first paint doesn't count against INP.
• Don't run heavy validation or live search on every key press; wait until the visitor pauses typing.
• For WooCommerce product filters, consider applying filters on a button tap rather than on every change.

For developers

Break long tasks into smaller pieces and yield to the main thread between them, so the browser can respond in between. Do the visible update first and defer non-urgent work, like analytics events, until after it.

Confirm the fix

• Retest the same interactions in DevTools with CPU throttling, and check Total Blocking Time in PageSpeed Insights
• Field data covers a rolling 28 days, so give it a few weeks, then use "Validate fix" in Search Console
• Re-check whenever plugins or marketing tags are added, as a new tag can undo the work without anyone touching the site's code

INP problems usually come from several scripts adding up, so fixing them means deciding what each page really needs. My WordPress speed optimisation service finds the slow interactions and fixes them without breaking features. For Elementor sites that need leaner layouts, see Elementor development.