Interaction to Next Paint (INP) – What’s it All About?

Painting Rederndered Webpage After Interaction - Inertaction to Next Paint
published: March 1, 2024
author: Chris McKane

Google has been talking about this change since early 2022, experimenting and testing; the wait is over. Interaction to Next Paint (INP) officially replaces FID on March 12, 2024, in Google’s Core Web Vitals.

What are Core Web Vitals?

They’re a ‘core’ subset of Google’s Web Vitals. The CWVs metrics have been selected to measure the speed, performance, interactivity, and visual stability of a website. Core Web Vitals are signals to help a website meet the requirements of best practices for a great user experience. As UX plays an important role in SEO, PPC, and CRO, these core metrics are critical to a successful website.

What is Interaction to Next Paint (INP)?

INP is a metric designed to gauge the responsiveness of web pages in a more comprehensive manner than First Input Delay (FID). INP measures the time it takes from when a user first interacts with a webpage through actions such as clicking a link or a button to when the visual response to that interaction is fully rendered and painted on the screen for the user. INP goes beyond initial reactions by capturing the complete user experience of interaction and the website’s responsiveness. INP will encourage web developers, designers, and owners to create smoother, more engaging user experiences.

Interaction to Next Paint Core Web Vitals Metric

Why has INP been promoted to Core Web Vitals?

INP provides a more encompassing measure of a webpage’s responsiveness and user experience. Unlike its predecessor, FID, which only measured the delay in processing the first input, INP captures the full cycle from user interaction to visual feedback on the screen. Using INP ensures that web performance metrics better represent the actual experience of the user. Optimising Interaction to Next Paint (INP) results in quicker response times and visually reflects the result of those interactions.

INP vs. FID: What’s the difference?

First Input Delay (FID): Measures the delay between a user’s first interaction with a page (a click or tap) and the browser processing and delivering the response. FID provides insight into how quickly a page becomes usable. The focus to optimise for this metric involves reducing the initial JavaScript execution time and improving the critical rendering path so that a browser can quickly respond to the user’s first input.

In other words, we specifically focused on the latency of processing the first input.

Interaction to Next Paint (INP): INP, on the other hand, goes further. By extending beyond the initial delay, INP measures the duration to the next paint event after the interaction, essentially capturing the complete cycle from the user’s action to the visual feedback (or response being painted). Accessing the responsiveness of a page through the user’s interaction delivers a more holistic view of the webpage’s performance. Optimising for INP should obviously still consider the first input delay; however, a more strategic approach is required as the entire rendering pipeline should be optimized. INP may present more complex challenges than FID when it comes to managing JavaScript.

In other words, we specifically focused on the latency of the interaction response being painted on the screen.

Optimising for Interaction to Next Paint (INP)

While every website is unique and may present its own challenges, here are a few overview elements to consider:

  1. Minimise JavaScript execution time. This can be achieved by breaking up long tasks, using web workers for background processing, and deferring non-essential scripts.
  2. Optimise the rendering path. This includes efficiently managing CSS and avoiding complex layouts to allow for faster page rendering.
  3. Reduce the size and complexity of the DOM. This ensures quicker updates and reduces layout thrashing. If the DOM can be rendered faster, you can, by extension, expect a quicker visual response to an interaction.
Non Responsive Mobile Device - Waiting for Next Paint

Additionally, leveraging features like lazy loading and prioritising above-the-fold content can significantly enhance performance. Continuous monitoring and performance testing will help identify bottlenecks and highlight areas for improvement.

How Do Core Web Vitals and INP Impact My Website?

Although we know that Core Web Vitals is indeed a ranking factor, there has been much debate about the weight it carries in SEO. Before sharing my thoughts on that from my own experience, I want you to consider something. Think about page experience, not from the obvious ranking factor perspective but from a Google business-to-user perspective.

If you own a search engine, you are not only answering trillions of queries but also tracking the users’ journey from search through to the website’s analytics. You can clearly see what is important to measure based on the collective data of users’ behaviours across billions of websites every day.

Now, if the goal is to ‘organise the world’s data’ and provide your users with the information they are searching for, say you have 200+ webpages in your index that all provide a great response to a user’s query. How do you decide what to recommend first? Yes, content quality is extremely important. What if no one is getting a chance to see that content due to slow load time, sticky responsiveness, or visual instability?

Whether it’s that Core Web Vitals is a major ranking factor or it’s the enhanced UX creating more on-site engagement, I will let you be the judge. But in my experience, speed and performance optimisation have always been good for SEO. Since mobile-first indexing, the rollout of the Page Experience update, and Core Web Vitals, I have noticed it makes quite a difference in ranking.

Final Thoughts on INP to Conclude

With Interaction to Next Paint (INP), we’re stepping into a new chapter of Core Web Vitals. CWVs will continue to progress over time to help the user experience take centre stage; INP is just the next stage. Replacing FID on March 12, 2024, INP is a game-changing metric for many websites. A set standard in how we measure and improve users’ interaction on our websites provides an opportunity to get ahead of the competition that responds slower to change.

This shift to INP highlights the importance of speed and the expectation of meaningful interactions met with an immediate, noticeable visual response. This change encourages us to think of our websites more holistically, ensuring every part works in symphony and creating a seamless, responsive experience for the user.

Is it crucial to your SEO efforts? Wait for it. ‘it depends’. How is your website currently performing? What medium are your users engaging with your website? Yes, INP and other Core Web Vitals are vital to your overall UX and pack a positive boost to your SEO efforts.

If your website is passing Core Web Vitals without high performance scores, it’s because your users’ devices are picking up the slack through faster processing and good connections, so it may not be a top priority, but take note for later. If, on the other hand, you are failing or your website is not providing a good user experience, then use this as an opportunity to get your website up to scratch. As a good rule of thumb, I try to picture my target audience sitting on a mountaintop on a mobile rocking 2G; this helps me try to keep performance at the top of mind.

Speed and performance have been important for as long as I can remember. over the last 4 years, increasingly so. Whether it is a top priority or not, it should be a priority. Interaction to Next Paint may just be that little push you need to get it done.

Unless your website gets hit pretty badly by INP, I don’t see it having a major immediate effect on your SEO. It’s an opportunity rather than a cause for panic.

If your website or any websites you know have been experiencing any of the issues discussed in this article, please to reach out to Araneum Consultants, the WPO specialists, for advice, consultation, or implementation.

AI assistance has been used for some of the images on this website.