Everything you need to know about Interaction to Next Paint (INP)
Interaction to Next Paint (INP) is a complex user-centric metric that raises many questions by different stakeholders like marketers, product owners, developers, SEO specialists and e-commerce managers. Therefore, we have collected the most frequently asked questions in this article so that you have all the relevant information about INP together, can find specific information on a particular sub-topic and have access to more in-depth articles that elaborate on a specific topic.
Reading this article will give you a better understanding of INP, which you can use to improve the responsiveness aspect of the user experience you want to offer your visitors. Optimising your site for smooth user interactions results in a seamless user experience that keeps visitors engaged and returning for more.
Measuring responsiveness #
What is Interaction to Next Paint (INP)? #
Interaction to Next Paint (INP) is a web performance metric that measures the time it takes for the browser to render the next visual update (paint) in response to a user interaction (e.g., clicking a button). It takes into account various factors such as input processing, event handling, and rendering updates. This metric helps website owners and developers understand how quickly their site responds to user input, ensuring a smooth and responsive user experience.
Why is Interaction to Next Paint important? #
Interaction to Next Paint is important because it measures the responsiveness of a website after a user interaction. By monitoring INP, businesses can identify bottlenecks in their website's responsiveness. A good INP score ensures a smooth and responsive user experience, leading to higher user satisfaction and improved business success of your website.
What is the difference between Interaction to Next Paint (INP) and First Input Delay (FID)? #
While both INP and FID are web performance metrics that focus on user interaction, they measure different aspects of the process. Interaction to Next Paint measures all interactions with a page throughout the session, while First Input Delay measures only the first interaction with a page. Whereas FID measures only the first input delay, INP measures the time it takes for the browser to visually update the page after a user interaction. INP measures all phases of an interaction (input delay, event processing time and presentation delay).
What is the relation between Total Blocking Time (TBT) and Interaction to Next Paint (INP)? #
There is a relationship between TBT (a lab metric) and INP (a field metric), a high TBT measured in lab data is likely to result in elevated INP values in field data. TBT is a proxy for INP which doesn't mean it's 100% accurate - but the best we have in lab tools with no interaction.
Identifying responsiveness issues #
What is a good Interaction to Next Paint score? #
A general rule of thumb is that an INP score of under 200 milliseconds is considered good, as it ensures that users perceive the website as fast and responsive. Scores between 200-500 milliseconds are moderate, you will have to use the room for improvement to convert this to good responsiveness. INP scores above 500 milliseconds indicate that the website's responsiveness requires serious optimisation, as users may perceive the site as slow or unresponsive.
How to identify Interaction to Next Paint issues on your website? #
To identify INP issues, monitor your INP scores using browser APIs and performance monitoring tools. When you have RUM software installed on your site capable of capturing attribution data for INP (e.g. Google Web Vitals library), you can use it to detect specific UX problems experienced by real users. Analyse the data to find bottlenecks and areas with poor responsiveness. Additionally, use tools like Chrome DevTools, Lighthouse or WebPageTest for technical deep dives into responsiveness issues.
What if no Interaction to Next Paint value is reported? #
If no INP value is reported, it may indicate that there were no user interactions during the measurement period, or the tools used to measure INP failed to capture the relevant data. Clicking a mouse, tapping on a touch screen or pressing a key on a physical or onscreen keyboard are relevant interaction types for INP. Hovering and scrolling does not factor into INP.
Delayed interactions and long tasks #
What are interactions? #
Interactions are any user-initiated actions on a website, such as clicking a button, scrolling, or typing in a text field. These interactions trigger events that the browser processes and responds to, updating the UI accordingly.
What can delay an interaction? #
What is the relationship between long tasks and Interaction to Next Paint? #
Long tasks, which are tasks taking more than 50 milliseconds, can block the browser's main thread, leading to delays in responding to user inputs and updating the user interface UI, and negatively impact INP.
Browser main thread blocking #
What is blocking the browser main thread? #
What tasks does a browser main thread perform? #
What do they mean by a single-threaded browser? #
What affects the speed at which the browser main thread does its work? #
How does third-party tooling and tracking affect INP? #
Optimising and preventing responsiveness issues #
How can I improve Interaction to Next Paint? #
Improving your INP score involves optimising various aspects of your website to ensure it responds quickly to user interactions. Some strategies to consider include:
- Improve main thread availability
- Lazy loading of non-critical and off-screen tasks, load these resources only when needed, preferably when the main thread is free.
- Remove unused code though a process called tree shaking.
- Be cautious of the defer attribute on non-critical scripts. When the page has been parsed, all fully downloaded deferred scripts are executed in a batch, i.e. as a single task.
- Minify and bundle your code for less redundancy.
- Remove third-party snippets of services whose subscription has expired, no one is using it, or where there is more than one product offering similar features.
- Use facades for services like chats, YouTube videos and Google Maps and load their resources when users show their intent (hover or clicking) to use these services.
- Identify INP issues
- Find out which pages have responsiveness issues and which interactions cause problems. Perhaps you have observed issues yourself, or users of your site have experienced issues and shared their experiences. When you have RUM software installed on your site capable of capturing attribution data for INP (e.g. Google Web Vitals library), you can use it to detect specific UX problems experienced by real users.
- To resolve issues with INP, you will need to analyse the activity of the browser main thread by using the performance tab in Chrome Devtools or use Lighthouse's timespan mode to look for INP issues and what interaction delays are involved.
How to improve INP with React? #
How to improve INP with Next.js? #
How to improve INP with Vue? #
How to improve INP with Nuxt? #
These valuable questions and answers do not conclude this article, we will continue to update this post with new relevant information as it becomes available or updates occur for INP.
Bookmark this article or check periodically if this article has been updated to help you benefit from optimising Interaction to Next Paint.