Total Blocking Time (TBT): What It Is, Why It Matters, and How to Fix It

When it comes to optimizing your website’s performance, Total Blocking Time (TBT) is one metric you definitely want to pay attention to.

While TBT may sound technical at first, it’s a straightforward metric that can make a significant difference in your user experience.

In this blog, we’ll break down what TBT is, why it matters, and share practical tips on how to improve your score—helping you create a faster, more responsive website that keeps users happy.

What Is Total Blocking Time?

Let’s start with the basics. Total Blocking Time (TBT) measures how long the main thread in a web browser is blocked from responding to user interactions, like scrolling, clicking, or tapping.

The main thread is responsible for executing critical tasks on your site, such as parsing HTML, running JavaScript, and rendering the page.

TBT comes into play when these tasks take longer than 50 milliseconds. If the main thread is too busy handling heavy JavaScript or large tasks, it can’t respond to user interactions.

TBT tracks these delays and gives you a way to measure just how "stuck" the browser is while trying to perform these tasks.

For a deeper dive into Java application monitoring, check out our full guide on how it works and why it's crucial for performance optimization here.

What are the Causes of High Total Blocking Time (TBT)?

A high Total Blocking Time (TBT) can severely affect your website’s interactivity and user experience. TBT measures the time when the browser's main thread is blocked due to long-running tasks, preventing users from interacting with the page. Understanding the common causes of high TBT can help you target areas for optimization. Let’s break down some of the key culprits that lead to excessive blocking.

1. Large JavaScript Tasks

One of the most common causes of high TBT is large or poorly optimized JavaScript files. When your page loads, the browser needs to process JavaScript before it can handle user interactions like clicks, scrolling, or typing. If these tasks are too long, they can block the main thread for too long, leading to increased TBT.

Unoptimized JavaScript: If your scripts are bulky or contain inefficient code, they’ll take longer to execute.
Synchronous Code: JavaScript that runs synchronously (meaning it blocks other operations) can slow down the main thread and increase TBT.

2. Third-Party Scripts

Third-party scripts such as ad networks, analytics, and social media integrations can introduce significant delays to your page load. These scripts often run in the background and can block the main thread, causing long delays before the page becomes interactive.

Non-Asynchronous Loading: Many third-party scripts load synchronously, meaning they block the main thread until they’re fully executed.
Large Payloads: Some third-party libraries and widgets are large, requiring time to download and execute, adding to the total blocking time.

For insights on effectively monitoring Windows Server, check out our detailed guide on Windows Server Monitoring.

3. Render-Blocking Resources

Certain resources, like CSS and JavaScript, can block the rendering process if they are not optimized. Render-blocking resources delay the time it takes for the browser to render the page, and when those resources are large or inefficient, they can contribute to higher TBT.

CSS Files: If large CSS files are not optimized, the browser can’t render the page until these files are fully downloaded and parsed.
JavaScript Files: Similar to CSS, if JavaScript files aren’t properly split or deferred, they can prevent the page from becoming interactive.

4. Long Tasks and Complex Layouts

Web pages with complex layouts and large amounts of DOM (Document Object Model) elements require more processing power from the browser. When these tasks take more than 50 milliseconds, they contribute to TBT.

Complex JavaScript Operations: Tasks like DOM manipulation, layout recalculation, or CSS style recalculations can be heavy on the main thread, causing blocking.
Long-Running Animations: Animations that are poorly optimized, or animations that run continuously without break, can also block the main thread.

For best practices in application monitoring, check out how effective tools, clear objectives, and alert strategies can help improve your system's performance. Read more here.

5. Inefficient Event Handlers

Event handlers—especially those that are attached to frequent user actions like scrolling, resizing, or mouse movements—can cause high TBT if they aren’t optimized. If these handlers are too complex or run expensive operations on every event, they can easily block the main thread for extended periods.

Debouncing and Throttling Issues: Without proper debouncing (delaying execution) or throttling (limiting how often an event fires), event handlers can accumulate too much work and delay user interactions.
Heavy Event Listeners: Complex or unoptimized functions triggered by events can pile up, especially if they’re run on every small interaction.

6. Heavy Image and Asset Loading

While images and other assets don’t directly affect JavaScript execution, the process of loading large or unoptimized assets can block the main thread, particularly if they’re not loaded efficiently.

