Googlen Pagespeed-rakenne, johon olemme jo vuosia tottuneet, perustuu siihen, että verkkosivustot latautuvat ja palvelevat nopeasti. Google käyttää näitä mittareita SEO-indikaattoreina tuottamalla mitattavissa olevia parametreja ja hyödyntämällä Chromen markkinaosuudesta kerättyä anonyymiä dataa. Interaction to Next Paintin (INP) käyttöönoton myötä vuonna 2022 painopiste on siirtynyt pelkästä sivun latausnopeudesta laajempaan verkkosuorituskykyyn. INP ei ainoastaan mittaa kuinka nopeasti sivu latautuu, vaan myös kuinka nopeasti käyttäjän vuorovaikutus sivulla käsitellään. Pohjimmiltaan se muuttaa sivuston navigointikokemuksen sivunopeusmittariksi.
Keremin blogissa, termiä "Yleinen vuorovaikutusviive" ehdotetaan sopivaksi tähän konseptiin, jota Google myös selittää hyvin omassa videossaan. Ymmärtääksemme tämän mittarin täysin, perehdymme aiheeseen tarkemmin seuraavissa osissa.
Mikä on INP-keston selitys?
INP:n kesto sisältää:
- Aika, joka kuluu käyttäjän vuorovaikutuksesta sivun kanssa tapahtumakäsittelijän suorittamiseen.
- Käsikirjoituksen suoritusaika.
- Aika koodin suorittamisesta tulosteen näyttämiseen käyttäjälle.
Nämä prosessit tapahtuvat tyypillisesti millisekunnissa, mutta mobiililaitteissa, erityisesti vanhemmissa Android-puhelimissa, joissa on alhainen prosessoriteho, tällaiset viiveet (latenssi) voivat usein olla havaittavissa. On syytä huomata, että INP-tiedot, kuten muutkin Lighthouse-tiedot, kerätään anonyymisti ja arvioidaan 75. prosenttipiste. Siksi tavoitteena on luoda sovelluksia, jotka toimivat hyvin tavallisilla laitteilla, ei vain huippuluokan laitteilla.
Tosielämän esimerkkejä INP-kestosta
Tässä on joitain tosielämän esimerkkejä Internet-sivuilta, joilla vierailemme päivittäin selittääksemme tätä käsitettä:
Osoitteen syöttäminen verkkokauppasivustolle
Kun teet ostoksia verkkokauppasivustolla ja annat lähetysosoitteen, valitse ensin maakunta. Sitten, kun napsautat valintaruutua valitaksesi piirin, odotat jonkin aikaa Ajax-tuloksen latautumista, ja tietyn ajan kuluttua piirin tiedot ladataan. Tämä on hyvä esimerkki INP:stä. Tämän esimerkin käyttökokemuksen parantaminen voi sisältää "latausilmaisimen" lisäämisen, joka ilmoittaa käyttäjälle Ajax-prosessista.
Lajitteluvalinta
Käytettäessä suodattimia tuotelistaussivuilla, jos suodatettuja tuotteita ei hallita oikein valintaruudun painamisen jälkeen, se lisää INP:tä. Vähemmän monimutkaisen JS:n käyttäminen ja käyttäjäkokemuksen huomioon ottaminen suodatintoimintojen aikana voi auttaa pitämään INP-arvon mahdollisimman korkeana.
Tuotekuvagalleria
Aika, jonka käyttäjät odottavat kuvagallerian latautumista napsautettuaan tuotekuvaa tuotetietosivuilla, voi mahdollisesti vaikuttaa INP:hen.
Varauspainike
Vuorovaikutusviive "Tee varaus" -painikkeen napsautuksen ja seuraavan sivun välillä on esimerkki INP:stä.
Lisää ostoskoriin -painike
Millisekunnin viive, kun napsautat "Lisää ostoskoriin" -painiketta ja mietit, onko tuote lisätty ostoskoriin vai ei, määrittelee täydellisesti INP:n.
Kuten näissä esimerkeissä näkyy, INP-ansoja esiintyy skenaarioissa, jotka vaikuttavat sekä hakukoneoptimointiin että suoriin muuntoprosentteihin.
Kuinka parantaa INP:tä?
- Käytä ajantasaisia JS-käyttöliittymäkirjastoja: Suorituskyvyn parantaminen käyttämällä nykyaikaisia JS-käyttöliittymäkirjastoja, kuten Vue, React ja Angular, on hyödyllistä, koska ne tarjoavat suorituskyvyn ja uudelleenkäytettävyyden etuja.
- Minimoi JS-kirjastojen monimutkaisuus: On suositeltavaa käyttää vähemmän monimutkaisia JS-kirjastoja. Henkilökohtaisesti suosittelen välttämään jQueryä niin paljon kuin mahdollista.
Hyväksyttävät INP-metritasot
Kynnysarvot kohteelle hyvät, keskisuuret ja huonot INP-tasot ovat 200 millisekuntia ja 500 millisekuntia. INP:n pitäminen näiden kynnysarvojen alapuolella on ratkaisevan tärkeää hyvän käyttökokemuksen ja yleisen verkon suorituskyvyn ylläpitämiseksi.
