Unraveling Google’s New Metric – Interaction to Next Paint (INP)

In March 2024, Google is introducing a crucial update to its Core Web Vitals, a set of metrics critical for user experience assessment.

This alteration involves replacing the First Input Delay (FID) with Interaction to Next Paint (INP), propelling marketers into new waters of responsiveness metrics. Let’s delve into INP and comprehend its significance, working, and ways to optimize it. Understanding INP

Interaction to Next Paint (INP) is Google’s novel responsiveness tool designed to gauge your website’s speed in responding to human engagement. INP does not solely measure the completion time of an action; it considers user interaction as a journey and estimates the time lapsed from the initiation of this journey (user input) to the moment the page content updates.

For Google, interactions are not individual events; instead, they are a string of connected actions initiated by the same user gesture. As an example, a touchscreen tap can include various events like pointerup (action when the mouse isn’t active) and pointerdown (click of a mouse button). Google considers the longest duration event as the interaction’s latency.

Presently, Google calculates INP only for these interactions:

• Mouse clicks
• Touchscreen taps
• Keyboard key presses

INP vs. FID: What’s Changing?

Previously, First Input Delay (FID) was the standard responsiveness scorecard for Google. However, it evaluated only the initial user interaction, and its primary consideration was the delay until an event’s initiation, neglecting the time it takes for a user to view results.

In sharp contrast, INP observes the delay of each interaction that a user makes on a page, presenting a more comprehensive picture of a website’s responsiveness. Decoding the Ideal INP Score

Google offers explicit direction on INP’s acceptable numbers:

• INP at or below 200 milliseconds: Excellent website responsiveness.
• INP between 200 and 500 milliseconds: Website responsiveness needs improvement.
• INP above 500 milliseconds: Poorly performing website.

Remember, the 75th percentile of page loads across mobile and desktop devices should be a benchmark for INP.

Transition to INP: Why?

Google’s introduction of INP stems from the fact that according to Chrome’s usage data, after a page loads, users spend most of their time (90%) on the website. Thus, measuring delays until the first event (FID) becomes inadequate. We need to incorporate delays for each interaction that takes place – INP.

Strategies to Optimize INP

Given the significance of Core Web Vitals for user experience and SEO, optimizing INP becomes crucial.

Prioritize Input-ready Javascript:

Modify your Javascript so that it’s primed to respond quickly to events. Aim for as much unblocking Javascript as possible, which refers to deferring or asynchronously loading scripts.

Reduce Browser Workload:

Limit the visual changes and the complexity of the design elements present on your webpage. Overloading your webpage with scripts and design elements can place a higher workload on the browser, slowing down its reaction time.

Optimize Event Listeners:

Event listeners are what respond to user interactions on your webpage, like clicks or keyboard input. If these listeners are slow or sluggish, it will delay the response to the interaction. Use efficient event handling to optimize here.

Simplify Third-Party Scripts:

Third-party scripts can often slow down your response times. Simplify these scripts and ensure they impose minimal load time.

Leverage Browser Caching:

Prioritize caching resources to enhance your site’s load time. This will prevent the browser from reloading the entire page and thus enhance INP.

Reduce Server Response Time:

The quicker your server responds to a browser request, the faster the webpage can load and be ready for user interaction. By minimizing your server response time, you ensure your webpage is prepared to interact as quickly as possible after a user’s action.

Use a Content Delivery Network (CDN):

CDNs can store copies of your site on servers worldwide. This way, your content gets served up to users from the nearest possible location, which speeds up the lag time between user interactions and page responses.

Compress and Optimize Images:

Heavy images can slow down a webpage significantly. By efficiently compressing and optimizing your images, you can augment your website’s load speed, in turn influencing INP.

Final thoughts

Remember that developing an optimized website is a continuous process rather than a one-time setup. Consistent monitoring, testing, and improvement will help ensure you maintain an excellent INP score.

Adapting to Google’s new Interaction to Next Paint (INP) metric implies a renewed focus on user experience that transcends the first interaction. By understanding INP and implementing necessary optimizations, you’re not just making your website more searchable – you’re delivering a comprehensive, responsive, and superior experience to your users.