Interaction to Next Paint (INP) is a Core Web Vitals metric introduced on March 12, 2024. In this article, we’ll discuss what INP is, how to identify and measure it, and how to optimize it. INP is definitely one of the trickier and more frustrating metrics to fix, as one of the most significant factors can simply be the code quality underneath your site. This is where moving to lightweight plugins and themes can really come into play. However, third-party scripts can also play a part.
- What is Interaction to Next Paint?
- How to measure Interaction to Next Paint
- How to optimize Interaction to Next Paint
- Additional resources
What is Interaction to Next Paint?
Google continuously collects data on how your website behaves. This real-user data is what you see at the top of speed tests in PageSpeed Insights. Interaction to Next Paint (INP) is a Core Web Vitals metric that Google uses to measure how quickly your website reacts to user interactions. It replaces the First Input Delay (FID) metric.
A common example we like to use to understand INP is the mobile menu on your WordPress site. Google measures how much time it takes from keypress to fully opening (or how long the visual update takes) the menu. This can be any type of element, even just a link, but typically the slowest offenders will be interactive elements that consume more time, such as a search box, accordion, popup, slider, etc.
Google is looking at mouse clicks, taps on a screen, and key presses. Interactions not measured are scrolling and hovering.
To meet the threshold for Google and provide a good user experience, the INP should be 200 ms or less. If you’re under that, you’ll be “good” and in the green. Google will flag anything between 200 ms and 500 ms as “needs improvement” and over 500 ms as “poor.” Google reports the 75th percentile of user experiences. Or rather, the INP that is reported is the slowest 25%.
How to measure Interaction to Next Paint
INP can be measured with several different tools, including those from Google and third parties. In fact, some of the third-party ones can be more helpful.
PageSpeed Insights
The first tool you can use is Google PageSpeed Insights. However, there are some important things to remember when interpreting the results.
- The data at the top of the tests shows real-user data. This is computed from the Core Web Vitals metrics over a 28-day collection period. This is not live data.
- There is a tab at the top right which contains different data for the following:
- This URL: The URL you’re currently testing.
- Origin: An average across the entire site when there isn’t enough data for the URL. On sites with lower traffic, it will often default to Origin.
INP Debugger
The next tool we’re big fans of is DebugBear’s free INP Debugger. This can be an easy way to test INP on your website and quickly identify the UI elements that are causing the slowest user interactions.
In this example, on our own website, they detected our cookie prompt and mobile menu as some of the slowest UI interactions. This makes perfect sense, as these are really the only moving elements we have. They also measured interactions on some of our links, but these were much quicker, between 10-20 ms.
Google Search Console
Google Search Console is a tool you should have hooked up for every WordPress site you run. It’s a great way to get notifications on URLs that need improvement, such as those perhaps needing some work when it comes to INP.
Lighthouse
You can run local INP measurements with Lighthouse in Chrome DevTools. Click on the “Lighthouse” tab. Select “Timespan” and then click on “Start timespan.”
Click around your site, interact with dynamic elements, visit multiple pages, etc. Once the report is generated, scroll down to the “Minimizes work during key interaction” section. This will include different scripts, elements, etc., that were impacting INP.
However, remember, it’s only measuring what you interacted with. However, it can be another way to spot what might be increasing your INP time.
Additional tools
There are a few Chrome extensions you can use to measure INP. However, we will admit that these aren’t always the most accurate. However, as with most Core Web Vitals metrics, the more data you can compare and analyze, the better.
If you really want to dive into the nitty-gritty of INP measurement, you can also use the Performance Profiler in Chrome DevTools. We recommend watching this presentation on INP and using DevTools from Annie Sullivan, a Software Engineer at Google.
How to optimize Interaction to Next Paint
When it comes to optimizing INP, almost everything depends on how much JavaScript and CPU time is involved with your user interactions on elements. The slowest ones will hurt you the most. CSS can also be responsible, but in our experience, it’s almost always JavaScript. And that means the quality of the code you’re running matters. We can’t stress enough how important it is to use lightweight themes and plugins that were built with performance in mind from the ground up.
For building and designing your site, we recommend the following combinations:
- GeneratePress and GenerateBlocks
- Kadence and Kadence Blocks
- Bricks
- Shoptimizer (if you’re running WooCommerce)
Perfmatters
When it comes to Perfmatters specifically, if you’re using our Delay All Scripts feature, we recommend using our advanced Disable Click Delay option.
When you delay JavaScript, the click delay might be longer than desired if you have a large and complex site with a lot of JavaScript. Take your mobile menu, for example. Based on how your theme or page builder is coded, it might have to wait for all of the JavaScript to load before it opens. Therefore, disabling the click delay can help speed things up and prevent it from having a negative impact on INP.
For the Disable Click Delay feature to work properly, it requires that you have all the proper JavaScript exclusions in place. Make sure to take advantage of our quick exclusions. We’re always adding new ones to help streamline this process. But if you run into any issues, we’re happy to help.
Here are the steps to disable the click delay.
Step 1
Toggle on “Show Advanced Options” in Perfmatters.
Step 2
In the JavaScript section of Perfmatters, scroll down and toggle on “Disable Click Delay.”
Step 3
Scroll down and click “Save Changes.”
Other optimization tips
Here are a few additional tips on things that might impact INP:
- Having more dynamic elements can easily hurt you. Always avoid things like animations, sliders, popups, whenever they aren’t absolutely necessary.
- It’s important to reduce the size of the DOM when you can.
- We’ve seen a big correlation with high total blocking time (TBT) resulting in higher INP values. So sometimes it can help to track down the biggest contributors to TBT. Many sites that are running ad networks like Raptive (AdThrive), BlogHer, Mediavine, etc., typically have higher TBT. We recommend reaching out to them to see what they are doing to best optimize for INP.
- Try to minimize the time consumed by the main thread.
- If you’re running a lot of third-party scripts, one way to reduce the main thread is to utilize a tool from Cloudflare like Zaraz to offload the JavaScript entirely to the edge.
- We recommend turning off Cloudflare Rocket Loader.
INP is frankly one of the hardest metrics for an optimization plugin to help with since it can’t fix the underlying code that still has to run at some point (specifically tied to that user interaction). However, we’ll keep updating this doc with tips and suggestions as INP evolves.