Author: Yossi Fest
In March 2024, Google officially replaced First Input Delay (FID) with Interaction to Next Paint (INP) as one of the three Core Web Vitals (CWV) metrics. This change wasn’t just a tweak—it was a fundamental shift in how Google evaluates user experience.
The question you’re probably asking is why did Google make this change?
Comprehensive evaluation: A web page might respond quickly to the first click, but then lag on subsequent interactions. INP considers all interactions, providing a more accurate representation of the user experience.
Challenges and opportunities: Whilst INP is harder to optimize for than FID, it offers an opportunity (or for SEOs, a challenge) to significantly improve the overall responsiveness of your site. Sites that pass INP evaluations are likely to offer a superior user experience, which can lead to better engagement and general SEO performance.
However, because of its complex nature, coupled with Google not explicitly providing information on the specific problematic interactions (unlike LCP and CLS, the other two CWV metrics), you as an SEO professional or site owner are left to do the work of identifying the INP issues, analyzing performance traces, and addressing the issues accordingly.
In this guide, I’ll cover the nitty gritty of what goes into a web interaction, how to spot INP issues, and strategies to decrease your INP timings, ensuring you’re fully equipped to tackle this element of user experience and SEO.
Table of contents:
What is INP?
Interaction to Next Paint is the metric that Google uses to measure a web page’s responsiveness to user interactions.
Google defines ‘interactions’ as:
Clicking
Mousedown
Tapping (on devices with touchscreens)
Key strokes
INP does not include scrolling, as this is not an interaction with the page itself.
INP is measured in milliseconds, and Google categorizes performance as follows:
Good — INP is equal to (or less than) 200ms
Needs Improvement — INP greater than 200ms and less than (or equal to) 500ms
Poor — INP greater than 500ms
Understanding interactions: The foundation of INP
To optimize INP effectively, it’s essential to first understand what an interaction is and what factors influence its timing.
An interaction is comprised of the following three components:
Input delay — This is the initial delay between a user’s interaction and the browser registering the interaction (and subsequently being able to respond to it). While several factors can affect input delay, it’s usually JavaScript (JS) running in the background and the browser not being ready to attend to the interaction that adds unnecessary delay.
Processing duration — After the input is recognized, the browser must process the action. This could involve complex calculations, DOM manipulation, or data fetching.
Presentation delay — This is the time it takes for the browser to update the display after processing the interaction. Processing delay is usually influenced by rendering performance and how efficiently the browser can paint new frames.
As you proceed with your optimizations, remember that it’s not just about knowing what INP is, but rather about understanding how each interaction on your website impacts performance. Equipped with this knowledge, you can approach performance optimization more strategically, identifying where the delays are, and what’s causing them.
How to view your website’s interactions
Now that I’ve caught you up on interactions and INP, it’s time to view and analyze your website’s interactions in detail.
While there are several tools and techniques available to help you do this, I’m going to focus on using Chrome Dev Tools because you can get all the data you need from it, and it doesn’t require third-party tools or a setup process:
Right click on the desired web page and click Inspect. This opens Chrome DevTools. Navigate to the “Performance” tab and hit the record button icon either in the top left, or click the “record” button on the right side panel, or “record and reload” to have the page loaded fresh.
Interact with the page like your users would. Click on buttons and enter text into fields. Click on the record button again to stop the recording. The trace will then automatically load into the tab.
Look for the row named “Interactions.” In this row, you will see the interactions you performed on the page as well as detailed information about everything that went into the interaction.
You’l also notice the row called “Main” (underneath the “Interactions” row). This is the main thread of the browser where you can see all processing activity.
Essentially, performance traces are detailed logs of everything that happens during the loading and interaction phases of a web page. By analyzing these traces, you can identify which interactions cause the highest INP scores and why.
3 steps to identify problematic interactions
Finding the exact interactions that contribute to your page’s poor INP score can be time consuming, but with the right approach and tools, you can effectively isolate and address the issues.
Following the three steps below to find problematic INPs on your pages:
Start with the Core Web Vitals report in Google Search Console
Crawl your site with Screaming Frog and the PageSpeed Insights API
Identify poor interactions using the Performance tab in Chrome Dev Tools
01. Start with the Core Web Vitals report in Google Search Console
The Core Web Vitals report in Google Search Console (GSC) is a great place to begin because it provides insights into which pages on your site are experiencing INP issues, and whether these problems are more prevalent on desktop or mobile.
I use the INP section of the Core Web Vitals report for:
URL group analysis — Drill down into the URL groups that Google identifies as problematic. This can help you focus your optimization efforts on the pages that need it the most.
Trend analysis — Use the daily bar graph (showing the number of URLs; as shown in the example above) to see how your INP issues are trending over the last three months. Is the INP issue on the rise? Is it decreasing? Have there been any site updates that correlate to changes in trends?
02. Crawl your site with Screaming Frog & the PageSpeed Insights API
Instead of manually entering all your URLs into PageSpeed Insights to see each page’s INP score, crawl your site with Screaming Frog using the PageSpeed Insights API. When used in tandem, these tools allow you to pull INP data along with other Core Web Vitals. This gives you a comprehensive view of how your entire site is performing.
Enable the PageSpeed Insights API, then select only the following CrUX Metrics:
CrUX Interaction to Next Paint (ms)
CrUX Interaction to Next Paint Category
Next, run a crawl of your site. You will then end up with a list of pages, their respective INP scores, and the CWV performance category that they fall into (as shown below).
Once you have your list, prioritize the URLs to fix by the traffic they receive and/or importance (by other business metrics you can define, like revenue, for example). By crawling your site with Screaming Frog, you can also identify patterns and common issues that might affect your INP scores, which can be particularly useful for large sites with many pages and page types.
03. Identify poor interactions in the Performance Tab in Chrome Dev Tools
Once you have prioritized the URLs you want to improve, you need to identify the problematic interactions on those pages. Up until October 2024, you’d have needed to use the Web Vitals Chrome extension, which provides real-time feedback on your site’s Core Web Vitals, including INP. However, the latest version of Chrome now includes detailed LCP, CLS, and INP data directly inside the Performance tab.
Here’s how to use it effectively:
Accessing the Performance tab — Open an incognito window in Chrome, then open Chrome Dev Tools by right-clicking and choosing “Inspect.” Then navigate to the Performance tab.
Simulating network conditions — To match the conditions of poor internet connections that some of your users may access your site with, especially on mobile devices, I recommend throttling down CPU processing power to 20X. This can be done at the top of the Performance tab under “CPU” settings, or under the recording settings in the right pane of the tab. This also greatly helps with viewing the interaction in DevTools. Once you’ve throttled down, refresh the page.
Perform interactions — Click around your site as a typical user would. Focus on the elements that you know users interact with the most, and work your way through all buttons, links, text input fields, etc. You’l notice that after each interaction, the interaction type, interaction target, and latency is logged in real-time.
Identify problematic elements — Hover over the interaction target to highlight it on the page, or click on it to see it in the Elements tab. You’l notice that the INP time in the INP tile is the longest interaction from your interactions—exactly how Google calculates your page’s INP time.
6 methods to optimize your INP
After you’ve identified the problematic interactions, it’s time to move onto the optimization phase, which can be the most difficult.
Here are six methods I recommend for optimizing your interaction timings:
Audit your third-party scripts
Conduct a visual change audit
Audit your first-party scripts
Prioritize HTML hyperlinks over JS buttons
Optimize debounce time
Yield to the main thread
01. Audit your third-party scripts
Third-party scripts are external pieces of code that your web page executes (typically for functionalities like analytics, social integrations, and/or tracking). While these scripts are super useful, they can also increase loading and page interactivity times. The more JS scripts your page needs to load, the longer your interactions will take until they finish fully loading. In addition, many third party scripts (e.g., TikTok, Facebook, Google Analytics) may fire when they don’t need to.
Start by identifying redundant scripts. Obtain a list of all third-party scripts on your site and determine if any of these scripts are redundant or unnecessary. You can obtain this list directly from the Network tab in Chrome DevTools, in a Lighthouse audit under the “Reduce the impact of third-party code” section of the Diagnostics section, or from most good web performance tools that provide content and script breakdowns.
Defer non-critical scripts. For scripts that are essential but not critical for initial page load, use the async or defer attributes so that they only load after the main content loads. This ensures that your non-critical scripts don’t block critical main thread time during early interactions.
Identify any scripts (or tags in Google Tag Manager) that fire on each click (or multiple times on a page when they don’t need to). Tags should only fire where they’re essential or when a user performs a specific action.
Many websites manage their scripts through Google Tag Manager. This can make managing scripts much easier as there are native options to select exactly how you want your scripts to fire and what triggers them to do so.
02. Conduct a visual change audit
Visual changes (like animations and effects that occur after a user interaction) can significantly impact INP. Animations and effects, such as blurring, sliding, fading, etc. often trigger extra rendering steps. Consider minimizing visual changes after an interaction that does not enhance your users’ experience to help improve INP timings. For example, let’s say a user clicks on the main menu on a page, and that makes the page fade slightly (or puts a blur effect on the rest of the page). This action requires additional rendering processing, which may be taking up valuable space on the main thread.
By reducing (or simplifying) these visual changes, you can help reduce INP timings and promote a more responsive user experience, as the browser can focus more efficiently on processing the core interaction (rather than handling visual changes that may be unnecessary), and spend less time on:
Repainting
Layout recalculation
Copositing layers
03. Audit your first-party scripts
Unlike third-party scripts (where your business has no control over the contents of the scripts), first-party scripts are JS files that you own. You can perform the following actions to optimize script content and delivery:
Bundling and minifying — Ensure that your JS files are bundled and minified. Bundling reduces the number of HTTP requests needed to fetch scripts, and minifying removes unnecessary characters (and spacing), reducing file size. Both of these practices can improve load times and responsiveness to interactions, directly impacting INP.
Lazy loading first-party scripts — Just like the more common practice of lazy loading images, lazy loading JS files ensures that scripts only load as the user gets to them (i.e., scrolls down to an area that contains elements that require the JS). As an example, chat widgets and social media plugins usually aren’t required until the user has been on the page for a while first. This practice ensures that, once again, the main thread can remain free to handle interactions that may come its way.
04. Prioritize HTML hyperlinks over JS buttons
JavaScript buttons can introduce significant delays in processing time because they require the browser to execute scripts to handle interactions. Compare this to regular HTML <a> tag links that are natively processed by the browser and are generally much faster.
Audit all internal links (including hidden links behind tabs, menu links, etc.) to see if they are coded as HTML hyperlinks with the standard <a> tag, or whether they are implemented as JS buttons. If you find JS buttons, you should convert these to HTML hyperlinks where possible. This is especially important for navigation menus and prominent internal links where speed is crucial.
05. Optimize debounce time
Debouncing is a technique used to limit the rate at which a function executes, which is particularly useful with search bars or any other text input fields where results may auto-populate. Without proper debouncing, each keystroke could trigger a server request, which in turn may overwhelm the main thread and increase input delay and processing times.
Search bars usually have a debounce time of 300–400ms. I recommend increasing this to 1000ms in order to decrease the amount of server requests. The higher the debounce time, the fewer server requests there may be.
It’s important to consider that users may experience a small amount of sluggishness due to slower responsiveness. It’s an important balancing act here—if you feel that the detriment caused by slowing down your auto-populated results may impact UX, then test out a lower debounce time.
06. Yield to the main thread
Yielding to the main thread is a performance optimization that can help reduce the main thread’s blocking time during JS execution. It involves breaking down long JS tasks into smaller, more manageable ones, allowing the browser to ‘yield’ control back to the main thread to handle interactions from the user.
Here are two ways to employ this tactic:
Use ‘requestidlecallback’ to allow non-urgent execution to happen during idle periods (as the name suggests), so that critical tasks can be handled in the main thread first.
Apply ‘settimeout’ for JS that cannot afford to wait for an idle main thread. This is used as a mechanism to manually split long-running JavaScript tasks into smaller chunks. The basic idea is to break a large task into smaller pieces and use setTimeout with a short delay (usually 0 milliseconds) to schedule the execution of the next piece of work after the current task completes. This allows the browser to handle other tasks (like user interactions or rendering updates) between the chunks, which helps keep the UI responsive.
How to measure the success of your INP optimizations
Now that you’ve hopefully implemented some of the techniques above, it’s crucial to perform an impact analysis to evaluate what worked, what didn’t, and to see if your INP times are moving in the right direction.
Just like how we used various tools and techniques to assess what pages needed INP optimization, you need to do the same post-optimization.
To measure the success of your INP optimizations:
Immediately compare pre- and post-optimization performance
Monitor INP trends over time
Collect and review real user monitoring (RUM) data
Immediately compare pre- and post-optimization performance
Similar to how you identified poor interactions on a page, you can once again use the trusty Web Vitals extension to obtain interaction timings.
Use the extension’s simulated throttle environment and compare timings from before and after optimizations.
Monitor INP trends over time
Use GSC’s Core Web Vitals report to monitor how your INP metric changes over time. Since this report is based on CrUX data, it provides a reliable measure of real-world user experience.
It’s critical to remember that Google’s CWV scores are based on CrUX data collected and aggregated over the previous 28-day period, meaning that you cannot check your page’s ‘new’ INP immediately after optimization.
Collect and review real user monitoring (RUM) data
Real user monitoring (RUM) provides insights based on actual user interactions with your site, giving you an accurate, on-demand (as opposed to waiting the 28 days) overview of performance compared to lab tools.
RUM involves collecting performance data directly from users as they interact with your site. The data collected provides timings for a wide range of metrics, such as TBT and, of course, all CWV metrics. Many solutions also provide detailed insight into how your site performs across different geos, devices, and browsers. Consider using Google’s free CrUX Vis tool, based on the Chrome User Experience Report dataset.
Other common solution providers include Rumvision and Debugbear.
Interaction to Next Paint: Maximize your responsiveness for better user engagement and search performance
Whilst INP may not be the easiest to optimize for, it’s also an opportunity to perform a more holistic user experience audit. After all, INP is just a CWV metric that Google uses to assess general page experience—which is key for your users.
Not only will you optimize for the Page Experience algorithm, you are also working toward ensuring that your site visitors have a smooth, responsive interaction that keeps them engaged and satisfied, maximizing the chances of driving meaningful business results.
Remember that optimizing for INP is an ongoing, iterative process that requires continuous (or at least periodic) monitoring. By staying vigilant and keeping an eye on your CWV reports in Search Console, you can rest assured that you remain competitive in an increasingly user-centric web landscape. Keep testing, keep optimizing, and you’ll see the results of increased user engagement and search performance.
Yossi Fest is a technical SEO specialist at Wix, where he's passionate about championing technical optimizations for better search visibility. Before joining Wix, he worked as an SEO lead at digital marketing agencies, driving organic growth for enterprise clients. Linkedin