"Interaction to Next Paint (INP)"

What is Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) is an new and exiting experimental metric that measures the  responsiveness of a webpage throughout all the interactions on a page. A low Interaction to Next Paint ensures that the page will be reliably responsive at all times.

To calculate the Interaction to Next Paint metric all differences between each user interaction and the final presentation change on the page are saved. The highest number of all the interactions (or the 98th percentile) will be the final  Interaction to Next Paint (INP) metric.

98th percentile or the worst INP?

INP is a metric that aims to represent a page's overall interaction latency by selecting one of the single longest interactions that occur when a user visits a page. For pages with less than 50 interactions in total, INP is the interaction with the worst latency. For pages with many interactions, INP is most often the 98th percentile of interaction latency.

How does Interaction to Next Paint (INP) work exactly?

An interaction happens when a visitor clicks or taps on a page. That interaction might result in a change in presentation on the screen. The Interaction to Next Paint (INP) measures the time between the click and the presentation.

A single interaction's latency consists of the single longest duration of any event that is part of the interaction, where the duration is measured from the point at which the user interacted with the page until the next frame is presented after all associated event handlers have executed. The duration is the sum of the following timespans:

What are good and bad values of the Interaction to Next Paint (INP)?

How to measure the Interaction to Next Paint (INP)?

The Interaction to Next Paint can be measured with lab tools and with field tools. The easiest ways to measure the Interaction to Next Paint is through the PageSpeed insights or though Lighthouse in 'timespan' mode. Read more here: https://developer.chrome.com/en/blog/inp-tools-2022/

How to improve the Interaction to Next Paint?

The interaction to Next Paint is a complicated metric. Your page might be really fast and respond instantly for the most part. Unfortunately if only one interaction is slow it will affect the entire Interaction to Next Paint.

Prevent long tasks on the main thread 

Usually any page is less responsive during the page startup phase. That is when most main thread work is done (parsing, decoding, rendering and scripting).  In order to keep the main thread af free as possible consider:

• Remove unused code. This can be done though a process called tree shaking (removing unused code) and code splitting (bundling your code in a way so that it's grouped into many small bundles that can be loaded as they are needed). 
• Load non-essential code during browser idle. For example, do you really need a chat widget during the first 500ms of page load? No, probably not!
• Identify slow scripts that require a lot of resources and rewrite the code to make it more efficient.
• Make sure your page is 'easy to render'. Avoid large DOM sizes, too many or huge images, too many video's CSS animations etc
  

const formfeedbackEl = document.getElementById("formfeedback");
const formEl = document.getElementById("formf");

formEl.addEventListener("submit", (evt) => {
  evt.preventDefault();
  formfeedbackEl.innerText = "Submitting form ... please hold on";

  let headers = new Headers({ Accept: "application/json" });
  let formData = new FormData(formEl);
  fetch("/form-endpoint", { method: "POST", headers, body: formData })
    .then(function (response) {
      return response.json();
    })
    .then(function (jsonData) {
      formEl.reset();
      formfeedbackEl.innerText = jsonData.message;
    });
});