A critical lab metric for evaluating how responsive a website is to user input during the page load process. It specifically quantifies the time the main thread spends executing tasks that prevent it from responding to actions such as clicks, taps, or key presses. While other metrics focus on how quickly content appears, TBT focuses on when it actually becomes usable.
Understanding Total Blocking Time
TBT measures the total 1 between First Contentful Paint (FCP) and Time to Interactive (TTI), during which the main thread was blocked long enough to impede responsiveness. In technical terms, the browser identifies any task on the main thread exceeding 50 milliseconds as a long task. The blocking portion is the time that exceeds this 50-millisecond threshold. For example, a single task taking 100 milliseconds contributes 50 milliseconds to the total score.
Business leaders and analysts monitor this metric because it provides a reliable proxy for First Input Delay (FID), which is a field metric. A high TBT score indicates a poor user experience, as visitors may perceive the page as frozen or broken when their interactions do not result in immediate feedback.
Primary Causes of High TBT
High scores are generally the result of excessive processing demands placed on the browser during the initial load. Identifying these bottlenecks allows marketing and development teams to prioritize performance optimizations that directly impact conversion rates.
Standard factors that increase blocking time include:
- Heavy JavaScript Execution: Extensive script files require significant CPU time to parse, compile, and execute on the main thread.
- Third Party Scripts: External tags for analytics, advertising, and social media often run intensive background processes that stall user interaction.
- Large Request Counts: High volumes of resource requests can overwhelm the browser and delay the execution of critical interactivity scripts.
- Complex DOM Structures: Extremely large or deep page layouts require more processing power for the browser to render and manage.
Optimizing these areas ensures that the browser remains free to handle user requests almost immediately after the visual content appears.
Benchmarking and Optimization Strategies
A good TBT score is typically considered to be 200 milliseconds or less. Scores between 200 and 600 milliseconds suggest the page needs improvement, while anything over 600 milliseconds is considered poor. Because TBT is a lab metric, it can be easily measured using tools such as Google Lighthouse or PageSpeed Insights during development and testing.
To improve TBT, organizations should implement the following technical strategies:
- Code Splitting: Distribute large JavaScript bundles into smaller chunks to prevent the main thread from being occupied by a single massive task.
- Script Deferral: Use async or defer attributes to prevent non-essential scripts from blocking the initial rendering and interaction phase.
- Third Party Audits: Regularly review and remove redundant or slow-loading third-party scripts that do not provide essential business value.
- Web Workers: Move complex calculations or data processing to background threads so the main thread remains available for the user interface.
Maintaining a low TBT score leads to a more fluid experience, keeping users engaged and moving through the sales funnel.