INP: what is it? How to improve it?

INP : métrique chargement page web


It’s about a web performance measurement metric which measures the responsiveness of a web page, i.e. how quickly it reacts to user interaction. The INP (metric developed by Google) is still in an experimental phase and could become one of the Core Web Vitals in the near future.

Core Web Vitals are Google metrics for evaluating the UX (User Experience) of a site. They combine three criteria: LCP, CLS and FID.

While the LCP and CLS vary from site to site, the FID remains virtually the same for 99.9% of websites. In view of this lack of interest, Google thought of replacing it with a more useful criterion. The INP is designated as his future replacement.

In this article, you will learn what INP is and how to use it to improve the responsiveness of your website.

What is Interaction to Next Paint (INP)?

The INP is the acronym for ” Interaction to NextPaint » (Interaction with the following painting in French). To understand the INP, one must first understand what an interaction is.

What is an interaction?

An interaction is a user input and a device response.

With respect to the INP, an interaction corresponds to one of the following actions:

  • press a key on the keyboard or on the screen (for touch screens)
  • touch an interactive element on a device equipped with a touch screen
  • use the mouse to click on an interactive element

An interaction can also group together several events.

A keystroke on the keyboard groups together, for example, lowercase/uppercase events. All elements of an interaction form a logical interaction with the user.

An interaction takes place in three phases.

When the user makes an input, the device first receives the input, performs the requested processing before rendering and painting the next image.

What does the interaction with the following painting contain?

INP is a time measurement metric that separates the time of user interaction and the time of the next UI update.

It is, for example, the time between the moment when the user clicks on a button to change the image and the moment when the new image is displayed.

See also  3 New Advertising Formats Unveiled!

This time corresponds to the sum of the delays of the three phases of an interaction:

  1. Entry delay. It groups all the tasks running in the background on the page and which prevents the execution of the event handler. It is the time between the moments of user interaction and execution of event handlers.
  2. Processing time. This is the time the browser takes to execute event handlers in JavaScript. It can group several event handlers, for example keyup and keydown events.
  3. The submission deadline. It corresponds to the time elapsed between the end of the execution of the element handlers and the display of the elements of the page.

How to assess the value of the INP?

It is difficult to assess the responsiveness of a page.

On the one hand, the site must be optimized to provide a good experience to visitors. On the other hand, it must be taken into account that the devices (low-end or high-end devices) that users use to connect do not have the same capabilities.

To make a relevant measurement, it is therefore necessary to define achievable expectations even on low-end devices.

In this order of idea, it is necessary to consider a responsiveness metric suitable for broad use cases.

The INP plays this role perfectly and can be used to assess the responsiveness of a page.

It is obtained by selecting one of the longest interactions produced when a user visits a page. The INP corresponds to the interaction with the worst latency in the case of a page recording less than 50 interactions. For those that record a large number of interactions, its value corresponds to 98e percentile of interaction latency.

It admits three ranges of values ​​which lead to three different conclusions:

  1. Slow. For values ​​greater than 500 ms, the INP indicates that the page has very poor responsiveness.
  2. Request for improvement. INP values ​​greater than 200ms and less than or equal to 500ms indicate that the page is moderately responsive, but needs improvement to optimize it.
  3. Fast. An INP value less than or equal to 200 ms indicates that the page has good responsiveness. The page will therefore respond reliably at all times.

How to measure INP?

Inasmuch as experimental metricnot all measurement tools support INP yet.

It is currently possible to measure it either with laboratory data or with field data. You have a number of tools at your disposal to achieve this.

However, you should know that the best way to measure your website’s PNI is to collect data in the field (Field data), from real users.

Field tools for measuring INP

As field tools, we can cite:

  • PageSpeed ​​Insights
  • web-vitals JavaScript library
  • Chrome User Experience Report (CrUX)
  • via BigQuery in CrUX dataset, table experimental.interaction_to_next_paint
  • CrUX API through experimental_interaction_to_next_paint
  • CrUX Dashboard
See also  Where to Work as an SEO Consultant? (Advertiser, Agency, Freelance)

Note that collecting INP metrics in the field only works on browsers that fully support the API Event Timing including his property interactionIdproperty.

Laboratory tools (Lab data) to measure the INP

Here are some tools to choose from:

  • Lighthouse Panel in DevTools, available in “Timespan Mode”
  • Lighthouse User Flows
  • Lighthouse NPM module
  • Web Vitals extension for Chrome

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