Unoptimized Images: Large image files that aren't compressed or served in modern formats like WebP can delay the rendering process, contributing to high TBT.
Unnecessary Resources: Loading too many assets or resources that aren’t needed immediately (such as large background images or external fonts) can add unnecessary blocking time.

7. Inefficient CSS and Style Calculations

The browser’s rendering process involves recalculating the styles of the page, and if there are too many complex styles or inefficient CSS rules, this can result in long tasks that block the main thread.

CSS Repaints and Reflows: Modifying the DOM or styles can trigger reflows and repaints in the browser, which are time-consuming operations that can increase TBT.
Large CSS Files: If your CSS is large or contains redundant styles, it can slow down the page and block the main thread for a long time.

Why Does TBT Matter?

TBT is one of Google’s Core Web Vitals, a set of metrics designed to evaluate the quality of user experience on the web.

While TBT doesn’t directly influence your Google rankings (yet!), it plays a key role in ensuring users can interact with your site without unnecessary delays.

High TBT: Users might experience lag when trying to interact with your page, leading to frustration and higher bounce rates.
Low TBT: Your website becomes more responsive, delivering a smoother experience that can help improve engagement and retention over time.
User Experience: A smooth interaction encourages users to stay on your site, reducing the chances of them leaving due to delays or frustration.

DNS monitoring ensures your domain system runs smoothly, detecting misconfigurations and outages to prevent disruptions. For more insights, check out this article.

How to Measure Total Blocking Time (TBT)

Now that you understand what Total Blocking Time (TBT) is and why it matters, the next step is figuring out how to measure it accurately. Fortunately, there are several powerful tools available to help you track TBT and identify areas for improvement.

Let’s explore two of the most commonly used tools for measuring TBT: Lighthouse and Chrome DevTools.

1. Lighthouse

Lighthouse is an open-source, automated tool from Google that audits web pages for performance, accessibility, SEO, and more. It provides a comprehensive analysis of your website’s performance, including a detailed report on TBT.

To measure TBT with Lighthouse, follow these steps:

Open Google Chrome and navigate to the page you want to measure.
Open DevTools (right-click on the page and select "Inspect" or press Ctrl + Shift + I).
Go to the Lighthouse tab.
Select the performance settings you want (mobile or desktop).
Click Generate Report.

Once the report is generated, you’ll find TBT listed under the Performance section. Lighthouse will break down how much time was blocked during the page load and provide suggestions on how to reduce it.

Lighthouse is great for getting a high-level overview of your website’s performance and understanding how TBT fits into the bigger picture of web vitals. It also provides actionable insights on how to improve your TBT by optimizing JavaScript, deferring non-essential scripts, and more.

2. Chrome DevTools

Chrome DevTools is another powerful tool for developers to analyze performance and debug web pages. To measure TBT in DevTools, you can use the Performance tab to record and analyze how long the main thread is blocked.

Here’s how you can measure TBT using Chrome DevTools:

Open Chrome and navigate to the page you want to measure.
Press Ctrl + Shift + I to open DevTools or right-click and select Inspect.
Go to the Performance tab.
Click the Record button (the circular button at the top-left) to start recording.
Reload your page and interact with it to simulate real user behavior.
Once the page has loaded and interactions are recorded, click Stop to stop the recording.

In the performance timeline, you'll see detailed information about the main thread and what tasks are causing blocking. Look for long tasks (tasks that take more than 50ms), as these contribute to your TBT score.

You can analyze the tasks causing delays, whether it’s JavaScript execution or rendering, and optimize accordingly.

Chrome DevTools gives you more granular control and allows you to dive deep into specific interactions and the exact tasks blocking the main thread.

GCP monitoring helps track the performance of Google Cloud resources and services. It offers insights into infrastructure health, security, and reliability. For more information, check out this article.

3. Web Vitals Extension

For a quick and easy way to measure TBT live, consider using the Web Vitals Chrome extension. This extension gives you an overview of Core Web Vitals, including TBT, right in your browser’s toolbar.

It’s a great tool for developers who want to keep an eye on their site’s performance without going through the full Lighthouse or DevTools process.

5 Practical Ways to Improve Your Total Blocking Time

Here are 5 actionable strategies you can implement to improve your score and enhance your site’s performance:

1. Simplify Your JavaScript

