How Total Blocking Time Measures Long JavaScript Tasks

Total Blocking Time (TBT) is a core web performance metric that quantifies how severely long-running JavaScript tasks degrade a webpage’s responsiveness before it becomes fully interactive. By calculating the cumulative delay caused by main-thread tasks between First Contentful Paint (FCP) and Time to Interactive (TTI), TBT demonstrates how long users are blocked from interacting smoothly with a page while complex scripts are parsed, compiled, and executed.

The 50-Millisecond Threshold

The foundation of TBT relies on the browser standard known as a “Long Task.” Any JavaScript execution that occupies the main thread for longer than 50 milliseconds is classified as a long task. This 50ms boundary is derived from user experience standards: browsers need enough free main-thread time to handle user inputs (such as clicks, taps, and key presses) and produce a visual update within 100 milliseconds to feel instantaneous to the user.

Isolating the “Blocking” Duration

TBT does not measure the entire execution time of a script; it measures only the excess duration that actively risks input latency. For any task exceeding 50 milliseconds, the blocking portion is calculated as the total execution time minus 50 milliseconds.

• A script running for 45ms generates 0ms of blocking time (safe execution).
• A script running for 80ms generates 30ms of blocking time (80ms - 50ms).
• A script running for 300ms generates 250ms of blocking time (300ms - 50ms).

The Measurement Window

TBT specifically tracks blocking tasks that occur in the critical window between First Contentful Paint (FCP) and Time to Interactive (TTI). During this window, the page appears visually complete to the user, inviting interaction, while heavy background operations—such as framework hydration, tracking libraries, and ad scripts—compete for the main thread.

Differentiating Severity from Volume

TBT evaluates the structural severity of JavaScript execution rather than sheer execution time. For example:

• Scenario A: Five separate 40ms tasks (totaling 200ms of execution) produce 0ms TBT. The main thread regularly yields control, allowing input events to process without noticeable lag.
• Scenario B: A single 200ms task produces 150ms TBT. The main thread is entirely monopolized, forcing user interactions into a queue and causing visible interface freezing.

By penalizing long, continuous execution blocks while tolerating distributed, modular tasks, Total Blocking Time directly measures how severely JavaScript architecture compromises real-world user responsiveness.