Googles Pagespeed-struktur, som vi har været vant til i årevis, er bygget op omkring at sikre, at hjemmesider indlæses og betjenes hurtigt. Ved at producere målbare parametre og udnytte de anonyme data indsamlet fra Chromes markedsandel, bruger Google disse metrics som SEO-indikatorer. Med introduktionen af Interaction to Next Paint (INP) i 2022 er fokus flyttet fra blot sideindlæsningshastighed til et bredere web-performanceperspektiv. INP måler ikke kun, hvor hurtigt en side indlæses, men også hvor hurtigt brugerinteraktioner på siden behandles. Grundlæggende gør det webstedsnavigationsoplevelsen til en Pagespeed-metrik.
På Kerems blog, er udtrykket "General Interaction Delay" foreslået som en god pasform til dette koncept, som Google også forklarer godt i sin egen video. Men for fuldt ud at forstå denne metrik, vil vi dykke dybere ned i emnet i de følgende afsnit.
Hvad er forklaringen på INP-varighed?
Varigheden af INP inkluderer:
- Tiden mellem brugerens interaktion med siden og udførelsen af hændelseshandleren.
- Scriptets eksekveringstid.
- Tiden fra udførelse af koden til visning af output til brugeren.
Disse processer sker typisk inden for millisekunder, men på mobile enheder, især ældre Android-telefoner med lav CPU-kraft, kan sådanne forsinkelser (latency) ofte være mærkbare. Det er værd at bemærke, at INP-data, ligesom andre Lighthouse-data, indsamles anonymt og evalueres baseret på 75. percentil. Derfor er målet at skabe applikationer, der fungerer godt på gennemsnitlige enheder i stedet for kun på avancerede enheder.
Eksempler fra det virkelige liv på INP-varighed
Her er nogle eksempler fra det virkelige liv fra de internetsider, vi besøger dagligt for at forklare dette koncept:
Indtastning af adresse på en e-handelsside
Når du handler på en e-handelsside og indtaster adressen til forsendelse, vælger du først provinsen. Når du derefter klikker på valgboksen for at vælge distriktet, venter du et stykke tid på, at Ajax-resultatet indlæses, og efter et vist tidsrum indlæses distriktsoplysningerne. Dette er et godt eksempel på INP. Forbedring af brugeroplevelsen i dette eksempel kunne indebære tilføjelse af en "indlæsningsindikator" for at informere brugeren om Ajax-processen.
Sortering Udvalg
Når du bruger filtre på produktlistesider, vil det øge INP, hvis de filtrerede produkter ikke administreres korrekt efter at have klikket på et afkrydsningsfelt. Brug af mindre kompleks JS og overvejelse af brugeroplevelse under filteroperationer kan hjælpe med at holde INP-værdien så høj som muligt.
Produktfotogallerier
Den tid, brugere venter på, at fotogalleriet indlæses efter at have klikket på et produktfoto på produktdetaljesider, kan potentielt påvirke INP.
Reservationsknap
Interaktionsforsinkelsen mellem at klikke på knappen "Foretag en reservation" og den næste side er et eksempel på INP.
Føj til kurv -knap
Millisekundernes forsinkelse, når du klikker på knappen "Tilføj til kurv" og spekulerer på, om varen blev tilføjet til indkøbskurven eller ej, definerer INP perfekt.
Som det ses i disse eksempler, er INP-fælder til stede i scenarier, der påvirker både SEO og direkte konverteringsrater.
Hvordan kan man forbedre INP?
- Brug up-to-date JS frontend biblioteker: Forbedring af ydeevnen ved at bruge moderne JS frontend-biblioteker som Vue, React og Angular er fordelagtig, da de tilbyder ydeevne og genbrugsfordele.
- Minimer kompleksiteten af JS-biblioteker: Det er tilrådeligt at bruge mindre komplekse JS-biblioteker. Personligt anbefaler jeg at undgå jQuery så meget som muligt.
Acceptable INP-metriske niveauer
Tærskelværdierne for gode, mellemstore og dårlige INP-niveauer er 200 millisekunder og 500 millisekunder. At holde INP under disse tærskler er afgørende for at opretholde en god brugeroplevelse og overordnet web-ydeevne.
