Preparing for the New Interaction to Next Paint (INP) Metric

.
October 25, 2023

Google is set to bring a significant update to its Core Web Vitals, a set of metrics introduced in 2021 to enhance user experience. The spotlight is on Google's decision to replace the First Input Delay (FID) with the Interaction to Next Paint (INP) in March 2024. Let's dive into what INP is, its distinction from FID, and methods to enhance it.

Understanding Interaction to Next Paint (INP)

You might be wondering what INP signifies. It's a metric introduced by Google to gauge the speed at which a webpage reacts to user commands. Specifically, INP calculates the time gap from when a user takes action (like pressing a button) to when the content on the page updates.

Here's a more technical definition:

“INP evaluates responsiveness based on the Event Timing API. A slow page response post interaction implies a poor user experience. INP monitors the latency of all user interactions with the page and provides an aggregated value. A lower INP suggests swift and consistent responses to user activities."

For clarity, consider this: while some interactions might require a longer loading time, INP doesn't evaluate the full interaction's response time. Instead, it assesses the time until a visual cue appears, indicating an ongoing process.

This metric is vital for all websites but is even more crucial for platforms with high user interaction, like social media and online shopping sites. A low INP can deter users, resulting in a drop in website engagement and potential revenue loss.

Decoding Interactions

Interactions aren’t single events. For instance, a simple touch on a touchscreen can encompass multiple events. Google considers the longest-duration event as the latency for the interaction.

For INP evaluation, Google focuses on:

  • Mouse clicks
  • Touchscreen taps
  • Keyboard key presses

Three primary factors influence the INP score: input delay, processing duration, and presentation lag.

Distinguishing FID and INP

The primary difference between FID and INP is their area of measurement. While FID only gauges the initial interaction delay, INP evaluates the latency for all interactions during a user's visit.

Achieving a Stellar INP Score

Google suggests using the 75th percentile of page load times across devices as a benchmark. As per delay times:

  • Up to 200 milliseconds signifies excellent responsiveness.
  • Between 200-500 milliseconds indicates room for improvement.
  • Anything over 500 milliseconds is below par.

Why the Shift to INP?

INP will soon be a part of Google’s Core Web Vitals, alongside metrics like Largest Contentful Paint and Cumulative Layout Shift. Google’s transition to INP stems from its understanding that users spend most of their time on a page post-loading. Therefore, measuring delays beyond the initial event is crucial.

Enhancing INP Performance

For a seamless user experience and to ace the SEO game, focus on improving your site's INP. Here's a stepwise approach:

  1. Assess INP: Start with measuring your site's INP using tools like the Chrome UX Report or PageSpeed Insights.
  2. Refine Interactions: Break down interactions into input delay, processing time, and presentation delay, then optimise each:
  3. Input Delay: Minimise JavaScript files, use CDNs, and avoid interaction overlaps.
  4. Processing Time: Simplify event callbacks and prioritize essential processes.
  5. Presentation Delay: Minimise DOM size and incorporate immediate feedback cues, like validation messages or loading bars.

INP Quick Queries

  • How to Boost INP? Concentrate on minimising input delay, processing time, and presentation delay.
  • Where Can You Find INP Metrics? Google’s PageSpeed Insights tool provides relevant INP data.
  • What’s a commendable INP score? Ideally, aim for 200 milliseconds or less.

Wrapping Up

With the upcoming change in 2024, INP will be pivotal in assessing a site’s responsiveness. Considering its importance in Google's ranking system, enhancing your INP should be a priority. Make sure to stay updated with Core Web Vitals and strategies to elevate your website’s speed and user experience.