Interaction to Next Paint (INP) meet hoe snel een pagina visueel reageert op gebruikersinteracties zoals klikken, tikken en toetsaanslagen. INP verving First Input Delay (FID) als Core Web Vital in maart 2024. Google beschouwt een INP van 200 milliseconden of sneller als "goed".
Wat is INP?
INP observeert alle interacties tijdens een paginabezoek en rapporteert de slechtste (of bijna-slechtste) latency. Waar FID alleen de eerste interactie mat, meet INP elke interactie gedurende het hele bezoek. Dat maakt het een strenger en realistischer metric.
Een interactie bestaat uit drie fasen:
- Input delay — wachttijd voordat de event handler start (vaak door een drukke main thread)
- Processing time — de tijd die de event handler zelf nodig heeft
- Presentation delay — de tijd tot de browser de visuele update toont
| Score | Waarde | Betekenis |
|---|---|---|
| Goed | ≤ 200ms | Responsief |
| Verbetering nodig | 200ms – 500ms | Merkbare vertraging |
| Slecht | > 500ms | Onacceptabel |
Waarom belangrijk
INP is een Core Web Vital en daarmee een Google-rankingsignaal. Maar de impact gaat verder dan ranking: een trage INP betekent dat knoppen niet reageren, formulieren hangen, en gebruikers gefrustreerd raken. E-commerce sites rapporteren direct lagere conversie bij hoge INP.
JavaScript-zware sites (React, Vue, Angular) scoren vaak slecht op INP door lange hydration-taken die de main thread blokkeren. Server-side rendering verbetert INP doordat minder JavaScript client-side moet draaien.
Voorbeeld
Breek lange taken op met scheduler.yield() of setTimeout:
async function handleClick() {
await scheduler.yield()
doExpensiveWork()
await scheduler.yield()
updateUI()
}
In React: gebruik useTransition voor niet-urgente updates:
const [isPending, startTransition] = useTransition()
function handleFilter(value) {
startTransition(() => setFilter(value))
}
Gerelateerd
- Core Web Vitals: complete gids
- JavaScript SEO: rendering en indexering
- Gerelateerde termen: Core Web Vitals, LCP, Hydration