Total Blocking Time (TBT): What It Is and How to Minimize It for Faster Websites

Total Blocking Time (TBT) measures how long your website keeps users waiting before they can interact with it.

This article explores what Total Blocking Time (TBT) is, why it matters for website performance, and practical strategies to minimize it.

What is Total Blocking Time (TBT)?

Total Blocking Time (TBT) is a web performance metric that quantifies the total amount of time during page load when the main thread is blocked and unable to respond to user inputs like clicks, taps, or keyboard actions.

It measures periods between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread is busy executing long tasks that prevent the page from being fully interactive.

A “long task” is any task that runs on the main thread for more than 50 milliseconds. Since the browser cannot interrupt ongoing tasks, when these long tasks occur, user inputs are delayed until the task completes.

The portion of each long task that exceeds 50 milliseconds is counted as blocking time, and the sum of all blocking times during the measured period forms the TBT value.

For example, if a long task takes 250 milliseconds to run, the blocking time contributed is 200 milliseconds (250ms minus the initial 50ms non-blocking threshold). The final Total Blocking Time is the sum of such blocking intervals for all long tasks during page load.

Why TBT Matters for User Experience

Total Blocking Time (TBT) directly impacts how responsive and interactive a website feels to users. When TBT is high, the browser’s main thread is busy executing long tasks, preventing it from reacting promptly to user inputs like clicks, taps, or keyboard actions. This creates delays and a sluggish, unresponsive experience that frustrates users.

Key reasons TBT matters for user experience include:

• Interaction Delays: High TBT means the website may appear frozen or unresponsive, causing noticeable delays between user actions and browser responses, leading to poor perceived performance.
• User Frustration: When interactions stall, users become frustrated and may abandon the site, resulting in higher bounce rates and reduced engagement.
• Mobile Experience: Mobile devices with less powerful CPUs are more sensitive to blocking, making TBT a critical factor for ensuring smooth mobile experiences.
• Core Web Vitals Connection: TBT correlates strongly with First Input Delay (FID) and Time to Interactive (TTI), which Google uses to evaluate page responsiveness and rank search results.
• Competitive Edge: Optimizing TBT enhances how quickly users can start interacting with content, giving your site an advantage in user retention and satisfaction.

Factors Affecting TBT

Total Blocking Time (TBT) is influenced by several key factors that determine how long the main thread is blocked and unable to respond to user interactions. Understanding these causes is essential for optimizing TBT and improving website responsiveness:

• Heavy JavaScript Execution: Large or complex JavaScript files that take a long time to parse, compile, and execute on the main thread significantly increase blocking time. Synchronous JavaScript that runs without interruption blocks user input handling.
• Third-Party Scripts: External scripts, including ads, analytics, and widgets, often load synchronously and add to TBT by blocking the main thread. They sometimes carry bulky, unoptimized code, increasing execution time.
• Render-Blocking CSS and JavaScript: CSS or JavaScript resources that block rendering prevent the page from displaying content quickly, extending the blocking period. Non-critical scripts and styles that aren’t deferred can delay interactivity.
• Long Tasks on Main Thread: Tasks lasting longer than 50 milliseconds block the main thread, causing user input delays. These long tasks can include heavy computations, DOM manipulations, or layout recalculations.
• Complex DOM and Layout: Pages with large, deeply nested DOM structures require more processing power for rendering and layout. Frequent or heavy layout recalculations also increase blocking time.
• Inefficient Event Handlers: Poorly optimized event listeners, especially those triggered on frequent user actions like scrolling or resizing, can accumulate work on the main thread, increasing TBT.
• Network Delays: Network congestion or slow server response can delay the delivery of critical resources, increasing the overall time until the main thread is free for interaction.

Proven Strategies to Minimize TBT

Minimizing Total Blocking Time (TBT) is essential to create faster, more responsive websites. Here are proven strategies to reduce TBT effectively:

Optimize JavaScript Execution:

• Defer non-critical JavaScript and use asynchronous loading to prevent blocking the main thread.
• Split code using techniques like code splitting to load only necessary scripts early.
• Avoid long-running JavaScript tasks by breaking them into smaller, non-blocking chunks or offloading to web workers.

Reduce Third-Party Script Impact:

• Audit and remove unnecessary third-party scripts that significantly increase blocking time.
• Load third-party resources asynchronously or defer them to reduce their impact on TBT.

Minify and Compress Assets:

• Minify CSS and JavaScript files to reduce file sizes and parsing times.
• Use modern compression techniques (Gzip, Brotli) for faster downloads.

Remove Unused CSS and JavaScript:

• Regularly audit your codebase to eliminate unused styles and scripts, reducing the main thread workload.

Optimize CSS Delivery:

