What's INP And 3 Ways To Improve It On Wordpress

Boost your website speed & performance.

INP is set to become a Core Web Vitals metric in March 2024. The metric factors the user experience throughout the page lifecycle, as Google says. It replaces FID.

INP has been found to have a direct relation with conversion rates, the worse the INP the more conversion rates tend to suffer. This relation has no consistent correlation with Google’s thresholds(“good”, “needs improvement”, and “poor”).

What is Interaction to Next Paint (INP)

INP measures the time of each click, tap, or keypress on the page until the next update to the screen. Most of the work on INP will be on mobile, as it has less processing power than desktop. INP is also considered the most difficult metric to optimize.

The threshold for INP to measure is the 75th percentile of page loads recorded in the field, segmented across mobile and desktop, with the following range:

An INP below or at 200 milliseconds means that your page has good responsiveness.
An INP at <200ms and below or at 500 milliseconds means needs improvement.
An INP <500 milliseconds means that your page is in poor range.

How to check INP

Always check for Core Web Vitals field data or strive for results from live users.

To get INP field data use the new Observatory tab under the Speed Category on Cloudflare. Enable the free Real user monitoring (RUM), add a URL(data is segmented by URL), and wait for results. You also need to have Cloudflare Web Analytics enabled(guide) to get RUM data.

SpeedCurve and RumVision also offer INP field data monitoring.

Use Lighthouse’s Timespan mode to check INP lab data, which allows you to analyze an arbitrary period of time and emulate user interaction.

You can also test INP with Web Vitals Extension.

When testing INP lab data, follow this workflow to have closer results to field data:

Emulate Mobile
Throttle the CPU to mobile (x4, x6 slowdown)
Accept cookies

Some of these can be emulated in the Chrome Performance tab. When checking lab or field data, you may also prioritize testing INP on high-traffic pages and with most conversions.

Improve INP in Wordpress

This metric does not have much room for low-hanging fruit optimizations that can be done with plugins or a few lines of copy-pasted code.

Most of it may be done by developers of your most used plugin(which users most interact with), such as a 3rd-party engagement or search feature, chat or filter plugin, etc, or a speed expert.

Choose plugin or theme features wisely

Themes that offer many functions bundled may have unoptimized code that will make your INP be in the above 200ms range by default, failing the metric.

Plugin features can also lead to worse INP as they may add additional JS. Use a RUM tool such as RumVision that tracks which 3rd-party tools are degrading your INP.

Test disabling the Delay JS feature

The Delay Javascript feature was a tool meant to improve Pagespeed, as Total Blocking Time(TBT) still has 30% of the total scoring.

But as Core Web Vitals matures, you can test disabling this feature. You can improve your INP by 34% just with this optimization.

Go to your speed optimization plugin and disable the feature. Check your INP a few days later and see the results.

With INP replacing FID, new techniques to load Javascript may be necessary to avoid having a bad INP, including import on interaction(not to be confused with delay until user interaction).

Run third-party scripts off the main thread in Web workers

You can run third-party scripts on web workers with Partytown, or Zaraz(Cloudflare Edge). They are improving support for more APIs, making it able to run not just pageviews triggers from analytics tools, but much more popular analytic metrics.