Wat is Interaction to Next Paint (INP), en hoe meet je het?

De Interaction to Next Paint (INP) metric meet de indruk die een gebruiker heeft van de responsiviteit van je site. Bij goede responsiviteit reageert een pagina snel op interacties. Denk aan visuele feedback die laat zien of een video begint af te spelen, of een product aan het winkelmandje is toegevoegd, of invoer in een formulierveld geldig is, of een modal opent.

Responsiviteit is cruciaal voor een goede gebruikerservaring. Google's Search Console verstuurt inmiddels waardevolle meldingen over INP-problemen in de Core Web Vitals.

Wat zijn de Core Web Vitals? #

De Core Web Vitals zijn een set metrics die de laadsnelheid, interactiviteit en visuele stabiliteit van je website meten. Lees dit artikel voor meer informatie over de Core Web Vitals.

Wat is Interaction to Next Paint? #

Interaction to Next Paint (INP) is een webperformance metric die de latency van de reactie van een webpagina op gebruikersinteracties meet. Concreet: de tijd die een pagina nodig heeft om visueel te reageren nadat een gebruiker een actie uitvoert, zoals klikken of tikken.

INP is de hoogste duur van alle gebruikersinteracties met de pagina — meer specifiek de tijd tussen de interactie en de uiteindelijke visuele wijziging. Voor pagina's met minder dan 50 interacties bepaalt de interactie met de grootste latency de INP-waarde. Voor pagina's met veel interacties is INP doorgaans het 98e percentiel van de interactielatency.

De latency van een interactie bestaat uit drie componenten:

1. Input Delay: De tijd tussen het moment waarop de gebruiker met de pagina interacteert en het moment waarop event handlers worden uitgevoerd.
2. Processing Time: De totale tijd die nodig is om de code in de bijbehorende event handlers uit te voeren.
3. Presentation Delay: De tijd tussen het moment waarop de event handlers klaar zijn en het moment waarop de browser het volgende frame toont.

Een interactie wordt getriggerd door:

• Een muisklik op een interactief element.
• Tikken op een interactief element op een touchscreen.
• Een toets indrukken op een toetsenbord, fysiek of op het scherm.

Een lage INP betekent dat de pagina voor de meeste interacties snel visuele feedback kon geven. Het gaat om de tijd die de browser nodig heeft om een visuele update te tonen na de eerste gebeurtenis.

Wat is een "goede" Interaction to Next Paint score? #

De INP metric valt in drie categorieën:

• Een INP van 200 milliseconden of minder is goed: de pagina heeft een goede responsiviteit.
• Een INP tussen 200 en 500 milliseconden betekent dat de responsiviteit verbetering behoeft.
• Een INP boven 500 milliseconden is slecht: de pagina heeft een slechte responsiviteit.

Bron: https://web.dev/inp/#what's-a-%22good%22-inp-value

Wat is het verschil tussen First Input Delay en Interaction to Next Paint? #

INP meet alle interacties met een pagina gedurende de volledige sessie, terwijl First Input Delay alleen de eerste interactie meet. Bovendien meet INP niet alleen de input delay, maar ook de verwerkingstijd voor event handlers en de tijd die nodig is om het volgende frame te renderen.

FID bereken je na de eerste interactie met de pagina. INP bereken je pas nadat de gebruiker de pagina verlaat. Dat levert één waarde op die de algehele responsiviteit van de pagina weergeeft.

Als onderdeel van de "Load responsiveness" metric richt First Input Delay zich op de eerste indruk. De gedachte: als de eerste interactie geen vertraging heeft, krijgt de gebruiker een goede eerste indruk.

Hoe meet je Interaction to Next Paint? #

Voor het meten van INP heb je veldtools nodig die echte gebruikersinteractiedata vastleggen. Google meet alle interacties die echte Chrome-gebruikers met een pagina hebben en slaat deze op in de CrUX dataset — het officiële dataset voor Core Web Vitals. Je vindt de officiële INP metrics in PageSpeed Insights, het CrUX dashboard of Google BigQuery.

Daarnaast kun je ook gebruikmaken van:

Browsertools:

• Chrome DevTools Lighthouse User Flows
• Web Vitals extensie

In het veld:

• Treo.sh
• PageSpeed Insights
• Chrome User Experience Report (CrUX)

Met Javascript: Schrijf een eigen PerformanceObserver om INP te meten, of gebruik de web-vitals JavaScript library.

Meer informatie over het gebruik van onINP() vind je in de referentiedocumentatie.

Er is ook een code snippet beschikbaar om interactielatency naar de console te loggen.

Hoe verbeter ik de Interaction to Next Paint? #

Een hoge INP komt voornamelijk door scripts die de main thread blokkeren. De main thread is de plek waar de browser het grootste deel van het werk uitvoert om een pagina te tonen. Zware JavaScript blokkeert de main thread langdurig. Naast JavaScript blokkeert ook CSS de main thread standaard.

INP verbeteren kan lastig zijn, want zelfs één trage interactie kan de gehele INP metric beïnvloeden. Enkele strategieën:

1. Minimaliseer de input delay: Voorkom lange taken op de main thread, met name tijdens de opstartfase van de pagina. Verwijder ongebruikte code, laad niet-essentiële code tijdens idle momenten van de browser, identificeer trage scripts en maak ze efficiënter, en zorg dat je pagina eenvoudig te renderen is.
2. Minimaliseer de verwerkingstijd: Reageer direct op gebruikersinput door onmiddellijk feedback te geven. Wacht bij het indienen van een formulier of het toevoegen van een product aan het winkelmandje niet op de server-bevestiging, maar geef direct visuele feedback.
3. Minimaliseer de presentation delay: Werk alleen de noodzakelijke onderdelen bij wanneer de pagina moet worden bijgewerkt, en vermijd het opnieuw renderen van te veel content. Dit houdt de verwerking eenvoudig en verbetert de INP metric.

In de praktijk geldt: als Total Blocking Time (TBT) en Time to Interactive verbeteren, wordt de Interaction to Next Paint doorgaans ook beter.

Hoe verbeter ik INP in React of Next? #

Met functies zoals selective hydration en startTransition maakt React 18 pagina's interactiever. Concurrent React geeft prioriteit aan wat je mee interacteert en kan worden onderbroken als er iets met hogere prioriteit optreedt.

Met Suspense hoef je niet meer te wachten tot al het JavaScript geladen is voordat hydration begint. Componenten worden sneller interactief, omdat de browser niet alles tegelijk hoeft te doen. Dat maakt je pagina responsiever en resulteert in lagere FID en INP scores.

Met deze API's verbeter je INP zowel tijdens als na het opstarten van de pagina.

Lees meer in ons artikel over het oplossen van INP-problemen.

Weet je niet zeker of je website snel genoeg is? Probeer onze gratis benchmark om het te ontdekken.