What is Interaction to Next Paint?

"Chrome usage data shows that 90% of a user's time on a page is spent after it loads. Thus, careful measurement of responsiveness throughout the page lifecycle is important. This is what the INP metric assesses." 

In this excellent post, Jeremy Wagner explains how Interaction to Next Paint is calculated, how Google's INP thresholds are determined, how INP is different from its predecessor First Input Delay, and how to measure INP for your own site.

Farewell, First Input Delay!

When it comes to new performance metrics, it's easy to jump on hype-fuelled bandwagons. While we definitely get excited about emerging metrics, we also approach each new metric with an analytical eye. For example, way back in 2020, Cliff Crocker took a closer look at First Input Delay (the predecessor to INP), and found that it did not meaningfully correlate with actual user behaviour. 

Does INP actually correlate to user behaviour?

In his analysis of INP's correlation to conversion rate, Cliff Crocker found that yes, there is typically a correlation. When INP gets worse, conversions suffer. However, it's important to know that Cliff also found no consistent correlation with Google's thresholds for 'Good', 'Needs Improvement', and 'Poor':

"For one site, conversions suffer when INP is 100ms – well within Google's 'good' parameter of 200ms. This doesn't mean it's a bad idea to have a general set of thresholds. It just means those thresholds might not apply to your site. You must look at your own data."

Mobile INP performance: The elephant in the room

Still more important INP insights from Cliff Crocker, including:

• Only 2/3 of mobile sites have 'good' INP
• Mobile INP = Android INP
• Mobile INP has an *even stronger* correlation with bounce rate and conversions than desktop INP

INP case studies

The best way to understand the important of optimizing INP is to look at your own RUM data for your own site. The second-best way is to look at case studies from other companies that have had success. Here's a handful for you to check out:

• Trendyol reduced INP by 50%, resulting in a 1% increase in click-through rate
• redBus improved INP and increased sales by 7%
• The Economic Times reduced INP from 1s to 257ms, leading to a 50% decrease in bounce rate and 43% increase in pageviews

How to debug and optimize INP

Now that you understand how slow INP hurts your users and your business, let's talk about solutions. In this in-depth post, Andy Davies walks through what INP is, how to identify and debug slow interactions, and some approaches he's used to improve them. 

"Many sites tend to be in the 'Needs Improvement' or 'Poor' category. My experience over the last few months is that getting to 'Good' is achievable, but it's not always easy. In this post I'm going to walk through the approach I've been taking to help customer identify the causes of high INP times, along with examples of some issues I commonly see, as well as pointers on the approaches I've used to help sites improve their INP."

Complete Guide: Get Started with Core Web Vitals

One article to rule them all! Here is everything you need to know about Core Web Vitals – from SEO and business impact to how to monitor and fix issues with each Vital.