tldr;

INP (Interaction to Next Paint) us a pending Core Web Vital that will improve on and replace the limitations of FID (First Input Delay). In a nutshell, it’s a metric that measures how snappy your website is when a user interacts with it​. The vital is intended to replace FID in March 2024.

---

Hey there, web enthusiasts! Have you heard about this cool thing called INP? If you’re like, “INP? What’s that?” – you’re in for a treat!

You know when you click a button on a website, and it takes forever to respond? Or you tap on a menu on your phone, and it just hangs there, leaving you to wonder if you actually tapped it or not? Yeah, those moments can be really frustrating. And that’s exactly what INP is here to address!

INP is a measure of how quickly a website can respond to a user’s interactions – whether it’s a click, a tap, or a keypress. It observes the latency of all these interactions and gives a single value – a score, if you will – which represents the longest interaction observed, excluding outliers. The lower the INP, the better your website is at responding to interactions​.

What makes INP so cool is that it’s not just about measuring the time it takes for a website to respond. It’s about ensuring that the response – the visual feedback that an interaction has indeed occurred – happens as quickly as possible. So when you click on an item to add it to your online shopping cart, a low INP means you’ll see it being added almost instantly.

And what’s a good INP score, you ask? Well, if your INP is below or at 200 milliseconds, give yourself a pat on the back – your page has good responsiveness. If it’s between 200 and 500 milliseconds, there’s room for improvement. And if it’s over 500 milliseconds – well, let’s just say you’ve got some work to do​.

Now, here’s the kicker. Not all interactions are included in INP. It only considers clicks with a mouse, taps on a touchscreen, and keyboard presses. Scrolling and hovering doesn’t factor in​.

Moreover, INP isn’t just for the main document of your website. It also measures interactions within iframes, like clicking play on an embedded video. After all, users won’t care if something is in an iframe or not – they just want it to respond quickly.

First, let’s start with our established friend, FID. FID measures the time from when a user first interacts with your site (like clicking a button) to the time when the browser can start processing event handlers in response to the interaction. FID is all about that initial delay in responding to an interaction, but it doesn’t take into account what happens after that.

Now, here comes INP, promising to shake things up a bit. INP also measures responsiveness but does so by observing the latency of all user interactions, including clicks, taps, and keyboard inputs. Unlike FID, which focuses only on the first interaction, INP assesses the responsiveness throughout the lifespan of a user’s visit to a page. It reports a single value that nearly all interactions were below, meaning a low INP indicates the page was consistently responsive to user interactions.

FID	INP
Only measures the first input	Measures all inputs
Tracks click, touch & keyboard events	Tracks click, touch & keyword events
Finds the delay segment of the event	Records duration till the next frame is painted
Only uses the first score value	Compiles scores from all user interactions
Considered a load responsiveness metric	Zeroes in solely on user interaction speed
First impressions can be misleading	Ensures first and last impressions are accurate.

Here’s a fun fact: INP only factors in clicking with a mouse, tapping on a touch screen, and pressing keys on a keyboard. Sorry, hovering and scrolling enthusiasts, these interactions aren’t part of the INP party! But keep in mind, any keystrokes (like space bar or page up/down) that trigger other events are included in the INP calculation.

Another cool thing about INP is that it’s calculated based on the longest interaction latency, ignoring outliers. For pages with fewer interactions, the interaction with the worst latency (the 100th percentile) is chosen. For pages with many interactions, a high percentile value, like the 99th or 98th percentile, is chosen.

Nailing down an accurate INP measurement can be a real head-scratcher! To catch what real users are experiencing across your website, you’ll need a Real User Monitoring (RUM) tool that keeps track of attribution data. Think SpeedCurve, Akamai mPulse, or Web-VitalsJS – they’re your best pals in this INP journey. Heads up though, you won’t find attribution data for any Core Web Vital in the Chrome User Experience Report (CrUX). So keep that in mind as you dive into the world of INP!

Things to Watch Out For

Alright, let’s talk about some JavaScript-related villains that could take a swipe at your shiny INP score. If your Lighthouse report starts flagging things like:

1. Reduce the impact of third-party code
2. Minimize main-thread work
3. Avoid excessive DOM size
4. Reduce JavaScript execution time
5. Avoid Long Tasks

You can bet your boots that your INP’s taking a hit. So, keep your eyes peeled for these potential pitfalls on your road to INP perfection!

Okay, fellow developers, let’s chat about amping up that INP score!

1. First, let’s play with some CSS magic. You know those below-the-fold sections? Give ’em the content-visibility CSS rule. It’s like adding a turbo boost to your page’s speed!
2. Now, on to the DOM size. Too many elements or nesting levels can be like a speed bump for your INP. If your DOM size is waving a red flag over 800 elements in a Lighthouse report, it’s time to slim it down.
3. Are you using querySelectorAll a lot? Be careful, my friend! As the DOM size expands, this function call becomes increasingly costly. Think of it like eating too many cookies – it feels good at the moment, but you pay for it later.
4. Next, comb through your 1st party code. See if you can break up those heavy function calls or logic, particularly in addEventListener. It’s like breaking a big boulder into small pebbles – much easier to handle!
5. Also, give your UI elements a thorough check. Look for any layout and style recalculations that might be tripping up elements. It’s like making sure your running track is free of hurdles before the race.
6. And let’s not forget about third-party scripts. They can be a sneaky speed-stealer. If possible, try to defer, async, or even remove them. It’s like decluttering your garage – you might not think it matters until you see the extra space you’ve got!

Remember, the journey to a great INP score is all about continuous optimization and improvement. Keep it light, keep it clean, and keep it fast!

---

Wrapping Up

Alright, folks! We’re wrapping up our journey into the exciting world of INP, or Interaction to Next Paint. This is the friend who’s going to replace our good old pal, First Input Delay (FID), in March 2024 as a major player in the Core Web Vitals team. And let me tell you, this newbie has some serious tricks up its sleeve!