Interaction to Next Paint (INP) az új Google rangsorolási tényező!
Az Interaction to Next Paint (INP) egy függőben lévő Core Web Vital mérőszám, amely 2024 márciusában felváltja az első beviteli késleltetést (FID). Az INP az Event Timing API adatai alapján értékeli a reakciókészséget.
Ha egy interakció miatt az oldal lefagy, az rossz felhasználói élményt jelent. Az INP megfigyeli a felhasználó által az oldallal végzett összes interakció látenciáját, és egyetlen értéket jelent, amely alatt az összes (vagy majdnem minden) interakció alatt volt. Az alacsony INP azt jelenti, hogy az oldal folyamatosan képes volt gyorsan reagálni a felhasználói interakciók összességére – vagy túlnyomó többségére.
A Chrome használati adatai azt mutatják, hogy a felhasználó az oldalon töltött idejének 90%-át a betöltés után tölti, ezért fontos a válaszkészség gondos mérése az oldal életciklusa során . Ezt értékeli az INP mérőszáma.
A jó válaszkészség azt jelenti, hogy az oldal gyorsan reagál a vele végzett interakciókra. Amikor egy oldal reagál egy interakcióra, az eredmény vizuális visszajelzés , amelyet a böngésző a következő képkockában jelenít meg. A vizuális visszajelzés tájékoztat arról, hogy például egy, az online bevásárlókosárba helyezett tétel valóban felkerül-e, megnyílt-e a mobil navigációs menü, hogy a bejelentkezési űrlap tartalmát a szerver hitelesíti-e, és így tovább.
Egyes interakciók természetesen tovább tartanak, mint mások, de különösen összetett interakciók esetén fontos, hogy gyorsan mutassunk be kezdeti vizuális visszajelzést a felhasználónak, hogy valami történik . A következő festésig eltelt idő a legkorábbi lehetőség erre. Ezért az INP célja nem az interakció összes lehetséges hatásának mérése (például hálózati lekérések és más aszinkron műveletekből származó felhasználói felület frissítései), hanem azt az időpontot, amikor a következő festés blokkolva van. A vizuális visszajelzés késleltetésével azt a benyomást keltheti a felhasználókban, hogy az oldal nem reagál a tevékenységeikre.
Az INP célja annak biztosítása, hogy a felhasználó interakciójának megkezdésétől a következő képkocka festéséig a lehető legrövidebb idő teljen el a felhasználó által végzett összes vagy legtöbb interakció esetében.
A következő videóban a jobb oldali példa azonnali vizuális visszajelzést ad arról, hogy egy harmonika nyílik. Azt is bemutatja, hogy a gyenge válaszkészség hogyan okozhat többszörös nem kívánt választ a bemenetre, mivel a felhasználó úgy gondolja, hogy az élmény megszakadt.
Ez a cikk elmagyarázza, hogyan működik az INP, hogyan mérhető, és rámutat a javítására szolgáló forrásokra.
Mi az INP?
Az INP egy olyan mérőszám, amely felméri az oldal általános reagálását a felhasználói interakciókra azáltal, hogy megfigyeli az összes kattintás, koppintás és billentyűzet interakciójának késleltetését, amely a felhasználó oldallátogatásának élettartama során előfordul. A végső INP érték a leghosszabb megfigyelt interakció, figyelmen kívül hagyva a kiugró értékeket.
Megjegyzés az INP kiszámításáról
Ahogy fentebb említettük, az INP kiszámítása az oldallal végzett összes interakció megfigyelésével történik. A legtöbb webhely esetében a legrosszabb késleltetésű interakciót INP-ként jelentik. A nagyszámú interakciót tartalmazó oldalak esetében azonban a véletlenszerű akadozás szokatlanul magas interakciót eredményezhet egy egyébként reszponzív webhelyen. Minél több interakció, annál valószínűbb, hogy ez megtörténik.
Ennek ellensúlyozása és az ilyen típusú oldalak tényleges reagálási képességének jobb mérése érdekében figyelmen kívül hagyjuk a legnagyobb interakciót minden 50 interakció után.
Az oldalélmények túlnyomó többsége nem haladja meg az 50 interakciót, így a legrosszabb interakciót jelenti. Ezután a szokásos módon az összes oldalmegtekintés 75. percentilisét jelenti a rendszer, ami tovább távolítja el a kiugró értékeket, hogy olyan értéket adjon, amelyet a felhasználók túlnyomó többsége tapasztal, vagy jobb.
Az interakció eseménykezelők csoportja, amelyek ugyanazon logikai felhasználói kézmozdulat során aktiválódnak. Például egy érintőképernyős eszköz „érintéses” műveletei több eseményt is tartalmaznak, például pointerup, pointerdownes click. Az interakciót JavaScript, CSS, beépített böngészővezérlők (például űrlapelemek) vagy ezek kombinációja hajthatja végre.
Az interakció késleltetése az interakciót irányító eseménykezelők csoportjának egyetlen leghosszabb időtartamából áll, attól az időponttól kezdve, amikor a felhasználó elkezdi az interakciót a következő képkocka vizuális visszajelzésének pillanatáig.
Mi a jó INP pontszám?
Az olyan címkék rögzítése, mint a „jó” vagy a „gyenge”, nehézkes a reagálási mutatókon. Egyrészt olyan fejlesztési gyakorlatokat szeretne ösztönözni, amelyek előtérbe helyezik a jó reakciókészséget. Másrészt számolnia kell azzal a ténnyel, hogy jelentős eltérések vannak azon eszközök képességei között, amelyeket az emberek az elérhető fejlesztési elvárások meghatározásához használnak.
Annak érdekében, hogy a felhasználói élményt jó reakciókészséggel biztosítsa, jó mérhető küszöb az oldalbetöltések terepen rögzített 75. százaléka , mobil és asztali eszközök között szegmentálva:
- A 200 ezredmásodperc alatti vagy kisebb INP azt jelenti, hogy az oldal jó reagálóképességgel rendelkezik .
- A 200 ezredmásodperc feletti és az 500 ezredmásodperc alatti vagy kisebb INP azt jelenti, hogy az oldal reagálóképességét javítani kell .
- Az 500 ezredmásodperc feletti INP azt jelenti, hogy az oldal gyenge reakcióképességű .
Mi az interakció?
Egy interakció élete. Bemeneti késleltetés következik be, amíg az eseménykezelők el nem kezdenek futni, amit olyan tényezők okozhatnak, mint például a főszálon lévő hosszú feladatok. Ezután az interakció eseménykezelői futnak, és a következő képkocka megjelenítése előtt késleltetés következik be.
Az interaktivitás elsődleges mozgatórugója gyakran a JavaScript, bár a böngészők interaktivitást biztosítanak a nem JavaScript által működtetett vezérlőkkel, például jelölőnégyzetekkel, rádiógombokkal és CSS-alapú vezérlőkkel.
Ami az INP-t illeti, csak a következő interakciótípusok figyelhetők meg:
- Kattintás egérrel.
- Érintőképernyős eszköz érintése.
- Egy billentyű lenyomása a fizikai vagy a képernyő-billentyűzeten.
Az interakciók a fő dokumentumban vagy a dokumentumba ágyazott iframe-ekben történnek – például egy beágyazott videón a Lejátszás gombra kattintva. A végfelhasználók nem lesznek tisztában azzal, hogy mi van az iframe-ben vagy sem.
Ezért az iframe-eken belüli INP-re van szükség a legfelső szintű oldal felhasználói élményének méréséhez. Megjegyzés A JavaScript webes API-k nem férhetnek hozzá az iframe tartalmához, így előfordulhat, hogy nem tudják mérni az INP-t egy iframe-en belül, és ez a CrUX és a RUM közötti különbségként jelenik meg . Az interakciók két részből állhatnak, amelyek mindegyike több eseményt tartalmaz. Például egy billentyűleütés a keydown, keypress, keyup eseményekből áll.
Érintse meg az interakciókat pointerup és pointerdown eseményeket. Az interakción belül a leghosszabb időtartamú esemény kerül kiválasztásra az interakció késleltetéseként. Az INP-t a rendszer akkor számítja ki, amikor a felhasználó elhagyja az oldalt, és egyetlen értéket kap, amely reprezentálja az oldal általános válaszkészségét az oldal teljes életciklusa során. Az alacsony INP azt jelenti, hogy az oldal megbízhatóan reagál a felhasználói bevitelre.
Miben különbözik az INP az első beviteli késleltetéstől (FID)?
Ahol az INP az összes oldal interakciót figyelembe veszi, az első beviteli késleltetés (FID) csak az első interakciót veszi figyelembe. Ezenkívül csak az első interakció bemeneti késleltetését méri , az eseménykezelők futtatásához szükséges időt vagy a következő képkocka megjelenítésének késleltetését nem.
Tekintettel arra, hogy a FID egyben a betöltésre reagáló mérőszám is, az az indoklás, hogy ha a betöltési fázisban az oldallal végzett első interakciónak alig vagy egyáltalán nincs érzékelhető beviteli késleltetése, az oldal jó első benyomást keltett.
Az INP több, mint az első benyomás. Az összes interakció mintavételével a válaszkészség átfogóan értékelhető, így az INP megbízhatóbb mutatója az általános válaszkészségnek, mint a FID.
Mi a teendő, ha nincs INP érték?
Lehetséges, hogy egy oldal nem tud INP értéket visszaadni. Ennek számos oka lehet:
- Az oldal betöltődött, de a felhasználó soha nem kattintott, nem koppintott vagy nem nyomott meg egy billentyűt sem a billentyűzetén.
- Az oldal betöltődött, de a felhasználó olyan kézmozdulatokkal lép kapcsolatba az oldallal, amelyek nem igényeltek kattintást, koppintást vagy billentyűzetet. Például az elemek görgetése vagy rámutatása nem befolyásolja az INP kiszámításának módját.
- Az oldalt olyan bot éri el, például keresőrobot vagy fej nélküli böngésző, amelynek nincs szkriptje az oldallal való interakcióhoz.
