Optimaliser Interaction to Next Paint (INP) – konkrete råd for utviklere

De tre komponentene i INP

En interaksjon kan deles inn i tre påfølgende faser :

1. Inndataforsinkelse – starter når brukeren utfører en handling (klikk, trykk, tastetrykk), og varer til nettleseren kan begynne å kjøre hendelsesbehandlerne for interaksjonen.
2. Behandlingstid – tiden det tar for hendelsesbehandlerne å fullføre.
3. Presentasjonsforsinkelse – tiden det tar for nettleseren å presentere neste bilde (frame) som viser det visuelle resultatet av interaksjonen.

Slik optimaliserer du INP trinn for trinn

1. Høy inndataforsinkelse

Hvis inndataforsinkelsen er høy, skyldes det ofte at hovedtråden (main thread) er opptatt med annet arbeid før interaksjonens hendelsesbehandlere kan kjøre. Selve interaksjonen er kanskje ikke den direkte årsaken til treg INP .

Anbefaling: Undersøk hva som opptar hovedtråden, for eksempel lange oppgaver fra andre skript, tredjeparts widgets eller unødvendig gjengivelse. Unngå overdrevent arbeid på hovedtråden mens brukere prøver å interagere med siden .

2. Høy behandlingstid

Dette betyr at hendelsesbehandlerne tar for lang tid. "Any code running in any event listener will delay the interaction." Det inkluderer kode fra rammeverk, biblioteker, dine egne lyttere og tredjepartsskript.

Anbefaling: Reduser eller utsett arbeid i hendelsesbehandlerne. Vurder å bruke setTimeout eller requestAnimationFrame for å bryte opp lange oppgaver. Unngå å blokkere hovedtråden med tunge beregninger i selve lytteren.

3. Høy presentasjonsforsinkelse

Dette skyldes at nettleseren bruker lang tid på å tegne neste bilde etter at hendelsesbehandlerne er ferdige.

Anbefaling: Fokuser på å redusere gjengivelsesarbeidet, for eksempel ved å begrense CSS-omregning, unngå unødvendige layoutendringer og optimalisere malingsprosessen. Hvis du er usikker på hva som forårsaker forsinkelsen, kan du bruke Chrome DevTools sin INP-oversikt til å identifisere flaskehalser.

Måling i felt og lab

Du kan måle INP i JavaScript ved å overvåke hendelsestidsstemler (event timestamps) og se etter lange oppgaver. Bruk verktøy som Lighthouse, Web Vitals-biblioteket eller Chrome DevTools for å fange opp og analysere interaksjoner.

Vanlige fallgruver

• Ikke stol på FID alene – FID er bare inndataforsinkelse på første innlasting, mens INP dekker alle interaksjoner .
• Husk at kode som kjører i setInterval fortsatt kan påvirke INP hvis den blokkerer hovedtråden.
• Tredjepartsskript, reklamewidgets og analyseverktøy kan forlenge både inndataforsinkelse og behandlingstid.

Oppsummering

For å oppnå en god INP-verdi må du:

• Holde alle tre delene av interaksjonen korte
• Redusere unødvendig arbeid på hovedtråden
• Optimalisere hendelsesbehandlere og unngå blokkering
• Bruke utviklerverktøy for å identifisere flaskehalser

Ved å følge disse rådene kan du forbedre sidens responsivitet og gi brukerne en raskere og mer behagelig opplevelse.