{"id":4318,"date":"2024-11-05T10:20:28","date_gmt":"2024-11-05T15:20:28","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4318"},"modified":"2024-11-05T10:20:29","modified_gmt":"2024-11-05T15:20:29","slug":"mastering-interaction-to-next-paint-inp","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/mastering-interaction-to-next-paint-inp\/","title":{"rendered":"Mastering Interaction to Next Paint (INP)"},"content":{"rendered":"\n

The web keeps changing\u2014and so do the ways we measure web performance. Google recently updated its Core Web Vitals<\/strong> metrics, dropping First Input Delay (FID) in favor of a new and improved interaction metric: Interaction to Next Paint (INP).<\/p>\n\n\n\n

FID was a step in the right direction, measuring how quickly a site responds to the first interaction. But it fell short by focusing only on that initial action, leaving out every click and type that follows. It also emphasized blocking time over total processing time, missing the real story behind user experience.<\/p>\n\n\n\n

How is INP different? We\u2019ll dive into exactly what it\u2019s measuring, how to diagnose it, and, most importantly, how to fix it so your website interactions feel fast and responsive.<\/p>\n\n\n\n

What \u201cInteraction to Next Paint\u201d Measures<\/h2>\n\n\n\n

INP monitors every interaction a user makes with a page\u2014whether it\u2019s a click, tap, or key press. It measures the time it takes for each of these interactions to trigger a visible change, or \u201cnext paint,\u201d<\/strong> on the screen, capturing every millisecond from receiving the input to updating the display.<\/p>\n\n\n\n

Over the lifetime of a page, there should (hopefully) be lots of user interactions. Your INP score is determined by the \u201cworst\u201d interaction<\/strong> on the page\u2014the one with the longest delay until a response.<\/p>\n\n\n\n

It may sound harsh, but it\u2019s realistic. If just one interaction lags, that\u2019s what users remember. By focusing on the most significant delays, INP spotlights the interactions that need the most attention to create a truly responsive experience.<\/p>\n\n\n\n

To hit a good INP score, a page needs to respond to every interaction in under 200 milliseconds.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Why INP Matters<\/h2>\n\n\n\n

INP directly measures a website\u2019s interactivity\u2014how responsive the site feels to users as they interact. We\u2019ve all had that frustrating experience of clicking a button, only to have nothing happen right away. Suddenly, you\u2019re wondering if the click registered or if you need to try again. That\u2019s the feeling of poor interactivity.<\/p>\n\n\n\n

When interactions lag, users feel like the site is \u201cslow,\u201d \u201claggy,\u201d or even \u201cbroken.\u201d It\u2019s a surefire way to frustrate users, lose engagement, and damage credibility.<\/p>\n\n\n\n

And if that\u2019s not enough, INP is one of Google\u2019s Core Web Vitals and a factor in SEO rankings. Google doesn\u2019t want to send search traffic to laggy sites, so it penalizes pages that fail their INP scores.<\/p>\n\n\n\n

Understanding INP Measurement in Detail<\/h2>\n\n\n\n

Before we dive into tactics to fix INP, it\u2019s important to understand how INP is measured. If you\u2019re looking for even more details, check out this deep dive on Interaction to Next Paint<\/a>.<\/p>\n\n\n\n

Interactions<\/h3>\n\n\n\n

INP measures the response time for all discrete interactions<\/strong>\u2014like clicks, taps, drags, and key presses\u2014that users make while on the page. These actions initiate user commands and usually lead to some form of visual feedback, so tracking them is essential for accurately gauging a site\u2019s interactivity.<\/p>\n\n\n\n

One common action that doesn\u2019t<\/strong> factor into INP, however, is scrolling<\/strong>. Scrolling is typically continuous rather than discrete and has its own performance considerations outside of INP\u2019s scope.<\/p>\n\n\n\n

The INP Measurement Window<\/h3>\n\n\n\n

INP measures everything that happens between a user interaction and the next paint event, and a lot can occur in that window. Here\u2019s how it breaks down:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
    \n
  1. Input Delay<\/strong>: When the interaction event is triggered, the browser may already be busy, for instance, executing an obnoxious amount of JavaScript. Since JavaScript can block the main thread, the browser has to wait until it\u2019s finished before it can even start processing the interaction. This waiting period is the input delay<\/strong>.<\/li>\n\n\n\n
  2. Event Handling<\/strong>: Once the main thread is free, the browser can dispatch the event to any associated event handlers\u2014and there could be quite a few. Each event handler needs to be called and completed before moving forward.<\/li>\n\n\n\n
  3. Rendering<\/strong>: After all JavaScript is done executing, the browser can calculate what changed in the DOM, update elements and layout, and finally paint the next frame to the viewport.<\/li>\n<\/ol>\n\n\n\n

    INP and Long Animation Frames (LoAF)<\/h3>\n\n\n\n

    INP is closely related to Long Animation Frames (LoAF)<\/strong>, as both metrics capture user responsiveness and visual feedback. LoAF measures the time between paint events, regardless of whether an interaction happened, indicating if the browser may have felt \u201cfrozen\u201d to the user.<\/p>\n\n\n\n

    A slow INP is often accompanied by a Long Animation Frame, which can provide more details on the scripts or activities causing delays. For more information, check out this detailed guide on Long Animation Frames<\/a>.<\/p>\n\n\n\n

    How to Improve Your INP Score<\/h2>\n\n\n\n

    Improving your INP score means reducing the time users wait for visible feedback after they interact. Here are some strategies to make sure your site responds quickly:<\/p>\n\n\n\n