A TBT (Total Blocking Time) az az összesített idő, amíg a böngésző fő szála hosszú feladatokkal van elfoglalva, és nem tud válaszolni a felhasználó kattintására. A mérés a First Contentful Paint és a interaktívvá válás között zajlik: minden 50 ezredmásodpercnél hosszabb feladatból az 50 ms feletti részt számolja össze.
Hogyan működik
A JavaScript egy szálon fut. Amíg egy szkript dolgozik, a böngésző nem tud mást csinálni. Nem reagál kattintásra, nem futtat animációt, nem rajzol újra.
Ha egy feladat 180 ms-ig tart, abból 130 ms számít blokkoló időnek. Ha öt ilyen feladat van egymás után, az már 650 ms TBT. A Lighthouse ezt méri labor-környezetben, szimulált lassítással.
Mik a küszöbök
A Lighthouse pontozása mobil emulációval dolgozik. A határok:
- 0-200 ms: zöld, jó
- 200-600 ms: narancs, javításra szorul
- 600 ms felett: piros, gyenge
A TBT a Lighthouse teljesítmény-pontszám 30%-át adja. Egyetlen metrika sem nyom ennyit a latba.
Mi a kapcsolata az INP-vel
A TBT labor-metrika, az INP (Interaction to Next Paint) mezei metrika. A TBT azt méri, mennyire lenne akadozó az oldal, az INP azt, mennyire volt akadozó valódi felhasználóknál.
A kettő között erős, de nem tökéletes az összefüggés. A riportokban rendszeresen látunk 700 ms TBT mellett elfogadható INP-t. Ez akkor fordul elő, ha a felhasználó nem az első két másodpercben kattint. Fordítva ritkább: magas TBT mellett a rossz INP inkább szabály, mint kivétel.
Miért számít a generatív keresőknek
A nyelvi modellek crawlerei nem kattintanak. Számukra a TBT közvetlenül nem releváns. Közvetve viszont igen: ami blokkolja a fő szálat, az általában sok JavaScript, és a sok JavaScript gyakran kliensoldalon renderelt tartalmat jelent. Az AI-crawlerek többsége nem futtat JavaScriptet.
Röviden: a TBT azt mutatja meg, mennyi ideig halott az oldalad, miközben a felhasználó már látja.
Miért fontos
Felhasználói oldalról
A magas TBT a legfrusztrálóbb hibatípus. Az oldal kirajzolódik, a gomb látszik, a felhasználó rákattint, és nem történik semmi. Sokan kétszer-háromszor is kattintanak. Webshopban ez duplikált kosárba tételt vagy dupla megrendelést okoz.
Rangsorolási hatás
A Core Web Vitals része az INP (Interaction to Next Paint), nem a TBT. A TBT viszont a legjobb labor-előrejelzője az INP-nek. Ha a TBT-t leviszed, az INP is javul.
A rangsorolásban az élmény-jelek nem döntőek. Hasonló tartalmi erősségű oldalak között viszont számítanak.
Üzleti következmény
A magas TBT jellemzően sok harmadik féltől származó szkriptből jön. Ezek mérnek, követnek, personalizálnak. A magyar KKV-oldalak többségén öt-tíz ilyen szkript fut egyszerre, és a felét senki nem nézi meg soha.
A Google Tag Manager konténerekben találtunk már olyan címkét, amit három éve leállított kampányhoz raktak be. Még mindig töltődött.
Technikai példa
Long task-ok kilistázása a konzolban. Illeszd be a devtools Console fülébe, majd tölts újra:
<script>
const obs = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const blocking = Math.max(0, entry.duration - 50);
console.log(`Long task: ${Math.round(entry.duration)}ms, blokkol: ${Math.round(blocking)}ms`);
}
});
obs.observe({ type: 'longtask', buffered: true });
</script>
A kiírt blokkoló értékek összege nagyjából a TBT-d. A buffered: true visszamenőleg is megmutatja a már lefutott feladatokat.
Nehéz szkript késleltetése az első interakcióig:
<script>
const events = ['scroll', 'mousemove', 'touchstart', 'keydown'];
const load = () => {
const s = document.createElement('script');
s.src = 'https://widget.pelda.hu/chat.js';
document.body.appendChild(s);
events.forEach((e) => window.removeEventListener(e, load));
};
events.forEach((e) => window.addEventListener(e, load, { once: true, passive: true }));
</script>
A chat-widget csak akkor töltődik, ha a látogató tényleg csinál valamit. A TBT-mérési ablakba így nem esik bele.
Lighthouse futtatása parancssorból, csak a teljesítmény-kategóriára:
npx lighthouse https://pelda.hu \
--only-categories=performance \
--form-factor=mobile \
--output=json \
--output-path=./riport.json
A JSON-ban az audits['total-blocking-time'].numericValue adja az ezredmásodpercben mért értéket.
