INP – Interaction to Next Paint

Interaction to Next Paint (INP) är ett Core Web Vital som mäter interaktionsrespons – tiden från att en användare interagerar med sidan till att webbläsaren presenterar en visuell uppdatering. INP ersatte First Input Delay (FID) som officiellt Core Web Vital den 12 mars 2024. Interaktivitet påverkar både ranking och konvertering — en trög sajt tappar besökare oavsett hur snabbt den laddar.

Definition och gränsvärden

INP registrerar den sammanlagda fördröjningen för varje interaktion – klick, tryck och tangentbordsinmatning – och rapporterar den sämsta (eller nära sämsta, enligt Event Timing API-specifikationen). Till skillnad från FID, som enbart mätte inmatningsfördröjningen vid den första interaktionen, omfattar INP samtliga interaktioner under hela sidbesöket och inkluderar hela kedjan från inmatning till visuell uppdatering.

Bedömningen baseras på 75:e percentilen av fältdata.

BetygGränsvärde
Bra≤ 200 millisekunder
Behöver förbättras200–500 millisekunder
Dåligt> 500 millisekunder

Vid INP:s lansering i mars 2024 klarade omkring 65 procent av sajterna gränsvärdet på mobil, jämfört med 93 procent som klarade det äldre FID-måttet (web.dev, mars 2024). INP ställer väsentligt högre krav på interaktivitet.

INP på svenska sajter

INP är sällan det mest akuta prestandaproblemet på svenska sajter — LCP och långsam TTFB utgör oftare flaskhalsen. Men undantag finns. I offentlig sektor använder många kommuner och myndigheter tunga tillgänglighets- och analysverktyg som Siteimprove och Vizzit. Dessa skript exekverar JavaScript på huvudtråden vid varje interaktion och kan enskilt driva INP-värdet över gränsen, särskilt på äldre mobiler.

E-handelssajter är en annan riskgrupp. Produktsidor med filtrering, storleksväljare och varukorgsknappar kräver snabb interaktionsrespons — men tyngs ofta av tredjepartsskript för rekommendationsmotorer, chattwidgets och konverteringsspårning. Varje skript adderar bearbetningstid och konkurrerar om huvudtråden.

En interaktions tre faser

Varje interaktion består av tre sekventiella faser. Att identifiera vilken fas som orsakar fördröjningen är avgörande för korrekt optimering:

  1. Inmatningsfördröjning (eng. input delay) – tiden från att användaren interagerar till att händelsehanteraren börjar köra. Orsakas av att huvudtråden är upptagen med andra uppgifter.
  2. Bearbetningstid (eng. processing time) – tiden att exekvera JavaScript-koden som hanterar händelsen.
  3. Presentationsfördröjning (eng. presentation delay) – tiden från att händelsehanteraren returnerat till att webbläsaren renderat den visuella uppdateringen.

Vanliga orsaker till hög INP

Långa uppgifter på huvudtråden

JavaScript körs på webbläsarens huvudtråd (eng. main thread). Uppgifter som tar mer än 50 millisekunder klassas som ”långa uppgifter” och blockerar all interaktionshantering under sin exekvering. Tredjepartsskript – annonsplattformar, analysverktyg, chattwidgets – är vanliga orsaker.

Stor och djup DOM-struktur

En sida med tusentals DOM-noder kräver mer arbete vid varje uppdatering, vilket förlänger presentationsfasen. W3C-riktlinjer rekommenderar att DOM-trädet hålls under 1 500 noder.

Onödiga omrenderingar i JavaScript-ramverk

I komponentbaserade ramverk som React kan en enskild tillståndsändring utlösa omrendering av hela komponentträd. Utan memoization – exempelvis React.memo, useMemo och useCallback – kan bearbetningstiden uppgå till hundratals millisekunder.

Optimeringsåtgärder

Dela upp långa uppgifter

Genom att dela upp tunga JavaScript-operationer i mindre enheter får webbläsaren möjlighet att hantera användarinteraktioner mellan dem. API:et scheduler.yield() ger huvudtråden andrum:

async function processItems(items) {
  for (const item of items) {
    doWork(item);
    await scheduler.yield();
  }
}

Flytta beräkningar till Web Workers

Operationer som inte kräver DOM-åtkomst – databearbetning, sortering, kryptering – kan exekveras i en Web Worker, en separat tråd som inte blockerar användarinteraktioner.

Reducera tredjepartsskript

Varje externt skript bör granskas med avseende på nödvändighet. Kvarvarande skript laddas med async eller defer. Bibliotek som Partytown kan flytta tredjepartsskript till en Web Worker och därigenom frigöra huvudtråden.

Ge omedelbar visuell återkoppling

Vid tidskrävande operationer – exempelvis formulärsändning eller API-anrop – bör en visuell indikator (laddningsanimation, knappförändring) visas omedelbart. Det minskar den upplevda fördröjningen oavsett bearbetningstid.

Mätning

INP är ett renodlat fältmått som kräver data från riktiga användare. I labbmiljö används Total Blocking Time (TBT) som proxy. TBT väger 30 procent av Lighthouse-poängen och korrelerar väl med INP, men fångar inte alla aspekter av presentationsfördröjning.