Interaction to Next Paint

The Interaction to Next Paint (INP) is a Core Web Vital metric that replaced First Input Delay (FID).

Overview of Interaction to Next Paint

The INP represents the responsiveness of a page, measured by the longest of the observed user interactions.  

These three types of interactions are measured:

• Clicking with a mouse
• Tapping on a device with a touchscreen
• Pressing a key

The measurement starts with the interaction, and ends when the page responds to the user with visual feedback, such as a navigation menu being displayed, or an item being added to a shopping cart.

Google considers a page has a good responsiveness if its INP is equal or below 200 milliseconds.

When a page has a low INP value, it means that users see the page is fast to respond to their interactions, this is why this metric is so important.

How to find the INP of page

The INP metric can found in the  Core Web Vitals Assessment section of the PageSpeed report. This means this metric is measured in the field, that is, the information is taken specifically from the experience of real visitors in the last 28 days.

Which also means that any external factors, such as slow networks, or slow devices can have a negative impact, and site owners won't have full control over it.

Now, if a page doesn't have enough information, no INP metric will be available, see more here.

And, the process of obtaining a theoretical INP metric is very complex, and it's only recommended for experts or developers. 

If a site doesn't have enough interactions to report a field-measured INP metric, the TBT metric can be used as a reference.

Difference between INP and FID

While the FID is the value of the first user interaction, the INP considers all the interactions that a user had while visiting a page, and reports the greatest one.

Also, the FID metric is limited to measuring the time it takes for scripts to be executed, but INP takes into account the time it takes until the actual visual feedback is rendered.

Improving Interaction to Next Paint

The INP metric can be improved by speeding up the slow user interactions.

The whole user interaction can be split in three parts:

• Input delay, which is the time it takes for a page to start working after a user input
• Processing time, being the time it takes for the process to be completed
• Presentation delay, that is the time the browser needs to render the frame that contains the visual response

And, in order to optimize all the parts of an interaction, the following techniques should be applied:

• Minimize the resources necessary to load a page and make it functional
• Avoid using large scripts
• Include as little JavaScript as possible
• Optimizing the event callback’s code
• Don’t block the main thread, and break up long tasks into smaller tasks
• Avoid using third-party scripts in a page
• Reduce the DOM size
• Avoid rendering a lot of the HTML with JavaScript

All in all, improving the INP is a complex task that requires:

• WordPress themes/plugins developers to review their code, and avoid having long tasks.
• WordPress site owners to reduce the number of plugins and scripts running on the pages.

How can WP Rocket help

The following WP Rocket options can help:

• Delay JavaScript execution - This is the most important feature, as it will delay the execution of JavaScript, making the rendering of the page faster.
• Remove Unused CSS - This option minimizes the CSS resources on a page, so that it can be rendered faster.
• Load JavaScript deferred - This feature will defer the JavaScript of a page, allowing it to be rendered faster.
• LazyLoad and LazyLoad for iframes and videos - These optimizations will also help render the page faster.

Important: since the INP metric is part of the Core Web Vitals Assessment section, the impact of WP Rocket can't be measured properly at this moment.

How can WP Rocket negatively impact

The Delay JavaScript execution feature could potentially have a negative effect on the INP.

In this case, you should exclude the scripts needed for critical interactions to happen. 

The most common type of critical interactions are the  above-the-fold interactions, such as clicking/tapping on a navigation menu, but this can change from site to site.