Mäter respons efter interaktion
Interaction to Next Paint mäter fördröjningen från klick, tryck eller tangentbord till nästa visuella uppdatering under hela besöket.
Vad som gör INP långsam
Långa JavaScript-uppgifter blockerar huvudtråden. Tunga event handlers, stora DOM-träd och tredjepartsscript är vanliga orsaker.
Så förbättras INP
Dela upp långt arbete, minska JavaScript, undvik onödig rendering och ge snabb visuell återkoppling.
Flytta tungt arbete från huvudtråden när det är möjligt.
Analysera riktiga interaktioner
Fältdata är särskilt viktig eftersom olika besökare klickar på olika funktioner. Identifiera vilken komponent och händelse som ger den långsamma responsen.
Ett långsamt filter visar varför laddtid och interaktivitet är två olika frågor
En produktsida blir synlig på två sekunder och ser snabb ut. När användaren klickar på ”Visa bara produkter i lager” fryser gränssnittet nästan en sekund medan ett stort JavaScript sorterar hela listan.
LCP kan fortfarande vara bra, men INP avslöjar att interaktionen känns trög. Optimera genom att minska arbetet i eventhanteraren, använda effektivare datastruktur eller flytta tung beräkning bort från huvudtråden. Ge dessutom omedelbar visuell respons på klicket. En snabb första render är alltså inte tillräcklig om de funktioner användaren sedan behöver känns sega. Prioritera sådant som påverkar första skärmen och interaktionen.
INP mäter hur snabbt sidan reagerar under hela besöket
Interaction to Next Paint tittar på användarinteraktioner som klick, tryck och tangentbord och mäter tiden tills webbläsaren kan presentera nästa visuella uppdatering. Måttet fångar alltså inte bara första laddningen. En sida kan öppnas snabbt men ändå kännas trög när en meny, filter eller knapp reagerar långsamt.
INP sammanfattar sidans interaktivitet över besöket och är därför särskilt relevant på sidor med mycket JavaScript.
Långa JavaScript-uppgifter blockerar huvudtråden
Om webbläsaren är upptagen med en stor beräkning kan den inte omedelbart hantera ett klick och rita resultatet.
Bryt därför upp tungt arbete, minska onödiga script och undvik att köra stora funktioner vid varje inputhändelse. Tredjepartstaggar kan också konkurrera om huvudtråden. Performance-panelen i DevTools visar långa tasks och vilka funktioner som tar tid, vilket gör det möjligt att optimera koden som faktiskt blockerar interaktionen.
Bra respons kräver både snabb kod och snabb visuell återkoppling
Ibland måste en operation ta tid, exempelvis när data hämtas från servern. Då bör gränssnittet ändå svara snabbt genom att visa laddningsstatus eller annan återkoppling. Användaren behöver förstå att klicket registrerats. Optimera först den lokala eventhanteringen och därefter nätverks- eller backenddelen.
INP blir bättre när webbläsaren snabbt kan presentera nästa frame, även om den fullständiga processen fortsätter i bakgrunden.
Behöver företaget en bättre hemsida?
Få ett tydligt förslag och fast pris
Vi bygger och förbättrar WordPress-hemsidor med fokus på tydlighet, prestanda, SEO och enkel förvaltning.
Snabb återkoppling
Hjälpte den här artikeln dig?
Din röst sparas anonymt och hjälper oss att förbättra guiderna.