min read

Interaction to Next Paint (INP)

Written by

Joe Krug

Edited by

TL;DR:

INP is a web performance metric that measures the delay until a user can interact with your website. INP tests all possible interactions on the page and runs them to the end result (next paint) to show the slowest actions the user can take and how long it would take for those actions to be completed.

What is Interaction Next Paint?

Interaction to Next Paint (INP) is the “Interactivity” metric of the big three Core Web Vitals that measures how long it takes for a user to be able to interact with your website.

INP measures the perceived responsiveness of a web page by measuring the delay until a user can interact with your website. It measures overall responsiveness, not just the initial interaction.

The theory is… The quicker a user can interact with your site, the more likely they are to want to use it. The metric is actually measuring how quickly a browser can confirm a possible user interaction (not a human).

How is INP calculated?

The speed test will fire programatic user interactions, such as clicks, taps, and key presses and calculate how quickly a user can perform actions on your website. Note that it ignores passive interactions like hovering or scrolling.
The test measures the delay from the first interaction to the final result. For example, if you click a “Open Modal” button, INP will recognize the click, process the click, and show the result of the click. The measurement is the time between the click and the result.
INP tests all possible interactions on the page and runs them to the end result (next paint) to show the slowest actions the user can take and how long it would take for those actions to be completed.
INP uses your worst results! Instead of averaging all INP results, it targets the the most delayed parts of your website, and uses those for your INP in PageSpeed scores.

Does INP influence SEO?

Neither INP nor Web Core Vitals are ranking factors for search engines. While Web Vitals metrics will not directly affect your website rankings, they are important principles for great web developers to understand. Bad scores that indicate a bad user experience may hurt your SEO if users bounce from your website.

What is a great INP score?

A low INP is less than 200 milliseconds. Values above 500 milliseconds suggest poor performance.

How to optimize Webflow websites for INP?

Reduce and optimize JavaScript. JS is one of the big destroyers of INP. Avoid large bundles and long-running scripts that can delay page execution. Remove and JS that is not necessary.
Break up long JavaScript tasks into smaller code chunks using requestIdleCallback() or setTimeout() to fire JS functions during idle periods when the browser is not busy with other tasks. “Long tasks” are tasks that block the main thread (usually for more than 50 milliseconds). When the main thread is blocked, it can't handle user interactions or paint updates, which leads to slow and sluggish web page experience.
Use Web Workers. A key aspect of INP is keeping the main thread light and free for UI loading. We can offload heavy JS to Web Workers to free up the main thread.
Lazy load non-necessary assets. Anything that is not needed on pad load, consider lazy loading it. Anything behind a modal or hidden UI element is a great candidate.
Optimize all assets. Images, videos, scripts, CSS, everything. Compress and optimize as much as possible.
Use a CDN to host certain files. We have a dedicated article on this here.