Use code PERFMATTERS for an extra 10% off!
  1. Home
  2. Docs
  3. Tips
  4. How to optimize Interaction to Next Paint (INP) in WordPress

How to optimize Interaction to Next Paint (INP) in WordPress

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?

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, reporting the longest duration. 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. 

According to Barry Pollard, a Web Performance Developer Advocate at Google Chrome, INP is not (necessarily) measured up until the next full page load displays content, but only up until the main thread is no longer being blocked.

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%.

Interaction to Next Paint
Interaction to Next Paint

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. 

  1. 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.
  2. 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 Origin data
INP Origin data

INP data won’t show in the lab section of PageSpeed Insights due to the nature of how it is measured. It requires data from multiple user interactions on the page to determine the longest INP duration.

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.

INP Debugger tool from DebugBear
INP Debugger tool from DebugBear

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.

INP results
INP results

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.

You can also use Google’s CrUX Dashboard to get a great overview of your INP data over a period of time. This is assuming your site has CrUX data available.

CrUX INP data over time
CrUX INP data over time

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.”

Chrome Lighthouse
Chrome Lighthouse

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.

Minimizes work during key interaction
Minimizes work during key interaction

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.

Real user monitoring (RUM) tools

RUM tools are by far the best way to track down INP. Basically, you install the tool (script) on your site and let it continuously monitor all the interactions over a period of time. This essentially will more closely mimic the real-user data you’re seeing in PageSpeed Insights because it’s tracking everything, not just a looking at single interaction that may or may not be the issue.

Many of these utilize the Long Animation Frames (LoAF) API which can help identity exactly which scripts are contributing to rendering delays. And because they have so much data gathered from your site, they will also usually let you drill down into the specific elements and actions.

Here are a few RUM tools that can help monitor INP and then debug it:

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.

Measuring INP with Chrome Web Vitals extension
Measuring INP with Chrome Web Vitals extension

If you really want to dive into the nitty-gritty of INP measurement, you can also use the Performance Profiler in Chrome DevTools. To see how to do this, we highly recommend watching these presentions:

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:

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.”

Disable Click Delay
Disable Click Delay

Step 3

Scroll down and click “Save Changes.”

And of course, using the Script Manager to ensure scripts only load when they are needed is also important.

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 Google Adsense, 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.

Additional resources and case studies

Was this article helpful?

Related Articles