• Critical CSS should be inlined to reduce render-blocking styles.
• Defer non-essential CSS to speed up page rendering.

Leverage Resource Hints:

• Use preload and preconnect to prioritize fetching important assets and reduce delays in loading crucial scripts and styles.

Reduce Server Response Time (TTFB):

• Fast server responses allow browsers to start processing resources earlier, directly contributing to lower TBT.

Use HTTP/2 and CDNs:

• HTTP/2 allows parallel resource loading, and CDNs serve content closer to users, speeding up resource delivery.

Common Pitfalls to Avoid

When optimizing Total Blocking Time (TBT), some common pitfalls can undermine efforts and prolong blocking durations. Avoiding these mistakes is vital for improving page responsiveness and user experience:

• Ignoring Large JavaScript Files: Overlooking bulky or poorly optimized JavaScript leads to long main thread tasks that significantly increase TBT. Avoid loading large scripts synchronously without deferral or code splitting.
• Overusing Third-Party Scripts: Excessive or unoptimized third-party scripts (analytics, ads, social widgets) can block the main thread and increase TBT, especially if loaded synchronously or without proper management.
• Not Deferring Non-Critical Resources: Render-blocking CSS and JavaScript that are not deferred cause unnecessary delays. Failing to inline critical CSS or defer JS leads to longer blocking.
• Heavy or Complex DOM: Overly large and deeply nested DOMs cause longer parsing and layout times, which contribute to blocking. Avoid bloated DOM structures and unnecessary elements.
• Inefficient Event Handling: Poorly optimized event handlers on frequent user actions like scroll and resize can cause repeated blocking tasks that add up to higher TBT.
• Not Monitoring Long Tasks: Failing to identify and optimize long tasks over 50ms leaves a blind spot in performance debugging, causing missed optimization opportunities.
• Relying Solely on Page Load Metrics: Focusing only on initial load metrics without considering interactivity and main thread blocking can result in misleading performance assessments.

Try BrowserStack Now

TBT vs Other Metrics (FID, INP, TTI)

While all these metrics measure interactivity, each focuses on a different aspect of responsiveness. Here’s how TBT compares with FID, INP, and TTI:

• TBT (Total Blocking Time): Lab metric that measures how much time the main thread is blocked by long tasks, preventing responsiveness.
• FID (First Input Delay): Field metric that measures the delay a real user experiences from their first interaction (like a click or tap) until the browser responds.
• INP (Interaction to Next Paint): Field metric that captures responsiveness across all user interactions, not just the first one, giving a fuller picture than FID.
• TTI (Time to Interactive): Lab metric that measures when a page becomes fully interactive, i.e., when the main thread is free of long tasks for a sustained period.

How they relate:

• TBT is strongly correlated with FID and INP but is measured in lab tests rather than real-world usage.
• Reducing TBT usually improves both FID and INP scores.
• TTI gives context by showing when a site becomes reliably interactive, while TBT highlights the delays along the way.

Enhance Website Performance with BrowserStack Website Scanner

BrowserStack Website Scanner is an all-in-one, no-code tool designed to help teams automatically scan, detect, and fix a wide range of website issues that affect performance, usability, and accessibility.

It offers comprehensive coverage across your entire website or selected URL segments, making performance monitoring and issue resolution fast, reliable, and scalable.

Key features include:

• Automated Performance Scanning: Monitor critical performance metrics like page load speed and Core Web Vitals (including FCP, LCP, CLS, and TBT) with detailed reports pinpointing slow pages and bottlenecks.
• Broad Issue Detection: Beyond performance, the scanner detects visual bugs, broken links, accessibility compliance issues, and responsiveness problems to ensure a seamless user experience.
• Flexible Scan Options: Upload sitemaps or use automated crawling to scan thousands of pages quickly. Schedule scans to run automatically at desired intervals, daily, weekly, or monthly.
• Protected and Staging Environment Testing: Configure login flows, cookies, and other authentication methods to scan pages behind login or in pre-production environments, catching issues before deployment.
• Comprehensive Reporting and Alerts: Consolidated reports highlight all detected issues with severity levels and device filtering. Receive instant notifications via Slack, Microsoft Teams, or email when scans complete.
• Ease of Use and Integration: No setup or coding required, making it accessible for QA, developers, and marketing teams. Helps accelerate release cycles without compromising quality.

Talk to an Expert

BrowserStack Website Scanner empowers teams to proactively improve website speed and reliability, delivering fast, responsive, and accessible digital experiences that boost engagement and SEO rankings.

Conclusion

Total Blocking Time (TBT) plays a vital role in determining how quickly users can interact with your website. By minimizing long-running tasks, optimizing scripts, and reducing main-thread blocking, you can significantly improve responsiveness and overall user experience.