Understanding Interaction To Next Paint (INP): A New Web Vital for Page Speed Optimization

The SEO field is filled with a variety of acronyms. From SEO to FID to INP, these are some of the more familiar ones in relation to page speed. Currently, there’s a new metric gaining attention: INP, which stands for Interaction to Next Paint. This metric measures how a page responds to specific user interactions and is assessed using data from Google Chrome’s lab and field studies.

What, Exactly, Is Interaction To Next Paint?

Interaction to Next Paint, or INP, is a new Core Web Vitals metric aimed at representing the overall interaction delay of a page throughout the user journey. For instance, clicking the "Add to Cart" button on a product page measures how long it takes for the visual state of the button to update, such as when its color changes after the click. If heavy scripts are running and taking a long time to finish, they might cause the page to freeze temporarily, negatively impacting the INP metric.

How Is INP Different From FID?

The main distinction between INP and First Input Delay (FID) is that FID considers only the first interaction on the page. It measures only the input delay and does not take into account the time the browser needs to respond to the interaction. In contrast, INP evaluates all page interactions and measures the time browsers need to process them. INP accounts for the following interactions:

• Any mouse click on an interactive element.
• Any tap on an interactive element on a device with a touchscreen.
• Keyboard input, whether physical or on-screen.

What Is A Good INP Value?

According to Google, a desirable INP value is around 200 milliseconds or less, with the following thresholds:

Google also states that INP is still experimental and the recommended guidance regarding this metric might change.

How Is INP Measured?

Google measures INP from Chrome browsers through anonymous samples of the single longest interactions when a user visits a page. Each interaction has several phases: presentation time, processing time, and input delay. The total time involved for all three phases is captured in the callback of associated events. If a page registers fewer than 50 total interactions, INP considers the interaction with the worst delay. For over 50 interactions, it ignores the longest interactions per 50 interactions. These measurements are then sent to the Chrome User Experience Report (CrUX) upon user exit from the page, aggregating performance data to provide insights into real-world user experiences.

What Are The Common Causes Of High INPs?

Understanding the causes of high INPs is essential for optimizing website performance. Common causes include:

• Long tasks that block the main thread, delaying user interactions.
• Synchronous event listeners on click events.
• DOM changes causing multiple reflows and repaints, usually when the DOM is too large (over 1,500 HTML elements).

How To Troubleshoot INP Issues?

To troubleshoot INP issues, first explore a guide on measuring CWV metrics and attempt the suggested troubleshooting techniques. If these don’t reveal the interactions causing high INP, the "Performance" report in the Chrome (or better yet, Canary) browser might help:

• Visit the webpage you want to analyze.
• Open DevTools in your Canary browser (typically by pressing F12 or Ctrl+Shift+I).
• Go to the "Performance" tab.
• Disable cache from the "Network" tab.
• Choose a mobile emulator.
• Click "Record," and interact with the page elements as usual.
• Stop the recording once you capture the needed interaction.

Throttle the CPU by 4x using the "slowdown" dropdown to simulate average mobile devices and select a 4G network, as this setting mirrors the experience of 90% of outdoor mobile users. These settings help emulate the state of real user devices, which is crucial since Google relies on field data from real users. High INP issues might not occur on powerful devices, making this approach important for accurate troubleshooting.

A video guide details this entire process. It’s recommended to follow along while reading to enhance understanding.

Long tasks can extend interaction times, with JavaScript files often responsible. Expanding the "Interactions" section reveals a breakdown of long tasks associated with interactions. Clicking script URLs opens JavaScript code lines that cause delays, allowing for optimization.

A sample 321 ms long interaction consists of:

• Input delay: 207 ms.
• Processing duration: 102 ms.
• Presentation delay: 12 ms.

In the main thread timeline, a long red bar indicates the total duration of the long task, with a yellow "Evaluate Script" bar beneath it showing the long task was primarily caused by JavaScript execution. Script evaluation, necessary for JavaScript execution, involves assigning values to variables, defining functions, and registering event listeners. If users interact during this phase, response might be delayed until script evaluation is complete. Total Blocking Time (TBT) measures how long tasks (over 50 ms) block the main thread before the page becomes interactive. While not a CWV metric, TBT often correlates with high INPs. To optimize INP, aim to lower TBT.

Common JavaScripts causing high TBT include analytics scripts like Google Analytics 4, tracking pixels, Google re-captcha, or AdSense ads, which typically have extended script evaluation times.

One strategy to reduce TBT is to delay non-essential script loading until after the page’s initial content is loaded. When delaying scripts, prioritize them based on their effect on user experience, ensuring critical scripts load earlier.

Improving Your INP Is Not A Silver Bullet

Enhancing INP won’t automatically lead to SEO success. It is one aspect of a broader range of quality improvements that can contribute to better overall SEO performance. This includes optimizing content, building high-quality backlinks, improving meta tags and descriptions, using structured data, refining site architecture, addressing crawl errors, and more.