Definitie
INP meet hoe snel een pagina zichtbaar reageert op klikken, tikken en toetsaanslagen. Goed is 200 ms of minder. INP verving FID in maart 2024.
Wat is INP?
Interaction to Next Paint meet de tijd tussen een interactie van de bezoeker en het moment dat de browser het volgende beeld tekent. Klikken, tikken en toetsaanslagen tellen mee. Scrollen en hoveren niet.
INP kijkt naar (bijna) de traagste interactie tijdens het hele bezoek, niet alleen naar de eerste. Goed is 200 ms of minder, slecht is meer dan 500 ms. Sinds maart 2024 is INP een Core Web Vital en vervangt het FID, dat alleen de vertraging van de eerste interactie mat.
Waar het misgaat op een webshop
Elke interactie bestaat uit drie delen: input delay (de main thread is nog bezig met iets anders), processing time (je eigen event handlers) en presentation delay (de browser moet opnieuw layouten en tekenen).
Typische trage interacties in een webshop:
Een filter aanklikken op een categoriepagina, waarna de hele productgrid opnieuw wordt opgebouwd. Een kleur- of maatswatch kiezen die prijs, voorraad en galerij tegelijk bijwerkt. 'In winkelwagen' waarna de minicart, tracking-events en een upsell-popup in één keer draaien. En vaak de eerste tik van een bezoek: 'Accepteren' op de cookiebanner, waarna alle tags tegelijk starten.
Het verraderlijke is dat INP op een snelle laptop vrijwel nooit opvalt. Op een middenklasse Android-telefoon kan dezelfde klik op een filter honderden milliseconden kosten, omdat de processor veel trager is. Juist die toestellen bepalen je 75e percentiel.
Zo werkt het in Magento en Shopify
Magento Luma leunt op RequireJS en Knockout.js, met veel JavaScript dat bij het laden en bij interacties draait. Op goedkopere telefoons zie je dat direct in INP. Hyvä gebruikt Alpine.js met veel minder JavaScript per pagina. Daarom bouwen wij Magento-frontends op Hyvä.
In Shopify komt INP-schade meestal van apps: reviews, bundels, wishlists en chat die elk hun eigen script en event listeners toevoegen. Ook thema's die bij elke variantwissel complete sections via de Section Rendering API ophalen en vervangen, kunnen traag aanvoelen.
Wat helpt
Geef direct visuele feedback (spinner, knopstatus) en doe het zware werk daarna. Breek lange taken op, zodat de browser tussendoor kan tekenen. Laad scripts van derden die niet nodig zijn voor de eerste interactie later. Houd de DOM klein: een categoriepagina met honderden producten en mega-menu's in de HTML maakt elke layout duurder.
Meet INP alleen bij echte bezoekers. Lighthouse kan INP bij een gewone laadtest niet meten, omdat er niemand klikt. Met RUM, zoals RUMvision (waar wij Gold Partner van zijn), zie je welk element en welk script de trage interactie veroorzaakt.
Kijk ook kritisch naar je tag manager. Elke tag die bij een klik op 'In winkelwagen' een event afvuurt, draait op dezelfde main thread als je winkelwagenlogica. Tien marketingtags op één knop is geen uitzondering, en elk ervan telt mee.
Eerst feedback, dan het zware werk
button.addEventListener('click', async () => {
toonLaadstatus(button); // direct zichtbaar
if ('scheduler' in window && scheduler.yield) {
await scheduler.yield(); // geef de main thread vrij
} else {
await new Promise(r => setTimeout(r, 0));
}
await voegToeAanWinkelwagen(productId);
});Verder lezen
Veelgestelde vragen
Waarom zie ik geen INP in Lighthouse?+
Een standaard Lighthouse-test laadt alleen de pagina en klikt nergens op. Total Blocking Time is daar de lab-indicatie. Echte INP haal je uit CrUX of RUM.
Telt de cookiebanner mee voor INP?+
Ja. De klik op 'Accepteren' is een gewone interactie. Starten daarna alle marketingtags tegelijk, dan is dat vaak je traagste interactie.