How To Fix INP Issues With Real User Data
Fixing issues with the Interaction to Next Paint metric can be tricky, as Google doesn't provide much debug data for it.
In this guide we'll take a look at how you can use real user data to investigate and fix INP issues on your website.
Check an INP issue in Google Search Console
A good starting point for investigating INP issues is looking at Core Web Vitals data in Google Search Console.
This can tell you:
- How many pages on your website have poor INP
- What groups of page URLs have poor INP
If you have problems on your website you'll get a message like this: INP issue: longer than 200ms (mobile). Unfortunately search console offers no debug data about specific interactions elements.
The Search Console data is based on the Chrome User Experience Report, which impacts Google rankings.
Set up real user monitoring
INP measures user interactions – so it's hard to fix INP issues if you don't know what page elements users are interacting with and which of those interactions are slow!
Real user monitoring for Core Web Vitals can help you see where your visitors are experiencing poor UI responsiveness and what you can do to fix it.
To get started you need to install an analytics snippet on your website to record web vitals data and create dashboards for performance investigation.
Review pages with poor Interaction to Next Paint
Once real user data is available you can check what pages have poor INP scores. Start by focussing on high-traffic pages with poor user experience.
Real user monitoring tools often provide a lot of data, and it can be difficult to know where to start.
The INP Optimize flow in DebugBear guides you through the data you've collected step by step. That way you'll know what to focus on and how to find the data you need to reduce interaction delays.
Find INP elements with slow interactions
After picking a page to optimize the next step is reviewing interactions on that page to see what UI elements have poor responsiveness. You can find this data in the DebugBear Elements tab, or through the guided optimize flow.
One way to view this data is by looking at a table with CSS selectors for each element and the associated INP score.
Interpreting the CSS selector breakdown isn't always intuitive, so DebugBear also provides a version showing screenshots of the relevant UI element.
Screenshots are taken after the RUM data has been collected. If an element can't be highlighted that could be because it was removed from the page, or because it only shows up for logged-in users.
Review the INP component breakdown
Once you've found a page element with an Interaction to Next Paint issue, the next step is to understand what CPU processing is causing the delay.
At a high-level, there are three causes of INP issues:
- Input Delay: background tasks on the page prevent the interaction from being handled
- Processing Time: handling the interaction is slow
- Presentation Delay: updating the UI delays the next paint
You might see high input delay when your website first loads, as different parts of the page initialize and third-party code is loading. Website with complex animations or a large number of ads will also have a lot of background work going on.
There are two reasons for high processing time. Either the code that directly responds to the user input is slow, or there are page-wide event handlers that are used for analytics.
Finally, presentation delay can be caused by large DOM size, complex styling, or delays caused by the browser or operating system.
DebugBear tracks each of these metrics independently, so you can see how they changed over time or if specific pages on your website are particular impacted by input delay, for example.
Investigate scripts delaying interactions
Next, take a look at what JavaScript code on your website is most often responsible for an INP issue. This data comes from the Long Animation Frames API, which can be used to debug slow UI updates.
In this example we can see that jQuery most often causes the biggest INP delays. However, analytics code loaded with Google Tag Manager also slows down interactions.
Reviewing the INP script breakdown tells you whether you need to review code you've developed internally, change configuration for a third-party tool, or talk to a vendor about optimizing their code.
Check why scripts are running
So you know what code is running – but why running then and what can you do about it?
When the browser decides to run code that code is being "invoked". The invoker type tells you why the browser decided to run that script. For example, it could be because there was an event handler attached to a button the user clicked on, or a script was scheduled to run previously.
That's a very high-level breakdown. Often you'll see that event listeners are running – but what interactions are these event listeners listening for?
The detailed invoker breakdown answers those questions. You'll often see high-level event listeners that run on the body or document. Those are typically added by analytics tools.
Review specific page visits in detail
Finally, you can check out individual page views and why they had a poor INP score.
- What element did the visitor click on?
- Was code already running at that point, causing input delay?
- How long does each event handler take to run?
This detailed breakdown helps you understand what slowed down the page interactions and allows you to focus your optimizations where you can have the most impact.
See who's impacted by INP issues
Poor INP doesn't just depend on your website. A big factor is also how fast your visitor's devices are. A slow mobile phone will have much higher INP scores than a high-end laptop.
DebugBear let's you break down your INP data by device type, amount of device memory, and number of CPUs on the device.
You can also see how INP scores vary across the world. Even if INP is good for your website overall, you might find that some visitors still have a poor user experience.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data