Interaction to Next Paint (INP) is een Core Web Vital van Google die de responsiviteit van een webpagina meet. Het registreert de grootste vertraging tussen een gebruikersinteractie (klik, tap, toetsaanslag) en de volgende visuele update tijdens het hele bezoek, en rapporteert het 75e percentiel over alle echte sessies. INP werd op 12 maart 2024 officieel Core Web Vital en rankingsignaal, ter vervanging van First Input Delay (FID). Goede INP: 200 ms of minder. Gemeten in echte Chrome gebruikers via CrUX en zichtbaar in Search Console, PageSpeed Insights, Chrome DevTools en de web-vitals bibliotheek.
Hoe INP wordt gemeten
- Input delay.
- Processing time.
- Presentation delay.
Drempels
| Categorie | Waarde | Gevoel |
|---|---|---|
| Goed | 200 ms of minder | Direct. |
| Te verbeteren | 200 tot 500 ms | Merkbare vertraging. |
| Slecht | Boven 500 ms | Zichtbaar traag. |
In februari 2025 haalt ongeveer 65 procent van mobiele URLs in CrUX de drempel, tegen 55 procent bij introductie in maart 2024.
Waarom verving het FID
- FID mat alleen de eerste interactie.
- FID rekende geen verwerking of render mee.
Oorzaken van slechte INP
- Long tasks op de main thread.
- Synchrone scripts van derden.
- Zware event handlers.
- Layout thrashing.
- Trage framework rerenders.
- JS animaties in plaats van CSS.
- CSS recalc op enorme DOMs.
Hoe meet je INP
- PageSpeed Insights.
- Search Console.
- Chrome DevTools (vanaf Chrome 121).
- web-vitals library (
npm install web-vitals). - Cloudflare Web Analytics, Vercel Speed Insights, SpeedCurve, DebugBear.
- CrUX op BigQuery.
import { onINP } from 'web-vitals';
onINP(metric => {
fetch('/api/vitals', { method: 'POST', body: JSON.stringify(metric), keepalive: true });
});Optimaliseren
- Long tasks splitsen met
scheduler.yield()(Chrome 129, oktober 2024). - Niet kritisch JS uitstellen.
- Partiele hydration (Astro, RSC, Qwik).
- React componenten memoizen.
- CSS animaties.
- Debounce van handlers.
- Web Workers voor zwaar parsing.
- DOM verkleinen.
content-visibility: auto.- Scripts van derden auditen.
INP in WordPress
- jQuery uitschakelen.
- Snel thema (GeneratePress, Astra, Kadence).
- Zware page builders vermijden.
- GTM en analytics vertraagd laden.
- Caching.
- WooCommerce of headless.
- Chat widgets beperken.
- Meten met Site Kit by Google.
Mythes
- Lighthouse 100 garandeert geen goede real INP.
- Minder JS helpt alleen als het blokkeerde.
- INP geldt apart voor mobile en desktop.
- INP is geen TBT.
Hoe helpt InspectWP?
InspectWP detecteert jQuery in frontend, blokkerende scripts en trage page builders.