Total Blocking Time(TBT)

Long definition

TBT quantifies main-thread blocking — the gap between "page looks ready" and "page actually responds". For each task longer than 50ms running between FCP and TTI, TBT adds the portion above 50ms. A 200ms task contributes 150ms to TBT. Five 80ms tasks contribute 150ms total. The threshold maps to the 50ms input-response budget the browser needs to feel responsive.

The metric exists because INP cannot be measured in lab — INP needs real user interactions across a session, and Lighthouse runs in a sandboxed snapshot. TBT is the synthetic stand-in: optimize TBT in Lighthouse and PageSpeed Insights lab data, and INP in field tends to follow. The correlation isn't perfect — TBT misses interactions after TTI, and INP can suffer from late-loading event handlers TBT never sees — but it's the best lab signal available.

Google's TBT thresholds on web.dev:

• Good — under 200ms
• Needs improvement — 200ms to 600ms
• Poor — above 600ms

TBT is weighted 30% of the Lighthouse performance score (v10+), the heaviest single contributor. Bad TBT alone can drop a 95 to a 60.

The standard interventions: code-split bundles so initial JS is small, defer non-critical scripts, replace heavy third-party tags with lighter alternatives or load them after interaction, break up long tasks with scheduler.yield() or requestIdleCallback, and audit framework hydration costs (React, Vue, Svelte all have hydration patterns that produce 100-300ms bursts).

Common misconceptions

• "TBT measures total JavaScript time." It measures only the blocking portion above 50ms per task. A page with 2 seconds of JavaScript split into 40ms tasks has zero TBT. Same JS in one 2000ms task contributes 1950ms.
• "TBT and TTI mean the same thing." TTI is a single readiness threshold (a moment in time). TBT is a sum of blocking time within a window. You can have low TBT and high TTI, or vice versa, depending on task distribution.
• "Server-side rendering fixes TBT." SSR fixes LCP and FCP by delivering HTML faster. TBT is about hydration and post-load script execution — SSR can actually make TBT worse if hydration costs spike on a page that previously rendered client-side over a longer window.