Hosszú feladatok felbontása (INP)

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. Laborban az INP nem mérhető jól, mert nem tudható, mikor kattint a látogató; a labor helyettesítője a 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

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 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. A PageSpeed Insights is mutatja.