Technical Guides
What is Interaction to Next Paint (INP)?
By
Alex Kiziah

Interaction to Next Paint (INP) is Google's latest field metric for web performance that measures responsiveness, similar to First Input Delay (FID) - which is currently one of three Core Web Vitals. Essentially, INP measures how quickly the page responds to a user's input.

Faster response times will feel snappy and smooth, while slower response times will feel laggy, with the latter causing frustration with each consecutive action until a user ends up leaving your site. As with all web performance metrics, the ultimate goal is not to achieve the lowest number, but instead to create the best possible user experience so that consumers will stay on your site longer and be more inclined to make a purchase.

How is INP measured?

If there are less than 50 interactions in total on a page, INP will be measured as the single longest interaction latency that occurs on that page. If there are more interactions, INP will be measured as the 98th percentile of interaction latency.

Interaction latency measures the time from when a user interacts with a page (such as a tap, click, or press of a key) until the next frame is presented (meaning the user sees something different on their screen and gets the feedback that their interaction has triggered the change). This duration of time includes:

  • input delay - which is the time between a user interacting with the page and event handlers executing
  • processing time - which is the time it takes associated event handler code to execute
  • presentation delay - which is the time between processing finishing and the browser rendering the next frame
phases of an example interaction
phases of an example interaction

INP considers all page interactions and the full interaction latency, where as FID measures the first interaction and only the input delay of that interaction - hence why FID measurements are faster and have lower thresholds. Since INP gives a much more accurate representation of a page's responsiveness, we wouldn't be surprised if INP replaced FID in the near future, when it's no longer an experimental metric (opinion).

What should my site's INP be?

As with Google's other field metrics, the following thresholds are based on the 75th percentile of page loads recorded in the field, segmented across mobile and desktop devices:

  • Good is below 200 milliseconds
  • Needs Improvement is between 200 and 500 milliseconds
  • Poor is above 500 milliseconds
75th percentile thresholds for INP measured in milliseconds

If your site was within the Good threshold for all Core Web Vitals (LCP, FID, CLS) prior to the release of INP, it does not guarantee that your site is within the Good threshold for INP (see the example featured image from this article). We recommend running your site through PageSpeed Insights and looking at the new field metrics to see where your site falls.

How do I improve INP?

Since this metric has only been out for less than 28 days, there's not enough real user data or tests we've conducted to determine what makes the biggest difference to INP. However, since it's similar to FID, we can assume that similar good practices would apply: reducing the number of 3rd parties, deferring code that doesn't need to load early on, prioritizing elements and features that your users will most likely want to interact with immediately, etc.

Additionally, Google provided an example of the difference between poor responsiveness and good responsiveness, so it might be worth recording interactions across your site and determining where you can add elements to provide better feedback to your visitor that the action they've taken is processing.

poor vs good responsiveness example
The right version is a better experience because a loading indicator appears immediately after interaction, while the desired image downloads, vs waiting with no feedback until it downloads.


Next Steps

Web Performance is a balancing act and requires consistent experimentation to do well. Now that Google is paying attention to INP, we'll be monitoring our optimizations closely to see what works best over the coming months.

Even though this metric is new, we've been working with Shopify sites of all sizes for over four years, so we have a lot of experience with the various issues and how to solve them - it's likely many of those will overlap with INP. If you'd like to try our platform or get some help analyzing your performance, check out our offer below to book a call with one of our experts.

Render Better automatically reduces site speed, allowing shoppers to browse and checkout faster, resulting in a better user experience and more sales.

Book a free 30-min call with one of our experts to assess your web performance and see how Render Better can improve your site.

Optimized Performance =
Happier Customers
Improving your Core Web Vitals is as simple as having us install Render Better today.
Get in Touch
© 2022 Render Better. All right reserved
Privacy PolicyTerms of Service
×
Get in Touch
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.