Interaction to next paint (INP) is a metric in Corel web vital which will replace the current first input delay (FID) in march 2024. Till now first input delay is being monitored which is basically capturing only the delay in the first interaction by the user and giving a score based on that, on contrary to that Interaction to next paint is a better approach to define the responsiveness of a website because it also takes care of all the interactions in a page until the user leaves the page and calculates a score based on that. In this guide we are covering the Interaction to paint topic in a great depth so that all the webmasters can easily understand the concepts and also update their websites to be more user friendly.
What is an interaction?
Interaction is any action taken by the user on the webpage, and mostly interactivity is driven by JavaScript. There are some cases where interactivity can be driven by CSS as well for example radio buttons, hover states, CSS animations. Checkboxes etc. But as far as Interaction to next paint metric is concerned only below mentioned interactions will be observed –
- Mouse clicks on any elements
- Tapping on any element on the device with touchscreen
- Pressing a key on physical keyboard
- Pressing a key on onscreen keyboard
- Pressing a key on VR Devices
Any other interaction type which is driven by scrolling or hovering does not factor in INP, but for anything that includes and keystroke or mouse click, for example scroll generated by keystroke or mouse click is indeed factored in while calculating the INP metric score.
How is INP Different from FID?
Since FID is just checking the first input delay which is basically checking only first interactions it cannot be the best approach to find out whether the webpage performed well after the page was loaded completely. On the other hand INP considers all page interactions and by sampling all the interactions, responsiveness of a page can be assessed in a much better way which makes INP more reliable and accurate metric to check responsiveness of a webpage.
What is being assessed by INP?
A good responsive website means that the page responds to user interactions quickly. The interaction could be anything from a simple click or a form being submitted through Ajax. Since naturally some interactions or processes may take time to process, save data or get data from the API, that is why INP is not measuring the time taken to complete the process. INP is the metric more focused on next paint which is the time taken after the interaction for example a click to the time taken to next paint on the website.
So let’s consider a form in a website which needs to be filled by the user and the data is pushed to an API which in turn saves the data in some CRM using an API and then provide a success / fail response. In this case if the user has to wait clueless about whether the data is being processed, being saved on successful saved then it’s a bad experience for the user. So if the webmaster includes a next paint which says “your form is being submitted, please wait” it makes a user much more comfortable. This is the reason why INP is only focused on next paint.
What is a good INP Score?
As per the documentation –
- Good is any value below 200 milliseconds
- Needs Improvement is any value between 200 milliseconds to 500 milliseconds
- Poor is any value above 500 milliseconds
How to measure INP?
Interaction to next paint can be measure bot in field and in the lab using different tools.
Field Data – Field data coming from real user monitoring (RUM) will give you better understanding of page’s INP value along with information about which interaction is causing the low value of INP, which includes whether the interaction occurred on page load or after page load, which interaction was used (Click, keypress or tap) and other related information. If your website is qualified for CrUX you can quickly get the field data for INP.
Using Lab Tools – Using web vitals chrome extension you can enable console debugging and then on every page interaction a debug log will be created in the console where you can observer the startTime, Duration, InteractionId, ProcessingEnd, ProcessingStart etc attributes to understand the time taken for interaction and work on the interactions which are slow.
JavaScript Snippet – You can also use a JavaScript snippet given below by simply copy pasting it in you chrome devtools and it will provide you the same output as the web vitals chrome extension. Using this you can find the time taken for each interaction.
textBox.addEventListener('input', (inputEvent) => {
// Update the UI immediately, so the changes the user made
// are visible as soon as the next frame is presented.
updateTextBox(inputEvent);
// Use `setTimeout` to defer all other work until at least the next
// frame by queuing a task in a `requestAnimationFrame()` callback.
requestAnimationFrame(() => {
setTimeout(() => {
const text = textBox.textContent;
updateWordCount(text);
checkSpelling(text);
saveChanges(text);
}, 0);
});
});
How to optimize Interaction to Next Paint
The most effective way to reduce Input Delay (INP) is by minimizing the amount of CPU processing that occurs on your webpage. Additionally, you can improve the user experience by running more of your code asynchronously, allowing for immediate updates to the user interface even while some tasks are still being executed.
To optimize INP, it’s important to analyze and evaluate your own website’s code, as well as review any third-party scripts that might be impacting its responsiveness.
One excellent tool for this purpose is the DevTools performance profiler. It enables you to identify and understand the activities taking place on the main thread of your webpage, and provides insights on how to optimize its performance.
Start by identifying the common user interactions on your page, and then record the CPU activity that occurs during these interactions. This will allow you to examine and investigate the interactions that contribute the most to delays in performance.
Reduce Input Delay for your webpage
To minimize the Input Delay one effective approach is to decrease and divide the CPU tasks happening in the background on the primary processing thread. While examining data, you can assess the Total Blocking Time measurement to determine if there are any background operations causing delays in user interactions.
If third-party code is accountable for these background tasks, it’s important to investigate whether the code can be adjusted to lessen the workload or if there’s a possibility of loading the third-party script only when it is required.
Add placeholder for loading / Loaders / Preloaders
By Adding loaders / Preloaders after the interaction you cannot decrease the amount of time taken by the whole process but can have the next paint quickly on the screen which will improve your INP metric score and also will give a better experience to user.
Search console errors regarding the INP issue
Above you can see a screenshot of the mail / error which is sent by Google search console when your INP metric is not up to the point. So please go through the steps to optimize INP given above and improve your page speed score. In case of any queries you can contact us at info@simplileap.com and our team which has people specialized in page speed optimization will help you to detect the event interactions which are causing issues and mitigate the issue to get a better score which will in turn improves the SEO for your webpage.
Co-Founder Simplileap
Passionate Full Stack Developer with an unwavering enthusiasm for technology and a relentless drive for continuous learning with more than 10 years of experience in Web Development, SEO and Software Development. Committed to pushing boundaries, I thrive in dynamic environments where I can leverage my expertise in front-end and back-end development to create innovative solutions. With a strong foundation in various programming languages and frameworks, I am dedicated to staying updated with the latest industry trends and incorporating them into my work.
