TBT (Total Blocking Time) is a lab metric that measures how long the main thread was blocked after First Contentful Paint (FCP). It quantifies how non-interactive a page is during loading by summing up all blocking portions of long tasks.
How TBT Works
The browser's main thread handles rendering, JavaScript execution, and user input. When a task runs longer than 50 milliseconds, any time beyond that threshold counts as blocking time. TBT adds up all these blocking portions between FCP and .
For example, if a page has three tasks taking 30ms, 100ms, and 70ms, the blocking time would be: 0ms (under threshold) + 50ms (100-50) + 20ms (70-50) = 70ms total.
TBT Thresholds
Lighthouse uses these thresholds for TBT scores:
- Good: Under 200 milliseconds
- Needs Improvement: Between 200 and 600 milliseconds
- Poor: Over 600 milliseconds
TBT accounts for 30% of the Lighthouse Performance score, making it the single largest contributing factor.
Relationship to INP
While TBT is a lab metric measured during page load, it serves as a proxy for INP (), which measures real user interactions. Pages with low TBT typically also have good INP scores because fewer long tasks mean faster response to user input.
Common Causes and Solutions
Heavy JavaScript execution: Large bundles or inefficient code create long tasks. Break up long-running JavaScript into smaller chunks using code splitting or defer non-critical scripts.
: Analytics, ads, and widgets often add blocking time. Load third-party scripts asynchronously or delay them until after the main content loads.
Unoptimized rendering: Complex DOM manipulations during load block the thread. Minimize DOM size and avoid layout thrashing by batching DOM updates.
