This article was updated in March 2024 after the INP metric became part of the Core Web Vitals and replaced the FID metric.
INP as Core Web Vital measured value
The Core Web Vitals metric INP (Interaction to Next Paint) was still an experimental metric until recently (until May 10, 2023), but it was already displayed in the Google PageSpeed Insights check. The new KPI officially replaced the FID (First Input Delay) KPI as part of the Core Web Vitals on March 12, 2024. Until then, it was treated as an outstanding metric. This means that it has already been tested and is ready to replace FID, but has not yet been evaluated in the score before March 12, 2024.
What is measured with Interaction to Next Paint?
The key figure Interaction to Next Paint measures the responsiveness of the page for all user interactions with it. Low latency when using a website is desirable for a good user experience. All response times are summarized in the INP key figure. The INP value for a page is the longest interaction measured in each case.
Examples of user interactions
The result of interaction with the page is always visual feedback. The following examples illustrate how the INP value is influenced:
- In online stores, a small number on the shopping cart often indicates whether the item has really been added.
- Another example is clicking on the frequently used so-called burger menu (3 bars on top of each other) as mobile navigation. If there are nested sub-menus, you should also test these.
- The opening and closing of an accordion navigation (pop-up mechanism) is also triggered by a user action. There are often delays in the presentation of the content. These are often used for FAQ areas.
- Clicking on jump labels is counted as user interaction with the respective page.
- The use of the internal website search by the user can cause latency when opening and closing it, but also when entering characters in the search field. Many searches also have an auto-complete function or direct display of possible results as the user types. This is of course extremely helpful for the user, but annoying if the search result preview only works very slowly.
- Slider elements usually have navigation arrows and sometimes also bullets/dots below the slider elements. The slider does not always react immediately when the user wants the next element to be displayed.
What can cause a poor INP value?
For example, slow response of the website to clicks by users on certain elements of the page or a contact form, which, for example, through real-time data validation of the user input, ensures that it only reacts slowly to clicks or keystrokes. For the user, this gives the impression that the page is not responding, which in turn leads to a poor user experience.
The primary goal is clearly defined: To ensure visitor satisfaction on the website. Happier users mean higher conversion rates, a competitive advantage and an overall improved user experience, which can have a positive impact on Google rankings.
Why don't I see the metric in my Google PageSpeed Insights measurement?
The measured value can only be collected via the accesses of real users within the last 28 days. For this reason, the new KPI is only displayed if sufficient field data (user data as a history report) is already available for the URL. It is important to note whether the data is displayed for the respective URL or only for the origin.
Other causes may be:
- No user interactions available
- Interaction with the page using gestures (gesture control)
- only bot accesses (e.g. crawlers) that do not interact with the page
The KPI is not displayed within the lab data of the Google PageSpeed Insights report (current measurement/query). The best way to measure this is with real user data (RUM tool or CrUX report).
INP in the Google Search Console
In the Google Search Console, you can see for both desktop and mobile devices whether there are problems with the Core Web Vital values with individual URLs. The Core Web Vitals report can be accessed via the “User-friendliness” section.
How does INP differ from FID (First Input Delay)?
INP measures all page interactions during the user’s entire visit and FID only takes into account the first interaction with the page and only the input delay, not the execution time and result display of the next frame. FID only measures the first impression the user has when using the site, so to speak, while INP measures the general responsiveness to user actions.
How is INP measured?
The Event Timing API is used to collect data. The interface is used to measure the latency both before and after the page is loaded. This is part of the Google Chrome browser. The users of the browser thus provide the necessary data.
The measurement always starts when the user begins the action. The measurement ends as soon as the first visual feedback is visible on the page.
These actions are measured in concrete terms:
- Mouse clicks
- Touch input via touchscreens
- Keyboard inputs (physical keyboard and screen)
- Hover
- Scroll
It is important here that not only the INP value itself is displayed, but also the context data (including the input method) for the user interactions in order to be able to make a statement about the causative elements.
What is a good INP value?
- A low INP < 200 ms is the target and is therefore considered a good latency. To ensure that this goal is met for most users, a good threshold to measure is the 75th percentile of page load times segmented by mobile and desktop devices.
- An INP above 200 ms but less than 500 ms means that the responsiveness of the page needs to be improved.
- An INP value above 500 ms indicates that the page reacts poorly to user interactions.
What optimization measures are there for Interaction to Next Paint?
Basically, it is very important that the user always receives very quick visual feedback that their action on the page has led to a certain result or that something is happening as a result of their action.
If there is field data in the Google Search Console or in the PageSpeed Insights Report that indicates a high INP value, optimization is required.
- An optimized HTML DOM with as few elements and nesting as possible ensures fast rendering of the page and thus has a positive influence on the INP. Refactoring the HTML code naturally involves some effort, so a quick solution may be to first reduce the number of modules on the website in general (for example, products on the product list page or slider elements). Especially the deeply nested modules with many HTML elements are a starting point for optimization or reduction.
- Code splitting can be very useful for a good INP value, as it reduces the amount of JS code. Splitting by page type/template makes sense here.
- The removal of unused JS and CSS code should be considered.
- Identification and optimization of slow JS. Here you should take a look at the 3rd party JavaScript in particular (but not only).
- Use of WebP graphics.
- Reduce or remove CSS animations.
For websites with many interactive elements, improving the INP is a longer process. It can sometimes be difficult to find out which interaction leads to a poor user experience.
Example for optimizing an accordion navigation:
- Linking of the entire element so that the user does not have to hit the plus sign to expand or the headline to make the content of the accordion visible.
- Fast unfolding instead of slow sliding.
Long Animation Frames (LoAF) API
Each individual user interaction on a website is divided into 3 different phases, which together form the total latency of an action.
- Input delay: Begins with the action by the user, ends with the next phase
- Processing time: The execution time for the action until completion
- Display delay: The delay until the visual result is displayed for the user
How do I localize the INP problems on the page?
With the help of the Web Vitals extension in the Google Chrome browser, you can measure every single user action on the page very well.
To do this, you have to activate the “Console logging” setting in the Chrome browser plugin and can then see the browser feedback in the developer console of the Firebug tool while you are performing the actions on the respective page:
The 3 phases of the latency time are then also visible here, so that you know exactly where to start with the optimization:
It is also advisable to set a mobile device (smartphone) and data throttling for testing in the browser, as this makes it easier to see the problems that only occur on mobile devices.
Long Animation Frames (LoAF) API
To improve a bad INP score, you can use the new Google Chrome LoAF API.
The API makes it possible for developers to quickly, easily and very precisely obtain information about which files are the cause of the poor user experience. This allows you to find out whether your own or external files need to be optimized and whether they are JavaScript files or other resources.
With the help of the LoAF API, the user experience can therefore be greatly improved with new information.
What changes when you use the Google Page Speed Insights API?
If you use the Google Page Speed Insights API, you will now also receive the identical measured value with a different name. INTERACTION_TO_NEXT_PAINT instead of EXPERIMENTAL_INTERACTION_TO_NEXT_PAINT. The attribute EXPERIMENTAL_INTERACTION_TO_NEXT_PAINT will then be removed from the response for API queries on August 8, 2023.
