What Is Total Blocking Time (TBT)?
Learn how Total Blocking Time is calculated, why the 50ms threshold matters, and how it relates to INP.
Expected Interview Answer
Total Blocking Time (TBT) sums up the portion of every main-thread task, between First Contentful Paint and Time to Interactive, that exceeds 50 milliseconds — quantifying exactly how much the page’s JavaScript kept the browser too busy to respond to user input.
The calculation looks only at 'long tasks' (any main-thread task over 50ms) occurring in the window between FCP and TTI, and for each one it counts only the blocking portion — the time beyond the first 50ms — then adds those blocking portions together into a single millisecond total. A task that runs for 200ms therefore contributes 150ms of blocking time, not the full 200ms, because the first 50ms is considered an acceptable, non-blocking chunk of work. TBT is a lab metric measured in tools like Lighthouse and correlates strongly with the field-measurable Interaction to Next Paint (INP), which replaced First Input Delay as a Core Web Vital — both metrics point at the same underlying problem: excessive main-thread JavaScript execution. Reducing TBT typically means code-splitting large bundles, deferring non-critical third-party scripts, and breaking up long synchronous JavaScript into smaller chunks using techniques like yielding to the main thread between iterations.
- Quantifies exactly how unresponsive a page is during load, in a single number
- Correlates strongly with the field Core Web Vital Interaction to Next Paint
- Pinpoints main-thread JavaScript execution as the root cause of unresponsiveness
- Guides concrete fixes: code-splitting, deferring scripts, breaking up long tasks
AI Mentor Explanation
TBT is like adding up every minute beyond a fielder’s allowed 50-second water break that the umpire had to wait before play could resume. A single long delay of 200 seconds only counts as 150 seconds of wasted time, since the first 50 was within the allowed break. Add up every such excess across the innings and you get one number describing how much play was genuinely held up. That sum-the-excess-over-the-threshold calculation is exactly how TBT is computed for a webpage.
Step-by-Step Explanation
Step 1
Identify the measurement window
TBT only considers main-thread tasks occurring between First Contentful Paint and Time to Interactive.
Step 2
Find long tasks
Any main-thread task exceeding 50ms within that window is flagged as a long task.
Step 3
Compute blocking portion per task
For each long task, subtract the first 50ms; only the remainder counts as blocking time.
Step 4
Sum all blocking portions
Adding every task's blocking portion together produces the final Total Blocking Time value.
What Interviewer Expects
- Correct explanation of the 50ms threshold and blocking-portion calculation
- Understanding that TBT is measured only in the FCP-to-TTI window
- Awareness of the relationship between TBT and the field metric INP
- Ability to name concrete fixes: code-splitting, deferring scripts, yielding to main thread
Common Mistakes
- Assuming TBT sums the full duration of long tasks instead of only the portion beyond 50ms
- Confusing TBT with Time to Interactive itself
- Not knowing TBT is a lab-only metric with INP as its field-measurable counterpart
- Overlooking third-party scripts as a major source of TBT
Best Answer (HR Friendly)
“Total Blocking Time adds up all the moments where the page’s JavaScript kept the browser too busy to respond to a click or tap while it was loading. The bigger the number, the more the page felt frozen or laggy right when someone tried to interact with it.”
Code Example
let totalBlockingTime = 0
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const blockingPortion = entry.duration - 50
if (blockingPortion > 0) {
totalBlockingTime += blockingPortion
}
}
console.log('Running TBT estimate:', totalBlockingTime, 'ms')
})
observer.observe({ type: 'longtask', buffered: true })Follow-up Questions
- How does Total Blocking Time relate to Interaction to Next Paint in the field?
- What specific code changes would you make to reduce TBT on a slow page?
- Why does TBT only count the portion of a task beyond 50ms instead of the whole task?
- How do third-party scripts typically contribute to a high TBT score?
MCQ Practice
1. How is the blocking portion of a single long task calculated?
Only time beyond the first 50ms of a long task counts toward TBT.
2. In what time window is Total Blocking Time measured?
TBT sums blocking time only within the FCP-to-TTI window.
3. Which Core Web Vital most closely correlates with a high TBT?
Both TBT and INP are driven by excessive main-thread JavaScript execution.
Flash Cards
What is TBT? — The sum of blocking portions (beyond 50ms) of long tasks between FCP and TTI.
What counts as a long task? — Any main-thread task exceeding 50 milliseconds.
What field metric correlates with TBT? — Interaction to Next Paint (INP).
How do you reduce TBT? — Code-split bundles, defer third-party scripts, and yield during long JS work.