INP meet hoe snel jouw site reageert op élke gebruikersinteractie, niet alleen de eerste klik zoals FID deed. Klik op een knop, open een menu, type in een formulier: de tijd tussen die actie en de volgende paint moet onder de 200 milliseconden blijven. Voor een goede score, wel te verstaan. De drempel "slecht" begint bij 500ms.
Waarom faalt 43% van de sites?
Omdat INP, anders dan LCP, niet op te lossen is met betere afbeeldingen of CDN-caching. Het is een JavaScript-architectuur-probleem. Elke long task die de main thread blokkeert (third-party scripts, hydration, framework-overhead, dure event-handlers) telt mee. Slot machines van rendering die je niet ziet maar wel voelt.
Vijf concrete fixes
1. Splits long tasks
Een functie die 300ms blokkeert, blokkeert INP voor 300ms. Splits ze op met `await scheduler.yield()` (Chrome 129+) of `setTimeout(fn, 0)`. Browser krijgt ademruimte om events af te handelen tussendoor.
2. Lazy-load third-party scripts
Analytics, chat widgets, A/B-test tools, social embeds, ze breken INP gegarandeerd. Laad ze met `defer`, `strategy="lazyOnload"` (Next.js), of pas na user-consent. Een chat-widget die 250ms blokkeert kost je in 80% van de gevallen meer dan hij oplevert.
3. Verminder client-side JavaScript
Server-rendering via Next.js, Astro of Remix verplaatst werk naar de server. Minder JS in de bundle = minder hydration = minder INP-stalls. React Server Components zijn er specifiek voor dit doel.
4. Optimaliseer event-handlers
Een onChange-handler die op elke toets een fetch doet, of een onScroll die elke frame layout-recalculatie triggert, beide INP-killers. Debounce, throttle, of gebruik `requestIdleCallback`.
5. Meet veld-data, niet lab-data
Lighthouse meet INP synthetisch in een simulatie. Echte gebruikers zijn een ander verhaal. Gebruik Chrome User Experience Report (CrUX) of de Performance Observer API om real-user-metrics te zien. Dat is wat Google gebruikt.
Wanneer is INP een prioriteit?
Altijd, maar vooral als je een SPA hebt, veel third-party scripts gebruikt, of een complexe formulier-flow. Brochure-sites met statische pagina's halen INP makkelijk; e-commerce-checkouts en SaaS-dashboards lekken vaak.