# INP, valódi látogatók

> Az oldal reakcióideje kattintásra és érintésre a valódi Chrome-látogatóknál (CrUX, 28 nap, 75. percentilis); 200 ms alatt jó.

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](https://hub.hellowp.io/hu/report/teljesitmeny/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)](https://hub.hellowp.io/hu/report/teljesitmeny/hosszu-feladatok-felbontasa-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

```js title="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)](https://hub.hellowp.io/hu/report/teljesitmeny/hosszu-feladatok-felbontasa-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](https://hub.hellowp.io/hu/report/teljesitmeny/labor-tbt/) csökkenése a jó jel.
- [PageSpeed Insights](https://hub.hellowp.io/hu/knowledge-base/useful-tools/pagespeed-insights/): a valódi látogatók INP-értékét mutatja.