Karolina Szczur
March 9, 2023
Illustrated by
Interaction to Next Paint (INP) is a performance metric that assesses how well your page handles visitor interactions. Every time a visitor clicks a button or taps the screen, your page should be ready to respond quickly for the best possible page experience. INP tracks how long it takes for your page to respond to any of these visitor inputs, so you’ll know if your pagesh feel snappy and quick or slow and unresponsive.
If you’ve not already heard of Interaction to Next Paint (INP), expect to hear more about it over the next year or so. INP will be the successor to First Input Delay (FID), one of Google’s Core Web Vitals. This means boosts to your INP will improve your UX and be a factor that Google considers when ranking your content on its search engine.
To get an edge over your competition, you should start optimising for Interaction to Next Paint now. Doing so will give your visitors the best experience possible and reap the SEO benefits of Google’s future algorithm change.
Interaction to Next Paint is a metric that shows your page’s responsiveness. It does this by tracking the time between someone interacting with a page (such as: clicking with a mouse, tapping on a device with a touchscreen or pressing a key on a physical or virtual keyboard) and when the next paint is not blocked. In that sense, INP sets out to measure the ability to paint versus the entire duration of the painting action.
Once a person leaves your page, that session will be given an INP measurement. Typically, that measurement will be the slowest response time recorded in that session.
For example, if a visitor enters your page and performs three interactions, they could look something like this:
The INP measurement for this particular session would be 350 ms to match the slowest response time.
Pages with more than 50 interactions will be scored slightly differently. Instead of taking the absolute worst response time, the INP will instead be based on one of the worst response times. Typically, the measurement in these cases is based on a 98th percentile response time, so if you have one slow next paint, it won’t skew the metric.
First Input Delay (FID) only measures the first interaction on a page, while INP measures all interactions throughout a session. Since the INP score is based on more interactions, it’ll be more representative of a visitor’s actual experience with your website.
For this reason, you should make the change now, even if INP hasn’t officially replaced FID yet. If you’re solely optimising for FID, you may not see major performance issues after the initial interaction. With INP, you’ll be sure that all your pages provide snappy experiences for your visitors.
To get a quick idea of your INP, use our free Core Web Vitals Checker.
Calibre’s Core Web Vitals Checker uses data from Google’s Chrome User Experience Report (CrUX) to find your INP measurements. This data set is based on real people interacting with your site on the Chrome browser. Although it’s not ideal to be pulling solely from Chrome sessions, this is currently the best data set available for INP.
Enter the URL of the page or domain you want to test, click enter, and then scroll down to the correct metric.
Based on Google’s guidelines, a good INP score is less than 200 ms. Okay ones are between 200 and 500 ms. Anything exceeding 500 ms should be addressed as a significant web performance problem.
One caveat to be aware of is that your visitors’ devices and internet connections impact INP. If your product or website caters to people with slower devices or connections, your INP score will be negatively influenced.
In these cases, you still want your INP to be as quick as possible, but scores lower than 200 ms may be hard to achieve.
To get the best INP on your site, you’ll need to optimise your pages to deliver the quickest possible responses to user interactions.
A browser’s main thread is where all the work to run a webpage happens. The main thread is responsible for downloading resources, painting pages, and handling user inputs. If your main thread is busy doing large tasks, it can’t do anything else—including reacting to inputs from your visitors. This will negatively affect your INP measurement as the browser will need to wait for whatever task it’s working on to complete before it handles the visitor input.
To improve main thread availability on your page, you should:
One of the biggest drags on INP is that there’s too much to load for your browser. The more your main thread has to do, the harder it is to keep interaction times quick. Boost your INP by removing or optimising your JavaScript and third-party scripts.
To find places to reduce, you should:
Since INP is based on the worst response times, it makes sense to target specific long interactions and improve them. This process will need to happen on a page-by-page basis, as each page will have a unique INP measurement.
Here’s how to get started:
Interaction to Next Paint is a great place to start when it comes to improving web performance, as it helps ensure snappy interactions with your site. However, INP is just one of several essential metrics worth tracking and optimising.
If you’re new to web performance, it can be challenging to know exactly where to get started when it comes to performance metrics. To make it easier, we’ve created a list of all the performance metrics worth tracking. By following this list, you’ll have all the data you need to understand your site’s performance and where you could make improvements. This way, you can work towards giving your visitors the best possible experience when they access your site.
Join thousands of subscribers keeping up-to-date with web performance news and advice.
Addy Osmani
Engineering Manager at Google Chrome