Interaction to Next Paint (INP) is a new Core Web Vitals metric for measuring the responsiveness of your web pages. It replaces First Input Delay (FID) on March 12, 2024, having been previously introduced as an experimental metric in May 2022.
This article is a useful introduction to INP for web developers, UX specialists, and anyone else who measures key aspects of the user experience. Read on to learn how INP works, why it replaced FID, what INP score you should be aiming for, and how to diagnose issues with your INP.
This article is a useful introduction to INP for web developers, UX specialists, and anyone else who measures key aspects of the user experience. Read on to learn how INP works, why it replaced FID, what INP score you should be aiming for, and how to diagnose issues with your INP.
What is Interaction to Next Paint?
INP is a new metric introduced by Google as part of their Core Web Vitals initiative. It assesses responsiveness using data from the Event Timing API, looking at how long it takes for a web page to respond to clicks, taps, and keyboard interactions. A lower INP indicates that your web page is responding faster to the majority of user interactions.
How is INP Different from FID?
First Input Delay (FID) was the previous Core Web Vitals metric for measuring responsiveness. The shift from FID to INP will provide a more accurate idea of real-world user experiences. Here’s why:
- INP considers all interactions that a user has with a page, whereas First Input Delay (FID) only accounts for their first interaction
- INP will measure the time it takes for interactive scripts to load after the initial page load, which FID didn’t do
- INP is more able to consider different web applications with complex interactions
- INP considers a broader range of interactions including clicks, touchscreen taps, and pressing keys on physical and onscreen keyboards—whereas FID only took clicks into account
What Changes Will I See?
As of March 12, 2024, you won’t see First Input Delay in Google Search Console anymore. Tools and guides will also be updated to focus on INP, although historically important documentation about FID will remain in place. Tools such as PageSpeed Insights and CrUX are giving developers a six-month deprecation period so they have a chance to update their code.
How Does Interaction to Next Paint Work?
Interaction to Next Paint is calculated by looking at the length of time between a user interaction and the moment they’re presented with visual feedback. This delay is called latency.
User interactions recognized by INP include clicks, taps, and keyboard strokes. INP doesn’t take into account hovering or scrolling—although scrolling with keys can trigger other events that it does measure. An interaction can be driven by JavaScript, CSS, built-in browser controls, or any combination of these.
Visual feedback is important because it shows the user that their interaction was successful. Without it, they may think the page isn't responding to their actions. Examples of visual feedback include:
- Seeing an item appear in your cart after you click “add to cart”
- A navigation menu opening when you tap on it
- Your username appearing in a login form field as you type it out
Pages can have multiple interactions, so the INP you see reported will generally be the slowest in the 75th percentile of page loads that are recorded. Also, in the unlikely event that there are more than 50 interactions on a page, the worst delay will be ignored. This helps you see a more representative metric by removing outliers.
What’s a Good INP Score?
Here’s how to interpret your INP score according to Google:
- Less than 200 milliseconds = a good INP
- Between 200 and 500 milliseconds = needs improvement
- Greater than 500 milliseconds = a poor INP
Why is INP Important?
People have increasingly high expectations for website performance. According to Google, an increase in page load time from 1 to 3 seconds can cause the likelihood of bounce to rise by 32%. But delayed page load isn’t the only performance issue that can frustrate users and cause them to leave your site.
INP provides valuable insight into a user’s interactions throughout the duration of their time on a page. Paying attention to INP allows you to identify performance issues and uncover opportunities to enhance the user experience and drive your business goals.
How Do I Measure My Site’s Performance With INP?
If your website is eligible for the Chrome User Experience Report (CrUX), you can get INP field data and other Core Web Vitals via CrUX in PageSpeed Insights. It’s also possible to spot-check individual pages by manually entering the page URL into Page Speed Insights.
What Causes a Low INP?
Poor INP scores happen when slow CPU processing prevents updated content from being shown. There are three main factors that contribute to your INP:
- Input delay – the time from a user’s click, tap, or keystroke until event handlers start running. Things like long tasks on the main thread can cause longer delays.
- Processing time – the time it takes to run your code in response to a user interaction.
- Presentation delay – the time it takes for browsers to work out where and how to display new content, including things like colours and positioning.
Things like inefficient code, complex designs, and large media will have a negative impact on these factors. You may see a worse Interaction to Next Paint as a result.
It's also possible for a page to return no INP value. This can happen if the page loaded but the user either didn’t interact with it or only used interactions that INP doesn’t recognize (e.g. scrolling or hovering with their mouse.) It can also happen if the page is being accessed by a bot such as a search crawler.
How Can I Find & Fix Issues with Interaction to Next Paint?
In order to improve your INP score it’s important to diagnose the specific problems instead of relying on guesswork. CrUX offers a high-level view of INP, but you’ll probably need more detail to find and fix responsiveness issues.
For relatively simple user flows, you can use a free tool like DebugBear’s INP Debugger. Simply enter your website URL and it’ll look for buttons, input fields, and other page elements that may have interaction delays.
For greater insights and complex flows, it’s worth getting field data from a Real User Monitoring (RUM) solution. RUM provides valuable information about interactions such as their type and whether they occurred during or after page load. This allows you to attribute INP to individual interactions quickly and accurately. You can then manually test any problematic interactions to diagnose and fix the issue.
Don’t have access to field data? The Chrome team has some suggestions for manually diagnosing slow interactions in the lab.
Need some inspiration? Check out success stories from the Economic Times and RedBus. They improved their INP scores by doing things like:
- Ensuring their code was streamlined and efficient
- Prioritizing what parts of their website loaded first
- Optimizing browser caching to speed up load times
How Can I Improve My Website’s Performance Overall?
INP is just one of many metrics to look at when reviewing your site’s speed, reliability, and stability; it’s wise to consider various other factors. We recommend running regular load, stress, spike/peak, and endurance testing. If your site hasn’t been tested in a long time or has significant issues, a full website performance audit can be a great place to start.
Evolving Web can also help you improve performance with efficient code and best practices through our training, web development services, and website maintenance services.