Large JavaScript files or poorly optimized scripts are often the main offenders when it comes to blocking the main thread.
Reduce the size of your JavaScript files by minifying them and removing any unused code.
Consider breaking up large tasks into smaller chunks to prevent long tasks from blocking the thread.

2. Use Web Workers

Web workers allow you to run JavaScript tasks in the background, without blocking the main thread.
This frees up the main thread to handle user interactions, making your site more responsive.
Use web workers for tasks like data processing or fetching large datasets.

3. Defer Non-Critical JavaScript

Not all JavaScript is essential for the initial page load.
By deferring non-critical JavaScript (think third-party scripts, analytics, etc.), you can ensure that the browser focuses on the important stuff first.
This can reduce the time the main thread spends processing unnecessary tasks.

Proactive monitoring helps identify and address issues before they impact performance. It tracks metrics to prevent disruptions. For more, check out this article.

4. Prioritize Critical Content

To minimize TBT, prioritize loading essential resources first.
For example, make sure critical content, such as above-the-fold text and images, loads quickly.
Defer less important elements (like background images or ads) until after the initial content is ready for interaction.

5. Optimize Server Response Times

Sometimes, TBT can be influenced by server-side delays.
If your server takes too long to respond, the browser has to wait before it can continue processing and rendering content.
Improving server response times through caching or optimizing server configurations can help reduce overall blocking time.

Difference Between TBT and Other Metrics

When it comes to measuring web performance, there are a variety of metrics that provide insights into how well your site is performing, especially in terms of user interaction. Total Blocking Time (TBT) is just one piece of the puzzle.

Let’s break down how it compares to other commonly used metrics, such as Time to Interactive (TTI) and First Input Delay (FID).

Total Blocking Time (TBT) vs. First Input Delay (FID)

Both TBT and FID measure the delay between a user’s action and the browser’s response. However, the way they measure this delay is slightly different:

First Input Delay (FID) focuses on the first user interaction (like clicking a link or pressing a button) and measures how long it takes for the browser to respond. FID is a critical metric for understanding how quickly users can interact with your page after it starts loading.
Total Blocking Time (TBT), on the other hand, tracks the total amount of time the main thread is blocked during the page load, preventing any interactions. TBT measures this blocking during the input readiness period, which is the time between a user’s action and the browser being ready to respond.

In short, FID is a snapshot of the first delay users encounter, while TBT measures how much overall time is spent with the page “stuck,” affecting any user interactions, not just the first one.

AWS monitoring tools help manage and optimize cloud performance, covering resources, applications, and security. Tools like CloudWatch, X-Ray, and CloudTrail provide valuable insights. Learn more in this article.

TBT vs. Time to Interactive (TTI)

Time to Interactive (TTI) measures the time it takes for a page to become fully interactive. A page is considered interactive when it’s visually complete, all event handlers are loaded, and users can start interacting with the page without any delays.

TTI gives you an overall view of when the page becomes usable.
TBT focuses specifically on the time during which the main thread is blocked, potentially causing delays in interaction.

While TTI measures the overall readiness of the page, TBT helps pinpoint specific areas where large tasks are causing unnecessary delays in responsiveness. In short, TTI tells you when your page is fully interactive, while TBT gives you insight into the reasons behind delays in responsiveness during that time.

TBT vs. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) measures how long it takes for the largest visible content element on the page (like an image or a block of text) to load. LCP is focused on visual stability, telling you when the most important content appears to the user.

LCP is crucial for understanding visual loading performance, showing when the page is visually complete.
TBT, on the other hand, tells you how long the browser is unable to respond to user inputs.

While LCP tells you when the page is visually loaded, TBT gives you insight into whether the page is responsive enough for users to start interacting with it. LCP is about visual readiness, while TBT measures the responsiveness of your page during the load.

7 Best Tools for TBT Optimization

Optimizing Total Blocking Time (TBT) requires a combination of effective techniques and the right tools to identify and fix performance bottlenecks.

Fortunately, several tools are available to help you reduce TBT by pinpointing issues like JavaScript blocking, slow rendering, and inefficient resource loading.

Let’s take a look at some of the best tools you can use to optimize your TBT and improve your site’s performance.

1. Webpack

Webpack is a powerful bundler and build tool for JavaScript applications. It’s commonly used to optimize how JavaScript is loaded and executed on your website.

Here’s how Webpack helps with TBT optimization:

