Googles Pagespeed-struktur, som vi har varit vana vid i flera år, är uppbyggd kring att säkerställa att webbplatser laddas och betjänas snabbt. Genom att producera mätbara parametrar och utnyttja den anonyma data som samlas in från Chromes marknadsandel använder Google dessa mätvärden som SEO-indikatorer. Med introduktionen av Interaction to Next Paint (INP) 2022 har fokus flyttats från enbart sidladdningshastighet till ett bredare webbprestandaperspektiv. INP mäter inte bara hur snabbt en sida laddas utan också hur snabbt användarinteraktioner på sidan bearbetas. I grund och botten förvandlar det webbplatsnavigeringsupplevelsen till ett Pagespeed-mått.
På Kerems blogg, föreslås termen "General Interaction Delay" som en bra passform för detta koncept, vilket Google också förklarar bra i sin egen video. Men för att förstå detta mått till fullo kommer vi att fördjupa oss i ämnet i följande avsnitt.
Vad är förklaringen till INP-varaktighet?
Varaktigheten av INP inkluderar:
- Tiden mellan användarens interaktion med sidan och exekveringen av händelsehanteraren.
- Manusets körningstid.
- Tiden från exekvering av koden till visning av utdata för användaren.
Dessa processer sker vanligtvis inom millisekunder, men på mobila enheter, särskilt äldre Android-telefoner med låg CPU-kraft, kan sådana fördröjningar (latens) ofta märkas. Det är värt att notera att INP-data, liksom andra Lighthouse-data, samlas in anonymt och utvärderas baserat på 75: e percentilen. Därför är målet att skapa applikationer som fungerar bra på genomsnittliga enheter snarare än bara på avancerade enheter.
Verkliga exempel på INP-varaktighet
Här är några verkliga exempel från de internetsidor vi besöker dagligen för att förklara detta koncept:
Ange adress på en e-handelssida
När du handlar på en e-handelssida och anger adressen för leverans väljer du först provinsen. Sedan, när du klickar på rutan för att välja distrikt, väntar du ett tag på att Ajax-resultatet ska laddas, och efter en viss tid laddas distriktsinformationen. Detta är ett bra exempel på INP. Att förbättra användarupplevelsen i det här exemplet kan innebära att lägga till en "laddningsindikator" för att informera användaren om Ajax-processen.
Sorteringsurval
När du använder filter på produktinformationssidor, om de filtrerade produkterna inte hanteras korrekt efter att du klickat på en kryssruta, kommer det att öka INP. Att använda mindre komplex JS och ta hänsyn till användarupplevelsen under filteroperationer kan hjälpa till att hålla INP-värdet så högt som möjligt.
Produktfotogallerier
Den tid användare väntar på att fotogalleriet ska laddas efter att ha klickat på ett produktfoto på produktdetaljsidor kan potentiellt påverka INP.
Bokningsknapp
Interaktionsfördröjningen mellan att klicka på knappen "Gör en reservation" och nästa sida är ett exempel på INP.
Lägg i varukorg Knapp
Millisekundernas fördröjning när du klickar på knappen "Lägg till i kundvagn" och undrar om varan lades till i kundvagnen eller inte definierar INP perfekt.
Som framgår av dessa exempel finns INP-fällor i scenarier som påverkar både SEO och direkta omvandlingsfrekvenser.
Hur kan man förbättra INP?
- Använd uppdaterade JS Frontend-bibliotek: Att förbättra prestanda genom att använda moderna JS frontend-bibliotek som Vue, React och Angular är fördelaktigt eftersom de erbjuder prestanda och återanvändningsfördelar.
- Minimera komplexiteten hos JS-bibliotek: Det är tillrådligt att använda mindre komplexa JS-bibliotek. Personligen rekommenderar jag att du undviker jQuery så mycket som möjligt.
Acceptabla INP-metriska nivåer
Tröskelvärdena för bra, medelstora och dåliga INP-nivåer är 200 millisekunder och 500 millisekunder. Att hålla INP under dessa trösklar är avgörande för att upprätthålla en bra användarupplevelse och övergripande webbprestanda.
