What is Total Blocking Time (TBT)?Total Blocking Time (TBT) is a Lighthouse and lab-based web performance metric measuring the total amount of time the main browser thread was blocked for more than 50 milliseconds between First Contentful Paint (FCP) and Time to Interactive (TTI). When the main thread is blocked, the browser cannot respond
What is Total Blocking Time (TBT)?
Total Blocking Time (TBT) is a Lighthouse and lab-based web performance metric measuring the total amount of time the main browser thread was blocked for more than 50 milliseconds between First Contentful Paint (FCP) and Time to Interactive (TTI). When the main thread is blocked, the browser cannot respond to user inputs (clicks, keypresses, taps), making the page appear frozen or unresponsive. TBT sums the blocking portions (the time exceeding 50ms) of all long tasks to quantify total interaction unresponsiveness during page load.
TBT as a Predictor of INP
TBT is a lab metric (measured in Lighthouse under controlled conditions) while INP is a field metric (measured from real users). They both measure related concepts: TBT shows how much main thread blocking occurs during initial load, while INP measures interaction responsiveness throughout the page lifecycle. Reducing TBT typically improves INP in the field: the same code optimization techniques (breaking up long JavaScript tasks, code splitting, deferring non-critical scripts) improve both metrics. Use TBT as a diagnostic tool in Lighthouse to identify and fix long tasks before they manifest as poor INP in real user data.
Frequently Asked Questions
How do I reduce Total Blocking Time on a SaaS website?
TBT reduction strategies: (1) Code splitting: load JavaScript in smaller chunks so no single chunk creates a 50ms+ blocking task, (2) Defer non-critical scripts using defer or async attributes so they do not block initial render, (3) Remove unused JavaScript (Chrome DevTools Coverage report identifies code loaded but never executed), (4) Audit and reduce third-party script impact (each marketing pixel, chat widget, and analytics library adds TBT), (5) Use requestAnimationFrame or setTimeout for animations and DOM manipulation to spread work across frames rather than in one large blocking task, and (6) Use Web Workers for computationally intensive tasks that do not need direct DOM access, moving work off the main thread entirely.
What TBT score indicates good performance?
Lighthouse TBT thresholds: Good is 200ms or less, Needs Improvement is 200-600ms, and Poor is above 600ms. However, lab TBT scores do not directly map to field INP scores because real devices vary significantly in CPU performance: a 200ms TBT score on a fast development machine may correspond to 600ms+ TBT on a low-end Android device where most of your mobile audience may be browsing. Test with Lighthouse on throttled CPU settings to get a more realistic picture of performance on typical user devices.