"Interaction to Next Paint (INP)"

Learn about Interaction to Next Paint (INP) and mow to improve it

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

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:

  • The input delay, which is the time between when the user interacts with the page, and when event handlers execute.
  • The processing time, which is the total amount of time it takes to execute code in associated event handlers.
  • The presentation delay, which is the time between when event handlers have finished executing, and when the browser presents the next frame.
  • 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?

    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
    Provide immediate feedback to ensure the page responds directly to user input 
    When a visitor performs an action like sending a form, or adding a shopping item to a basked do not wait for the server-side confirmation (your form has been send, your items have been added to the basked) but provide immediate feedback (we are sending your form, adding itemX to basket)

    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:

    lighthouse 100 score

    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.

    Core Web Vitals Consultancy

    In-house Core Web Vitals support.

    read more

    Core Web Vitals site audits

    Improve and fix your PageSpeed strategy

    read more

    Core Web Vitals training & workshops

    Build in-house knowledge and empower your teams

    read more

    WordPress  optimization

    Fix your WordPress Core web vitals issues

    read more

    Improve Interaction to Next Paint (INP)Core Web Vitals Improve Interaction to Next Paint (INP)