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 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.
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 is a metric that offers almost no 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 3rd-party engagement or search feature, chat or filter plugin, etc.
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.
On the other side, the use of optimization plugin features can lead to worse INP.
Delay JS, a common feature used to address Pagespeed(Lighthouse), and later to improve the Core Web Vitals LCP, can lead to worse INP. What happens is when used and in a situation where a user clicks a button quickly after a scroll or directly(without other interaction), can lead to bad INP as the scripts will load after the click, and the click feedback will be processed after these scripts load.
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.
Choose Iframes wisely
Due to the content security policy on iframes, recording INP on them is forbidden. Select carefully what iframes you will use.
Get a Wordpress INP Consulting (Beta)
Case Studies
Core Web Vitals
Wordpress
We audited Saintsinner’s ecommerce with Lighthouse and found some optimizations.
After applying them, the site improved LCP by +55% and now passes the metrics.
Core Web Vitals
Wordpress
We consulted with Leapfin and found that the way they used combine CSS/JS was negatively affecting slow connections and the overall CWV.
After removing combine feature and applying others the site improved mobile LCP by 22% and now passes the metrics.