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? #
An interaction can be delayed by factors such as long-running JavaScript tasks (long tasks), slow event processing, inefficient event handling, and delays in rendering the next frame. These factors can prevent the browser from quickly responding to user inputs and updating the user interface (UI).
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? #
Blocking the browser main thread refers to the situation when long-running tasks, such as heavy JavaScript execution or resource-intensive operations, consume the main thread's resources, preventing it from processing user inputs and updating the user interface (UI) promptly.
What tasks does a browser main thread perform? #
The browser main thread performs tasks such as parsing HTML, executing JavaScript, calculating styles, performing layout, painting, and handling user inputs. It is responsible for rendering and updating the web page's user interface (UI) and processing user interactions.
What do they mean by a single-threaded browser? #
A single-threaded browser refers to a browser where the main thread is responsible for handling all major tasks, such as parsing HTML, executing JavaScript, rendering the user interface (UI), and processing user inputs. The browser's main thread can only handle one task at a time and the browser cannot interrupt a task that's in progress. This means that if a task blocks the main thread, other tasks, such as user interactions, may be delayed.
What affects the speed at which the browser main thread does its work? #
The speed of the browser main thread can be affected by factors such as the complexity of the web page, the amount and efficiency of JavaScript code, the device's processing power, and the browser's rendering engine. Some factors are within your control; others, such as the devices in use by visitors to your site, must be taken into account during development.
Role of JavaScript for INP #
Is Interaction to Next Paint just about JavaScript? #
The INP metric is not strictly about JavaScript, but because INP is affected by other main thread blocking, often caused by long or too many JavaScript tasks, JavaScript is often the biggest cause for high INP scores. Optimising JavaScript is a crucial aspect of improving INP scores.
How do modern JavaScript frameworks perform on the new INP metric? #
Modern JavaScript frameworks like React, Vue, Next.js, and Nuxt are designed with performance in mind. However, their performance on the INP metric depends on how they are used, the complexity of the application, and the implementation of optimisation techniques. Properly optimised applications built with these frameworks can deliver good INP scores.
How does third-party tooling and tracking affect INP? #
Third-party tools and tracking scripts can negatively affect INP by adding extra overhead, increasing the amount of JavaScript execution, and potentially blocking the main thread. When using third-party tracking and tooling, JavaScript is often the main component that your own pages have to load and run, resulting in poor responsiveness. Carefully selecting and optimising third-party tools can help minimise their impact on 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
- JavaScript long tasks should be split up using bundlers like Webpack, Vite, Rollup, etc. This allows more gaps between tasks where the main thread can answer user input directly.
- 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.
- Offload the browser's main thread by using techniques such as Web Workers, which allow running JavaScript in a separate background thread.
- Reduce first- and third-party JavaScript
- 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? #
Improving INP with React can be achieved by optimising JavaScript, using efficient event handling, utilising code splitting, and employing lazy loading. Additionally, React's built-in performance optimisations, such as the use of virtual DOM and efficient reconciliation algorithms, can help improve INP performance. React 18 was designed to help improve interactivity with features like selective hydration with Suspense.
How to improve INP with Next.js? #
To improve INP with Next.js, leverage its built-in performance optimisations such as automatic code splitting, server-side rendering, and static site generation. Additionally, optimise JavaScript, use efficient event handling, and implement lazy loading for images and components. Using Suspense (React 18), you won't need to wait for all the JavaScript to load before you can start hydrating. In this way, components can become interactive faster since the browser does not have to do everything at once. This makes your page more responsive and results in lower FID and INP.
How to improve INP with Vue? #
Improving INP with Vue can be done by optimising JavaScript, using efficient event handling, leveraging Vue's built-in performance optimisations like the virtual DOM, and implementing code splitting and lazy loading for components and images.
How to improve INP with Nuxt? #
To improve INP with Nuxt, take advantage of its built-in performance optimisations, such as server-side rendering, automatic code splitting, and static site generation. Additionally, optimise JavaScript, implement efficient event handling, and use lazy loading for images and components.
Conclusion #
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.
