"Interaction to Next Paint (INP)"
Learn about Interaction to Next Paint (INP) and mow to improve it
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)?
To pass the Core Web Vitals for the Interaction to Next paint metric the 75th percentile of page loads recorded in the field should stay below the 200ms:
- An INP below or at 200 milliseconds means that your page has good responsiveness.
- An INP between 200 and 500 milliseconds means that your page's responsiveness needs improvement.
- An INP above 500 milliseconds means that your page has poor responsiveness.
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?
Provide immediate feedback to ensure the page responds directly to user input
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;
});
});I help sites pass the Core Web Vitals:
A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?" As a PageSpeed expert I will fix your PageSpeed problems once and for all. I can perform a page speed audit based on the Core Web Vitals guidelines, work with your team or fix your issues myself.
