Total Blocking Time
Definition
The total time the page is blocked from responding to user input during loading, measured between FCP and Time to Interactive.
What is Total Blocking Time?
Total Blocking Time (TBT) measures how long the page is unresponsive to user input during loading. It calculates the time between First Contentful Paint (when content appears) and Time to Interactive (when the page reliably responds).
During this period, the browser may be busy executing JavaScript, leaving users frustrated when clicks and taps don't work.
Why TBT Matters
Lab Proxy for INP
TBT is a lab metric that correlates with real-world Interaction to Next Paint. Improving TBT typically improves actual user interactivity.
User Frustration
Nothing annoys users more than a page that looks ready but doesn't respond. TBT measures this frustration window.
JavaScript Indicator
High TBT almost always indicates JavaScript problems – too much code, inefficient code, or poorly scheduled execution.
Core Web Vitals Connection
While INP is the official Core Web Vital for interactivity, TBT helps diagnose issues in testing environments.
TBT Benchmarks
| Rating | TBT |
|---|---|
| Good | Under 200ms |
| Needs Improvement | 200-600ms |
| Poor | Over 600ms |
Understanding TBT Calculation
TBT counts time from long tasks – any task over 50 milliseconds. The blocking time is the portion over 50ms.
For example:
- A 70ms task contributes 20ms to TBT
- A 50ms task contributes 0ms
- A 250ms task contributes 200ms
Many long tasks accumulate into total blocking time.
What Causes High TBT?
Large JavaScript Bundles
More code means more time parsing and executing.
Heavy Framework Processing
Client-side frameworks initialising and hydrating components.
Third-Party Scripts
Analytics, advertising, and widget scripts competing for processing time.
Inefficient Code
Poorly optimised JavaScript that takes longer than necessary.
Synchronous Operations
Code that blocks the main thread rather than working asynchronously.
Reducing TBT
Split Code
Break large JavaScript bundles into smaller chunks loaded as needed.
Defer Non-Critical Scripts
Load scripts that aren't immediately needed after the page is interactive.
Optimise Third-Party Loading
Audit and remove unnecessary third-party scripts. Load remaining ones efficiently.
Use Web Workers
Move heavy processing off the main thread where possible.
Audit and Optimise
Profile your JavaScript to find and fix inefficient code.