Introduction
In today's fast-paced digital world, users have high expectations when it comes to website performance. Slow loading times and unresponsive interfaces can lead to frustration and drive visitors away. One important metric to consider is Interaction to Next Paint (INP), which measures the longest response time to a user interaction on a page. Optimizing INP is crucial to deliver a smooth and engaging user experience.
Google announced at Google I/O 2023 that INP will replace First Input Delay (FID) as the Core Web Vital for responsiveness in March 2024. And since INP is typically worse than FID on the top e-commerce sites, you should start looking into just how responsive your website is now.
We feel that companies and organizations will have more difficulty optimizing INP than the other Web Vitals, LCP and CLS, because you’ll need more than just a technical fix, you’ll need systematic changes. This article is aimed at business and team leaders who want to understand what the performance metric means to your business and what you can do about it.
What is Interaction to Next Paint (INP)
Let’s start with an example of a typical interaction on an e-commerce website: the add-to-cart. When users see an “Add to Cart” button on the page, they assume they can interact with it. And when they click on it, they expect to see something happen (e.g. the cart icon showing an additional item) immediately. If the page takes a while to respond to their input, they get frustrated. Research shows that users start to notice a lag of even 100 milliseconds. The longer the lag, the less “in control” they feel.
A fast INP ensures a seamless and responsive user experience, enhancing engagement and satisfaction. Interaction to Next Paint (INP) is a performance metric that measures the longest time it takes for a website to respond to user interactions such as clicks, taps, or keystrokes. It represents the delay between a user's action and the resulting visual feedback on the screen.
Unlike the metric First Input Delay (FID) which only corresponds to the user’s first interaction on a page, INP is a measure of the longest of all interactions on a page. Measuring all interactions on a page is important because as Google points out:
Chrome usage data shows that 90% of a user's time on a page is spent after it loads.
Keep in mind that INP can only be measured in Chromium browsers as of the time of writing.
Why is INP important to your business
Why care about the responsiveness of user interactions on your website?
Firstly, good responsiveness improves user satisfaction and engagement. When users interact with a website and see immediate feedback, they feel more connected and engaged with the content. This positive experience can lead to increased time spent on the site, higher conversion rates, and improved overall user satisfaction. In contrast, if interactions feel sluggish to the user, they may get frustrated with your website. And that may reflect poorly on your brand.
Secondly, when you improve the responsiveness of your website to user interaction, you make it more accessible to more potential customers: your average user may not be using a fast, high-end device. And they may not have the most solid internet connection.
Thirdly, a fast INP can contribute to better search engine rankings. Search engines like Google consider user experience as a ranking factor. INP is set to replace FID as a Core Web Vital (i.e. as a measure of responsiveness) in 2024. Websites with faster load times and responsive interfaces may get a boost in their search rankings, attracting more organic traffic and visibility.
Why optimizing INP is a challenge
Optimizing web page responsiveness can be a challenging task for large and small organizations alike. One of the main difficulties is that not all code may be in the hands of your developers. Third-party code, such as vendor plugins, widgets and trackers, can increase the amount of work the browser needs to do upon interaction, leading to slower response times. Additionally, when organizations have multiple teams contributing to the same website, it can be challenging to ensure that all code is optimized for performance.
Another factor that can complicate web page responsiveness is failing to consider that users may be on slower devices. While developers may have access to high-end devices and fast internet connections, many users do not. As a result, performance optimization strategies that work well on a local machine or in a controlled testing environment may not be effective for users on slower devices or with limited internet connectivity.
Tag managers, a popular tool used to manage third-party tags and scripts on websites, can also lead to code bloat and slow performance. For example, your marketing department may be able to add tags at will without a developer looking over their shoulders. But when not managed properly (i.e. not regularly auditing the tags you do and don’t need), tag managers can introduce additional JavaScript and CSS files that can vastly increase the amount of work the browser needs to do when the user interacts with your web page, thus impacting INP.
How to improve INP in your organization
E-Commerce decision-makers can play a critical role in improving web page responsiveness in their organizations, even if they don’t touch any code themselves. One key step is to raise awareness of the new Interaction to Next Paint (INP) metric and why it’s important. This can involve educating teams responsible for website development, marketing, content creation and external vendors on the impact of slow loading times on user satisfaction and engagement.
As a business manager, you should make sure INP is tracked and monitored by page type, such as product pages, landing pages, and checkout pages, to identify areas for improvement and prioritize optimization work in the "money path" of the website. Real User Monitoring will give you the most complete picture of performance on your website.
With Speed Kit, you can monitor Interaction to Next Paint and other Web Vitals and performance metrics.
You should also bring your marketing and engineering teams to the table to establish a process for tag manager use. That includes defining a set of criteria that new tags must adhere to, and regular audits of which tags can be consolidated or are no longer needed and can be removed.
Another useful strategy for business managers is to establish ongoing optimization processes instead of having to choose between working on new features and optimizing current ones. This can involve using tools like Google PageSpeed Insights, Lighthouse or WebPageTest to monitor performance metrics, identify bottlenecks, and suggest optimizations. Team leaders can also work with their development teams to implement optimization techniques such identifying and eliminating unnecessary JavaScript, optimizing JavaScript callbacks and improving rendering performance by reducing the amount of rendering work the browser needs to do. Google provides an excellent technical overview of how to optimize Interaction to Next Paint.
Conclusion
Ultimately, improving web page responsiveness is an ongoing process that requires collaboration between business managers, developers, and content creators. By prioritizing performance optimization, raising awareness of the INP metric, and establishing regular monitoring and optimization processes, organizations can deliver a smooth and engaging user experience, enhance user satisfaction and engagement, and contribute to better search engine rankings.
More information
- Interaction to Next Paint (INP) by Jeremy Wagner
- Optimize Interaction to Next Paint (INP) by Jeremy Wagner and Philip Walton
- Fast & !Furious - Debugging INP talk by Brian Louis Ramirez
