Interaction to Next Paint (INP)

Interaction to Next Paint (INP) is een metric die meet hoe snel een website reageert op gebruikersinteracties zoals klikken, tikken en toetsaanslagen. De score geeft aan hoeveel milliseconden er verstrijken tussen het moment dat een bezoeker een actie uitvoert en het moment dat de browser de visuele feedback toont. Google gebruikt INP sinds maart 2024 als officiële Core Web Vitals-metric en vervangt daarmee First Input Delay. Een lage INP-score betekent dat je website snel aanvoelt, een hoge score zorgt voor frustratie en verhoogt de kans dat bezoekers afhaken.

Hoe Interaction to Next Paint werkt en wat het meet

INP meet de langste interactie-vertraging tijdens het volledige bezoek aan een pagina. Elke keer dat een bezoeker klikt, tikt of een toets indrukt, start de browser een reeks handelingen: het event verwerken, JavaScript uitvoeren, de DOM aanpassen en het scherm opnieuw tekenen. INP kijkt naar de tijd tussen de gebruikersactie en het moment dat de volgende frame zichtbaar wordt. Google neemt niet de gemiddelde vertraging, maar de 75e percentiel van alle interacties: de score die 75 procent van je bezoekers ervaart. Een score onder de 200 milliseconden is goed, tussen 200 en 500 milliseconden moet beter, boven de 500 milliseconden is slecht. In de praktijk zien we bij MKB-websites vaak scores tussen 300 en 800 milliseconden, vooral op mobiel en bij pagina's met veel JavaScript.

Waarom Google INP invoerde en First Input Delay verving

First Input Delay mat alleen de allereerste interactie op een pagina en keek alleen naar de verwerkingstijd, niet naar de visuele feedback. Dat gaf een onvolledig beeld: een bezoeker kon tien keer klikken en negen keer een trage reactie ervaren, maar de FID-score bleef groen. INP meet alle interacties tijdens het bezoek en houdt rekening met de volledige cyclus tot de browser iets laat zien. Dat maakt de metric veel representatiever voor de ervaren snelheid. Google kondigde de verandering al in 2022 aan en maakte INP in maart 2024 officieel onderdeel van de Core Web Vitals. Websites die goed scoren op INP krijgen een lichte ranking-boost, slechte scores kunnen bezoekers en conversies kosten.

Wat een goede INP-score oplevert voor MKB-websites

Een lage INP-score zorgt ervoor dat je website direct aanvoelt. Bezoekers klikken op een knop en zien meteen feedback, waardoor ze vertrouwen houden en doorklikkken naar de volgende stap. Bij webshops merken we dat een verbetering van 400 naar 180 milliseconden het afbreekpercentage in het bestelproces met 8 tot 12 procent kan verlagen. Voor B2B-websites met formulieren of configurators is een goede INP essentieel: als een bezoeker een optie selecteert en er gebeurt niets zichtbaars, denkt hij dat de site kapot is. Een doordachte SEO-strategie houdt altijd rekening met Core Web Vitals, omdat Google snelheid en gebruikerservaring meeneemt in de ranking. Je kunt je INP-score monitoren via Google Search Console en PageSpeed Insights, waar je ook concrete verbeterpunten krijgt per pagina.

INP is vooral waardevol voor pagina's waar bezoekers actief handelingen verrichten: formulieren invullen, producten filteren, menu's openen of door content scrollen. Hieronder vier concrete situaties waarin INP het verschil maakt tussen een vloeiende ervaring en een trage, frustrerende website.

Webshops met filters en productconfiguratie

In een webshop gebruiken bezoekers filters om producten te selecteren op maat, kleur, prijs of voorraad. Elke klik op een filteroptie triggert JavaScript dat de productlijst bijwerkt. Als die update 600 milliseconden duurt, voelt de webshop traag aan en haken bezoekers af. Een goede INP-score onder de 200 milliseconden zorgt ervoor dat de nieuwe productlijst vrijwel direct verschijnt. Bij webshops met 500 tot 2.000 producten zien we vaak dat zware JavaScript-libraries of ongeoptimaliseerde database-queries de INP omhoog duwen. Door filters server-side te verwerken of lazy loading toe te passen, kun je de score met 40 tot 60 procent verbeteren. Dat leidt direct tot meer productpagina-bezoeken en een hogere conversie, omdat bezoekers sneller vinden wat ze zoeken.

Formulieren en leadgeneratie-pagina's

Op contactformulieren, offerteaanvragen of inschrijfpagina's moet elke invoer direct feedback geven: een vinkje bij een correct ingevuld veld, een foutmelding bij een verkeerd e-mailadres of een tooltip bij een verplicht veld. Als die feedback pas na 400 milliseconden verschijnt, weet de bezoeker niet of zijn invoer is geregistreerd en vult hij het formulier dubbel in of klikt weg. Een lage INP zorgt voor directe validatie en een gevoel van controle. Bij B2B-websites met meertrapsformulieren merken we dat een verbetering van de INP-score van 500 naar 180 milliseconden het aantal voltooide formulieren met 15 tot 20 procent verhoogt. Technisch bereik je dat door validatie client-side te doen met lichte scripts en zware third-party tracking pas na submit te laden.

Mobiele websites met hamburgermenu's en accordeons

Op mobiel tikken bezoekers op een hamburgermenu, een uitklapmenu of een accordion om meer content te zien. Als het menu pas na 500 milliseconden opent, tikken ze nog een keer en raken ze geïrriteerd. Een goede INP-score onder de 200 milliseconden zorgt dat het menu direct openklapt. Mobiele browsers hebben vaak minder rekenkracht dan desktop, waardoor JavaScript-heavy interacties langer duren. Door CSS-animaties te gebruiken in plaats van JavaScript-animaties en door third-party scripts te vertragen met async of defer, kun je de INP op mobiel met 30 tot 50 procent verlagen. Dat is cruciaal, omdat meer dan 60 procent van de MKB-websitebezoekers via mobiel komt en Google mobile-first indexeert.

Dashboards en applicaties met real-time data

Bij dashboards of webapplicaties klikken gebruikers op tabs, grafieken of datumfilters om data te bekijken. Als de grafiek pas na 700 milliseconden bijwerkt, voelt de applicatie log aan en vertrouwen gebruikers de data minder. Een lage INP zorgt ervoor dat de interface direct reageert, ook bij complexe berekeningen. In de praktijk zien we dat dashboards met veel data-fetching en rendering vaak INP-scores boven de 600 milliseconden hebben. Door data voor te laden, virtuele scrolling toe te passen en zware berekeningen naar een API te verplaatsen, kun je de score naar beneden brengen. Dat verbetert de gebruikerservaring en verhoogt de kans dat gebruikers dagelijks terugkomen.

Wanneer Interaction to Next Paint de juiste focus is en wanneer niet

INP is relevant voor elke website waar bezoekers actief interacties uitvoeren: klikken, tikken, typen of scrollen. Heb je een website met vooral statische content en weinig interactieve elementen, dan is Largest Contentful Paint of Cumulative Layout Shift belangrijker. Maar zodra je formulieren, filters, menu's of configurators hebt, moet je INP prioriteren. Een goede INP-score verbeter je door JavaScript te optimaliseren, third-party scripts uit te stellen en interacties server-side of met lichte client-side code af te handelen. Begin met de pagina's die het meeste verkeer en conversies genereren, want daar heeft een verbetering de grootste impact.