Google updated their article on INP a few weeks back. Interaction to Next Paint (INP) is a new Core Web Vital metric currently under development. It gauges a page’s overall responsiveness to user interactions by observing the latency of these interactions during a user’s visit. The goal?
Achieve an INP of 200ms or less for an optimal user experience! To ensure you’re hitting this target, focus on the 75th percentile of page loads, taking into account both mobile and desktop devices.
In simpler terms, let’s imagine you have a website with various interactive elements like buttons, forms, menus, etc.
Now, when a user visits your site and interacts with these elements – say, they click on a button – there’s a certain time that it takes for the website to respond to that interaction. This could be by loading a new page, opening a dropdown menu, or any other visual feedback. This response time or ‘latency’ is what the INP metric is designed to measure. So, if the user clicks on a button and it takes a long time for the next visual feedback (or ‘paint’) to appear… that’s no bueno.
Whether your site has few or many interactions, a high INP can jeopardize user experience. To start, you’ll need data to understand if your website’s INP needs improvement.
Real User Monitoring
Field data from a Real User Monitoring (RUM) provider can give you valuable insights like a page’s INP value and the specific interaction causing it.
If you’re not relying on a RUM provider, the Chrome User Experience Report (CrUX) via PageSpeed Insights can fill in the gaps. It provides a summary of metrics for millions of sites, including INP.
But remember, having a RUM provider or your own RUM solution is always better. Once you’ve identified slow interactions, it’s time to optimize. Every interaction consists of 3 phases: the input delay, the processing time, and the presentation delay.
Each phase contributes to the total latency, so optimizing each part is essential. Minimizing input delay is critical.
Optimizing event callbacks is a must. If your interaction logic is complex, consider breaking up work in event callbacks into separate tasks using methods like setTimeout. It helps prevent long tasks that block the main thread.
Visual updates matter!
To improve rendering time, structure your code to run only the logic required for visual updates before the next frame. Everything else can be deferred to a subsequent task. And avoid layout thrashing for better rendering performance.
Remember, improving INP is an iterative process. Keep optimizing, and over time, you can enhance your site’s responsiveness to a point where users are satisfied. It takes effort, but the result is a better user experience, making it well worth the time!