Labor-TBT

A TBT (Total Blocking Time) azt méri, mennyi ideig volt a böngésző főszála annyira lefoglalt a betöltés közben, hogy nem tudott reagálni a látogató kattintására. Minden 50 ms-nál hosszabb feladat esetén a 50 ms feletti rész számít blokkolásnak, ezeket adja össze a mutató. A TBT a lassan reagáló oldal laborban mérhető előjele.

Labor és valódi látogatók

A TBT nem Core Web Vital, és a web.dev szerint laborban kell mérni: a valódi látogatóknál a felhasználói viselkedés túl nagy szórást okozna. A valódi látogatók reakcióidejét az INP mutatja: INP, valódi látogatók. A web.dev a TBT-t az INP laborbeli helyettesítőjének tartja, de a kettő eltérhet: a labor nem tudja, mikor kattint a valódi látogató.

Hogyan mérjük

A riport mobilnak emulált Chrome-ban betölti az oldalt, és a Lighthouse total-blocking-time értékét veszi (egyetlen futás, szimulált mobil hálózattal és 4-szeres processzor-lassítással).

• Megfelelő: 200 ms vagy kevesebb.
• Hiba, közepes súlyosság: 200 ms felett, 600 ms-ig.
• Hiba, magas súlyosság: 600 ms felett.
• Nem mérhető: nincs érték, vagy csonka volt a betöltés.

Ezek egyeznek a Lighthouse mobilra megadott sávjaival (jó 0-200 ms, javítandó 200-600 ms, gyenge 600 ms felett). Asztali nézetre a Lighthouse szigorúbb (150 és 350 ms), de a riport mobilt mér.

Hogyan javítsd

1. Találd meg a hosszú feladatokat: a Chrome fejlesztői eszközeinek Performance paneljén rögzíts betöltést; a hosszú feladatok szürke “Task” sávok. A Bottom-Up fülön látod, melyik tevékenység viszi el az időt.
2. Töröld a fölösleges szkripteket, főleg a harmadik féltől valókat, amelyekre nincs szükség.
3. Halaszd a nem sürgőset: defer vagy async a szkripteken (lásd: Renderelést blokkoló szkriptek), és a nem azonnal kellő munkát indítsd a betöltés után.
4. Bontsd fel a hosszú feladatokat, és időnként add vissza a vezérlést a böngészőnek. Lásd az alábbi mintát és a részletes kártyát.
5. Csökkentsd a szkriptek számát és méretét: Szkriptek száma, Oldalsúly.

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.

Hogyan ellenőrizd

• Futtasd újra a riportot; két-három mérés átlagát nézd, mert a TBT futásról futásra ingadozik.
• A Performance panelen a hosszú feladatok száma és hossza csökkenjen.
• A PageSpeed Insights jelentése is mutatja a TBT-t. A valódi hatást az INP, valódi látogatók teszt mutatja majd.