A Google Pagespeed struktúrája, amelyet már évek óta megszoktunk, arra épül, hogy biztosítsa a webhelyek gyors betöltését és kiszolgálását. Mérhető paraméterek előállításával és a Chrome piaci részesedéséből gyűjtött anonim adatok felhasználásával a Google ezeket a mutatókat SEO mutatóként használja. Az Interaction to Next Paint (INP) 2022-es bevezetésével a hangsúly az egyszerű oldalbetöltési sebességről a szélesebb internetes teljesítményre helyeződött át. Az INP nemcsak azt méri, hogy milyen gyorsan töltődik be az oldal, hanem azt is, hogy milyen gyorsan dolgozzák fel a felhasználói interakciókat az oldalon. Lényegében a webhely navigációs élményét oldalsebesség-mutatóvá változtatja.
Kerem blogján, az "Általános interakciós késleltetés" kifejezést javasolják ehhez a fogalomhoz, amit a Google is jól elmagyaráz saját videójában. Ennek a mutatónak a teljes megértése érdekében azonban a következő szakaszokban mélyebbre ásunk a témában.
Mi az INP időtartamának magyarázata?
Az INP időtartama a következőket tartalmazza:
- A felhasználónak az oldallal való interakciója és az eseménykezelő végrehajtása között eltelt idő.
- A forgatókönyv végrehajtási ideje.
- A kód végrehajtásától a kimenetnek a felhasználó számára történő megjelenítéséig eltelt idő.
Ezek a folyamatok általában ezredmásodperceken belül zajlanak le, de a mobileszközökön, különösen a régebbi, alacsony CPU-teljesítményű Android telefonokon, az ilyen késések (latencia) gyakran észrevehetők. Érdemes megjegyezni, hogy az INP-adatokat, más Lighthouse-adatokhoz hasonlóan, névtelenül gyűjtik, és a 75. százalék. Ezért a cél olyan alkalmazások létrehozása, amelyek jól teljesítenek az átlagos eszközökön, nem pedig csak a csúcskategóriás eszközökön.
Példák valós életből az INP időtartamára
Íme néhány valós példa azokról az internetes oldalakról, amelyeket naponta felkeresünk ennek a koncepciónak a magyarázatára:
Cím megadása egy e-kereskedelmi webhelyen
Amikor egy e-kereskedelmi webhelyen vásárol, és megadja a szállítási címet, először válassza ki a tartományt. Ezután, amikor a kijelölőnégyzetre kattint a körzet kiválasztásához, vár egy ideig, amíg betöltődik az Ajax eredménye, majd egy bizonyos idő elteltével betöltődik a körzet információja. Ez egy jó példa az INP-re. Ebben a példában a felhasználói élmény javítása magában foglalhatja egy „betöltési jelző” hozzáadását, amely tájékoztatja a felhasználót az Ajax folyamatról.
Válogatás rendezése
Ha szűrőket használ a terméklista oldalain, ha a szűrt termékeket nem kezeli megfelelően egy jelölőnégyzet bejelölése után, az növeli az INP-t. A kevésbé összetett JS használata és a felhasználói élmény figyelembe vétele a szűrőműveletek során segíthet az INP értékének a lehető legmagasabb szinten tartásában.
Termék fotógalériák
Az az idő, ameddig a felhasználók várnak a fotógaléria betöltésére, miután egy termékfotóra kattintottak a termékrészletező oldalakon, potenciálisan befolyásolhatja az INP-t.
Foglalás gomb
A „Foglalás készítése” gombra kattintás és a következő oldal közötti interakciós késleltetés egy példa az INP-re.
Kosárba helyezés gomb
Az ezredmásodpercek késleltetése, amikor a „Kosárba helyezés” gombra kattint, és kíváncsi, hogy az árut a kosárba adták-e vagy sem, tökéletesen meghatározza az INP-t.
Amint az ezekben a példákban látható, az INP-csapdák jelen vannak a keresőoptimalizálási és a közvetlen konverziós arányokat egyaránt érintő forgatókönyvekben.
Hogyan javítható az INP?
- Használjon naprakész JS Frontend könyvtárakat: A teljesítmény javítása a modern JS frontend könyvtárak, például a Vue, a React és az Angular használatával előnyös, mivel teljesítmény és újrafelhasználhatósági előnyöket kínálnak.
- Minimalizálja a JS-könyvtárak összetettségét: Kevésbé összetett JS-könyvtárak használata javasolt. Személy szerint azt javaslom, hogy a lehető legnagyobb mértékben kerülje a jQuery-t.
Elfogadható INP-metrikus szintek
A küszöbértékek a a jó, közepes és gyenge INP szint 200 ezredmásodperc és 500 ezredmásodperc. Az INP e küszöbértékek alatt tartása kulcsfontosságú a jó felhasználói élmény és az általános webes teljesítmény fenntartásához.
