INP, valódi látogatók

Az INP (Interaction to Next Paint) azt méri, mennyi idő telik el a látogató kattintása, érintése vagy billentyűleütése és a következő képkocka megjelenése között, az egész látogatás során. Lassú INP-nél az oldal “nem reagál”, a gomb nyomása után hosszan nem történik semmi. A Core Web Vitals része.

Valódi látogatók és labor

Az INP csak valódi látogatói adatból mérhető jól: laborban nem tudható, mikor és mire kattint a látogató. A laborban ennek helyettesítője a TBT (Labor-TBT), de a kettő eltérhet. A CrUX-adat a Chrome azon felhasználóié, akik engedélyezték az adatgyűjtést, 28 napos gördülő időszakra összesítve, a 75. percentilissel. Csak Chrome-ból jön (iOS-es Chrome, Android WebView és más Chromium-böngészők nem járulnak hozzá), és a javítás hatása csak lassan épül be.

Hogyan mérjük

A riport a Chrome UX Report API-t kérdezi le a megadott cím origin-jére (az egész webhelyre): előbb a telefonos adatot, ha nincs, az összes eszközét.

• Megfelelő: a 75. percentilis 200 ms vagy kevesebb.
• Hiba, közepes súlyosság: 200 ms felett, 500 ms-ig.
• Hiba, magas súlyosság: 500 ms felett. Ilyenkor a riport részletes kártyát is ad: Hosszú feladatok felbontása (INP).
• Nem mérhető: nincs API-kulcs, nincs elég adat, az INP hiányzik a válaszból, vagy hiba volt.

A web.dev határai: jó 200 ms vagy kevesebb, javítandó 200-500 ms, gyenge 500 ms felett. A riport egyezik.

Hogyan javítsd

A web.dev az INP három részét különbözteti meg: a bemeneti késleltetést, a feldolgozási időt és a megjelenítési késleltetést.

1. Bemeneti késleltetés: csökkentsd a főszál terhelését, különösen a betöltéskori szkriptfuttatást. Töröld vagy halaszd a nehéz (főleg harmadik féltől származó) szkripteket.
2. Feldolgozási idő: tartsd rövidre az eseménykezelőket. Ami nem sürgős, azt a kattintás látható hatása után végezd el.
3. Hosszú feladatok felbontása: hosszú ciklusokban időnként add vissza a vezérlést a böngészőnek.
4. Megjelenítési késleltetés: kisebb DOM, a képernyőn kívüli részeknél content-visibility, és ne állíts elő nagy mennyiségű HTML-t JavaScripttel.

JavaScript

JavaScript

function yieldToMain() {
  if (globalThis.scheduler?.yield) {
    return scheduler.yield();
  }
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

Hosszú ciklusban hívd meg: await yieldToMain();, így a böngésző közben reagálhat a kattintásra. A scheduler.yield() nem minden böngészőben érhető el (a web.dev szerint Chrome és Edge 129, Firefox 142 óta; Safari nem támogatja), ezért a setTimeout tartalék kell.

A teljes útmutató: Hosszú feladatok felbontása (INP).

Hogyan ellenőrizd

• A CrUX 28 napos gördülő időszakot használ, ezért a javulás hetek alatt jelenik meg a riportban.
• Gyors visszajelzéshez a Chrome fejlesztői eszközeinek Performance paneljén rögzíts egy kattintást, és nézd a hosszú feladatokat; a laborban a Labor-TBT csökkenése a jó jel.
• PageSpeed Insights: a valódi látogatók INP-értékét mutatja.