Googles Pagespeed-struktur, som vi har vært vant til i årevis, er bygget rundt å sikre at nettsider lastes inn og betjenes raskt. Ved å produsere målbare parametere og utnytte de anonyme dataene som samles inn fra Chromes markedsandel, bruker Google disse beregningene som SEO-indikatorer. Med introduksjonen av Interaction to Next Paint (INP) i 2022, har fokus skiftet fra bare sideinnlastingshastighet til et bredere perspektiv på nettytelse. INP måler ikke bare hvor raskt en side lastes, men også hvor raskt brukerinteraksjoner på siden behandles. I hovedsak gjør det nettstedets navigasjonsopplevelse til en Pagespeed-beregning.
På Kerems blogg, er begrepet "General Interaction Delay" foreslått som en god passform for dette konseptet, som Google også forklarer godt i sin egen video. For å forstå denne beregningen fullt ut, vil vi gå dypere inn i emnet i de følgende delene.
Hva er forklaringen på INP-varighet?
Varigheten av INP inkluderer:
- Tiden mellom brukerens interaksjon med siden og utførelse av hendelsesbehandleren.
- Manusets utførelsestid.
- Tiden fra utførelse av koden til visning av utdata for brukeren.
Disse prosessene skjer vanligvis i løpet av millisekunder, men på mobile enheter, spesielt eldre Android-telefoner med lav CPU-kraft, kan slike forsinkelser (latency) ofte være merkbare. Det er verdt å merke seg at INP-data, som andre Lighthouse-data, samles inn anonymt og evalueres basert på 75. persentil. Derfor er målet å lage applikasjoner som gir gode resultater på gjennomsnittlige enheter i stedet for bare på avanserte enheter.
Eksempler fra virkeligheten på INP-varighet
Her er noen virkelige eksempler fra internettsidene vi besøker daglig for å forklare dette konseptet:
Skrive inn adresse på en e-handelsside
Når du handler på en e-handelsside og skriver inn adressen for forsendelse, velger du først provinsen. Deretter, når du klikker på valgboksen for å velge distrikt, venter du en stund på at Ajax-resultatet skal lastes, og etter en viss tid lastes distriktsinformasjonen. Dette er et godt eksempel på INP. Å forbedre brukeropplevelsen i dette eksemplet kan innebære å legge til en "lasteindikator" for å informere brukeren om Ajax-prosessen.
Sorteringsutvalg
Når du bruker filtre på produktoppføringssider, vil det øke INP hvis de filtrerte produktene ikke administreres riktig etter å ha klikket på en avmerkingsboks. Å bruke mindre kompleks JS og vurdere brukeropplevelse under filteroperasjoner kan bidra til å holde INP-verdien så høy som mulig.
Produktfotogallerier
Tiden brukere venter på at bildegalleriet skal lastes etter å ha klikket på et produktbilde på produktdetaljsider, kan potensielt påvirke INP.
Reservasjonsknapp
Interaksjonsforsinkelsen mellom å klikke på "Foreta en reservasjon"-knappen og neste side er et eksempel på INP.
Legg i handlekurv-knappen
Millisekundene med forsinkelse når du klikker på "Legg i handlekurv"-knappen og lurer på om varen ble lagt til i handlekurven eller ikke definerer INP perfekt.
Som vist i disse eksemplene, er INP-feller til stede i scenarier som påvirker både SEO og direkte konverteringsfrekvenser.
Hvordan forbedre INP?
- Bruk oppdaterte JS-frontendbiblioteker: Å forbedre ytelsen ved å bruke moderne JS-frontend-biblioteker som Vue, React og Angular er fordelaktig ettersom de tilbyr ytelses- og gjenbruksfordeler.
- Minimer kompleksiteten til JS-biblioteker: Det anbefales å bruke mindre komplekse JS-biblioteker. Personlig anbefaler jeg å unngå jQuery så mye som mulig.
Akseptable INP-metriske nivåer
Terskelverdiene for gode, middels og dårlige INP-nivåer er 200 millisekunder og 500 millisekunder. Å holde INP under disse tersklene er avgjørende for å opprettholde en god brukeropplevelse og generell nettytelse.
