# Labor-TBT

> A betöltés közben a főszálat blokkoló idő (TBT) laborban mérve; 200 ms alatt jó, 600 ms fölött súlyos hiba.

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](https://hub.hellowp.io/hu/report/teljesitmeny/inp-valodi-latogatok/). 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](https://hub.hellowp.io/hu/report/teljesitmeny/renderelest-blokkolo-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](https://hub.hellowp.io/hu/report/teljesitmeny/hosszu-feladatok-felbontasa-inp/).
5. Csökkentsd a szkriptek számát és méretét: [Szkriptek száma](https://hub.hellowp.io/hu/report/teljesitmeny/szkriptek-szama/), [Oldalsúly](https://hub.hellowp.io/hu/report/teljesitmeny/oldalsuly/).

### 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.

## 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](https://hub.hellowp.io/hu/knowledge-base/useful-tools/pagespeed-insights/) jelentése is mutatja a TBT-t. A valódi hatást az [INP, valódi látogatók](https://hub.hellowp.io/hu/report/teljesitmeny/inp-valodi-latogatok/) teszt mutatja majd.