It can be complex to write your own code PerformanceObserver to measure INP.

This is why it is recommended to use the web-vitals JavaScript library for INP measurement in JavaScript. This element exports a function onIP and do the measurement for you.

You can then retrieve the INP data with version 3 (beta version) of web vitals. Here is the command to install it:

npm install [email protected] –save

You can then use the onINP method to get the INP of a web page:

import {onINP} from ‘web-vitals’;

onINP(({value}) => {

// Log the value to the console, or send it to your analytics provider.

console.log(value);

});

onIP accepts a function as an argument, just like the other methods exported by web-vitals. It will pass the metrics data to the function provided to it. You can then forward this data to an endpoint for data collection and analysis.

Finally, here is some code suggested by Jeremy Wagner that you can copy and modify in your browser (if necessary) to get an idea of ​​what the longest interactions on your page look like:

let maxDuration = 0;

new PerformanceObserver(list => {

for (const entry of list.getEntries()) {

// Comment this out to show ALL event entry types (useful eg on Firefox).

if (!entry.interactionId) continue;

if (entry.duration > maxDuration) {

// New longest Interaction to Next Paint (duration).

maxDuration = entry.duration;

console.log(`[INP] duration: ${entry.duration}, type: ${entry.name}`, entry);

} else {

// Not the longest Interaction, but uncomment the next line if you still want to see it.

// console.log(`[Interaction] duration: ${entry.duration}, type: ${entry.name}`, entry);

}

}

}).observed({

type: ‘event’,

durationThreshold: 16, // Minimum supported by the spec.

buffered: true

});

How to improve your INP?

If the INP value indicates that your responsiveness is poor or requires improvement, you will need to put in place actions to improve these values.

High INP values ​​signal a heavy reliance of the page either on JavaScript or other non-JavaScript tasks (checkboxes, radio buttons, HTML elements, etc.).

These can run at the same time as the user’s interactions. The web.dev site offers ways to improve the Interaction to Next Paint (INP).

How to improve your INP when starting the page

The INP can be a factor when starting the page.

In fact, users can try to interact with a page before it’s even finished fetching the JavaScript to set up the event handlers that produce the interactivity needed to make the page work.

See also  How to Schedule TikTok Videos? (Without Notices)

To improve the responsiveness of the site when loading the page, you have several options:

  • Eliminate unnecessary code with Coverage tool in Chrome’s DevTools.
  • Identify opportunities for code splitting in order to lazyload JavaScript not required to load the page.
  • Spot slow third-party scripts that load at page load startup time.
  • Identify long tasks that you can optimize using the performance profiler.
  • Make sure you don’t overwork your browser once the JavaScript has finished loading. In other words, you should avoid requesting a re-render of the overly heavy component tree, too many heavy CSS effects, large image decodes, etc.

How to improve the INP of a page after it starts?

The calculation of the INP takes into account data collected throughout the life cycle of the page.

It can therefore also be influenced by events that take place after the start of the page. If your website finds itself in this case, here are some avenues to explore to find solutions to improve your INP:

  • Properly Prioritize Tasks with the API postTask
  • Utilize requestIdleCallback to postpone non-essential tasks for when the browser is idle.
  • Evaluate discrete interactions with a performance profiler (performance profiler) and identify long tasks to optimize.
  • Evaluate the impact of third-party scripts on the responsiveness of your pages through an audit.

Why is UX important for SEO?

A good user experience (UX) attracts visitors, reduces bounce rate and sets you apart from your competitors.

Google now takes this criterion into account in its positioning algorithm.

It is therefore necessary today to combine UX and SEO to make a difference and improve your positioning in search engine results.

What are Core Web Vitals used for?

Core Web Vitals are Google criteria for evaluating the UX of a website. They include:

  • The LCP (Largest Contentful Paint) which measures the loading speed of the pages of the site;
  • The CLS (Cumulative Layout Shift) which checks the visual stability of a page;
  • The FID (First Input Delay) which measures the reaction of a page when a user presses a button.

Google realized that the FDI criterion was not very relevant. So he decided to replace it with the interaction with the following painting (INP), aperformance indicator (KPI) which measures the responsiveness of a page.

Why improve the INP of your web pages?

Poor responsiveness harms the user experience on your site.

By improving the INP of your web pages, you reduce latency and increase the responsiveness of your site.

As a result, you provide a better experience for your visitors and increase your chances of getting better positioning in search engine results pages (SERPs).

Leave a Comment

Your email address will not be published.