# Hosszú feladatok felbontása (INP)

> Lépésenkénti útmutató, ha az oldal 500 ms-nál lassabban reagál a kattintásra: hosszú feladatok felbontása, a vezérlés visszaadása a böngészőnek.

Ezt a javítási kártyát a riport akkor adja, ha a valódi látogatók INP-értéke (75. percentilis) az 500 ms-os "gyenge" határ fölött van. Az INP azt méri, mennyi idő telik el a kattintás, érintés vagy billentyű és a következő képkocka megjelenése között. Ha a böngésző addig egy hosszú szkriptet futtat, nem tud reagálni.

## Valódi látogatók és labor

A kártya csak a valódi látogatói adatból (CrUX, 28 nap, 75. percentilis) indul ki: [INP, valódi látogatók](https://hub.hellowp.io/hu/report/teljesitmeny/inp-valodi-latogatok/). Laborban az INP nem mérhető jól, mert nem tudható, mikor kattint a látogató; a labor helyettesítője a [Labor-TBT](https://hub.hellowp.io/hu/report/teljesitmeny/labor-tbt/), de a kettő eltérhet.

## Hogyan mérjük

A kártya akkor jelenik meg, ha az INP szigorúan nagyobb 500 ms-nál. Magas súlyosságú. A kódrészlet ugyanaz, mint az INP-teszté; a kártya megjelenésekor a kód csak itt marad, hogy ne ismétlődjön.

## Hogyan javítsd

1. **Keresd meg a hosszú feladatokat.** A Chrome fejlesztői eszközeiben rögzíts egy Performance-felvételt, és közben végezz el egy lassú interakciót. A hosszú feladatok (50 ms fölöttiek) szürke "Task" sávok; a Bottom-Up fülön, "Group by Activity" nézetben látod, mi viszi el az időt.
2. **Töröld a fölösleges és harmadik féltől származó szkripteket,** vagy halaszd őket (`defer`, `async`).
3. **Bontsd fel a hosszú feladatot.** Hosszú ciklusban időnként adj vissza a vezérlést a böngészőnek, így az közben feldolgozhatja a kattintást.
4. **Először jelenítsd meg a látható választ,** és csak utána végezd el a nem sürgős munkát (mentés, számolás, elemzés). Például a beírt szöveg frissítése előbb, a szószámlálás utána.
5. **Ne olvasd és írd váltogatva a stílusokat egy feladaton belül** (layout thrashing).
6. **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);
  });
}

async function runJobs(jobQueue) {
  for (const job of jobQueue) {
    job();
    await yieldToMain();
  }
}
```

- Hosszú ciklusban hívd meg: `await yieldToMain();`, így a böngésző közben reagálhat a kattintásra.
- Az `await` kötelező, mert a hívás csak ütemezi a következő feladatot. `Array.prototype.forEach`-et ne használj, mert nem várja meg az aszinkron visszahívásokat.
- 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). Ahol hiányzik, a `setTimeout` tartalék is visszaadja a vezérlést, de a folytatás nem kap előnyt az ütemezésben.

## Hogyan ellenőrizd

- A Performance panelen a hosszú feladatok rövidebbek legyenek, és a kattintás utáni képkocka hamarabb jelenjen meg.
- A laborban a [Labor-TBT](https://hub.hellowp.io/hu/report/teljesitmeny/labor-tbt/) csökkenése jó jel.
- A valódi hatás a CrUX-ban jelenik meg, 28 napos gördülő időszakban, ezért hetek alatt látszik: [INP, valódi látogatók](https://hub.hellowp.io/hu/report/teljesitmeny/inp-valodi-latogatok/). A [PageSpeed Insights](https://hub.hellowp.io/hu/knowledge-base/useful-tools/pagespeed-insights/) is mutatja.