Code Splitting: With Webpack’s code splitting feature, you can break large JavaScript files into smaller, more manageable chunks. This reduces the time the browser spends processing unnecessary code during page load.
Tree Shaking: Webpack’s tree shaking feature helps eliminate unused code, so only the necessary JavaScript is loaded, further reducing TBT.
Lazy Loading: Webpack allows you to defer loading non-essential scripts until they are needed, preventing long tasks from blocking the main thread.

2. Google Tag Manager (GTM)

Google Tag Manager (GTM) is a tag management system that allows you to manage and deploy marketing tags (such as analytics scripts) without having to modify the code on your website. GTM can help optimize TBT by:

Asynchronous Loading: GTM allows you to load tags asynchronously, meaning they won’t block the main thread and delay user interactions.
Tag Prioritization: You can prioritize which scripts should load first, deferring less important ones until after the page becomes interactive.

By using GTM to manage third-party scripts, you can reduce the blocking time caused by large, slow-loading JavaScript files.

Golden signals for monitoring (latency, traffic, errors, and saturation) are essential for keeping track of system health. These signals offer critical insights into performance and help identify potential issues quickly. For a deeper understanding, check out this article.

3. Lighthouse CI

Lighthouse CI is a tool for automating performance testing and monitoring using Lighthouse. It integrates with your continuous integration (CI) pipeline to ensure that performance improvements, including TBT, are consistently applied across updates.

With Lighthouse CI, you can:

Set Performance Budgets: Establish performance thresholds for your site’s TBT score, helping you keep it in check during development.
Automate Performance Testing: Run automated tests on every pull request to track and compare performance metrics like TBT, so you can identify and fix regressions early.

4. JavaScript Profiler (Chrome DevTools)

The JavaScript Profiler in Chrome DevTools is an invaluable tool for identifying performance bottlenecks in your JavaScript code that could contribute to high TBT. By recording and analyzing your page’s runtime performance, you can pinpoint long-running tasks and optimize them.

Here’s how the JavaScript Profiler helps with TBT optimization:

Analyze Long Tasks: The Profiler shows you how long each function takes to execute. If you spot long-running functions or synchronous code blocking the main thread, you can refactor them for better performance.
Optimize Rendering: You can track paint and layout times in the Rendering tab, helping you identify which render tasks are slowing down your page’s responsiveness.

5. Web Vitals Chrome Extension

If you're looking for a quick way to monitor TBT during development, the Web Vitals Chrome Extension is a simple but effective tool. It provides real-time feedback on your site’s Core Web Vitals, including TBT, so you can track performance as you make changes.

It’s especially useful for:

Quick Performance Monitoring: Keep an eye on TBT and other vital metrics without having to open up DevTools or run full audits.
Tracking Changes: Check how your TBT score changes as you optimize your site, giving you immediate feedback on the impact of your optimizations.

6. Service Workers (for Caching)

Service Workers are scripts that run in the background of your web page and can help optimize TBT by caching resources and managing network requests more efficiently. Service workers can:

Cache Assets: By caching assets like images and scripts, service workers reduce the time spent loading external resources, allowing the main thread to stay free from user interactions.
Preload Resources: Service workers can preload critical resources to ensure that your page is interactive as quickly as possible.

Synthetic monitoring simulates user interactions to proactively track application performance and availability, helping detect issues before they impact real users. It offers insights into system health. For more details, check out this article.

7. Critical Rendering Path Optimization Tools

Tools like Critical and Penthouse help you optimize the critical rendering path of your website, which directly impacts TBT. The critical rendering path is the sequence of steps the browser takes to render a page. Optimizing this path means ensuring the most important elements load first, while non-essential elements load later.

These tools help by:

Identifying Critical Resources: You can pinpoint and prioritize essential CSS and JavaScript files, ensuring they load early and don’t block the main thread unnecessarily.
Deferring Non-Essential Resources: You can defer the loading of non-critical resources (such as ads, analytics, or images), allowing the page to become interactive faster.

Conclusion

Improving your Total Blocking Time (TBT) is essential for delivering a fast, responsive user experience.

While TBT isn't the only factor influencing website performance, reducing it can significantly boost user satisfaction and overall site performance.

At Last9, the OpenTelemetry data platform, we specialize in optimizing performance, so you can focus on what truly matters—delivering exceptional user experiences without the technical headaches and costs.

Schedule a demo to learn more about it!