What is Total Blocking Time?

Total Blocking Time (TBT) is a metric that shows how long a website is unable to respond to user actions, such as clicks or text input. It is the period from the moment when the content of the page starts to appear, to the moment when full interaction is possible. A good understanding and optimization of TBT can positively influence the perception of the site by visitors.

Total blocking time, known as TBT, is not just a technical indicator of website performance, but primarily a signal indicating whether the site is not at risk of receiving a thumbs down from the user.

How does TBT affect your website?

Higher TBT values can make users feel frustrated when the site seems to be slow or "frozen". A loaded page with all the text and graphics that, however, does not respond to any clicks, can deter visitors.

For websites, especially those related to e-commerce, high TBT may mean lost conversions and revenue, as potential customers give up further use of the site.

A study conducted by the SEOmoz company showed that sites with TBT below 300 milliseconds have a significantly higher user engagement rate and better positioning in search engines, compared to sites with higher TBT. The analysis shows that sites with TBT exceeding 500 milliseconds experience an average of 20% higher bounce rates. Moreover, sites with lower TBT show a 15% higher conversion in user interactions, such as clicks on links or filling out a contact form.

What are the differences between TBT and First Input Delay (FID)?

FID focuses on the user's first impression, measuring the delay from the first click or other interaction with the site until the browser is able to respond to this action. Typical values for optimal FID are below 100 milliseconds.

TBT provides a more comprehensive picture, measuring the total time when the main browser thread is blocked long enough that it cannot immediately respond to user interactions. The ideal TBT is less than 300 milliseconds.

By analyzing TBT, site owners can identify and optimize those elements of the site that most affect delays in interactivity.

What are the differences between TBT and Time to Interactive (TTI)?

TTI is an indicator determining the moment when the site becomes fully interactive, which means that the user can fully use all the functionality of the site without significant delays. To consider the site as fully interactive, TTI should be less than 5 seconds on 3G mobile connections.

TBT is an essential component of TTI, focusing on identifying and minimizing tasks that may delay the time when the site becomes interactive. Reducing TBT is key to improving TTI.

Optimizing both TBT and TTI requires focusing on:

To make your site respond faster and run smoother, it is important to focus on reducing Total Blocking Time (TBT). Below you will find proven ways to help you reduce TBT.

Minimize the amount and duration of long JavaScript tasks

Long JavaScript tasks can significantly impact TBT, blocking the main browser thread. Divide longer tasks into smaller fragments that can be performed between user interactions. This technique, known as chunking, can reduce TBT by even 25-30%.

Additionally, using modern frameworks and JavaScript libraries, which automatically optimize script execution time, can further reduce TBT. For example, Angular and React offer lazy module and component loading, allowing only those parts of the application that the user needs at a given moment to be loaded.

Optimize resource loading

Using techniques such as lazy loading for images and non-critical scripts reduces the amount of work the browser must do before allowing the user to interact with the site. Implementing lazy loading using the loading="lazy" attribute for images and iframes can reduce TBT by 20-35%.

Introducing resource compression techniques, such as WebP for images or Brotli for text content, can also significantly speed up page loading, which directly translates into lower TBT. Resource compression reduces the size of files to be transferred, which is especially important in the context of slower internet connections.

Use online tools

Tools like Lighthouse can help you identify which elements on your site have the greatest impact on TBT. Regular audits can help detect and minimize problems affecting site performance.

Using tools such as WebPageTest allows for more detailed analysis of site performance under various network conditions, which is key to understanding how the site behaves in real usage scenarios. This allows for precise adjustment of aspects of the site that most affect TBT.

Take a look at third-party scripts

Scripts such as analytics tools or social widgets often add extra time to TBT. Using the Request Map Generator tool can help identify and limit those that most impact performance. Consider limiting the number of third-party tools or looking for lighter alternatives, which can result in a 10-15% reduction in TBT.

Analyzing the cost of adding each third-party script and regular reviews of their impact on performance can help maintain optimal TBT. It is also worth considering asynchronous or conditional loading of some scripts to minimize their impact on page load time.

Use Web Workers to run scripts in the background

This allows the script execution to be moved outside the main thread, which means less risk of blocking the interactivity of the site. Implementing Web Workers can be more complex, but in some cases, it reduces TBT by even 40%. Documentation and examples can be found on MDN Web Workers .

Using Web Workers to process data or operations on large data sets in the background can significantly improve the responsiveness of the user interface. Thanks to this, users can continue to interact with the application, even when complex calculations are being performed in the background, which translates into a significant improvement in the perception of site performance.

What are the most common mistakes and how to avoid them?

The most important change that can have the greatest impact on TBT is optimizing JavaScript scripts by minimizing them and splitting them into smaller parts. Such optimization can lead to a significant reduction in time, even up to 30% lower TBT, making it a priority in the site optimization process.

Total Blocking Time (TBT) is an important indicator that helps understand how long a page is unfit for interaction after the first content paint. It gives an idea of how user interactions may be delayed during page loading. Let this be your guide to the tools and methods of TBT analysis so you can improve your site.

Tools for measuring TBT

To accurately measure TBT, you can use several available tools that will provide you with in-depth information about the performance of your site:

How to reduce delays through blocking tasks

Understanding which elements slow down your site and how they impact Total Blocking Time (TBT) is key to its improvement:

Remember that every step towards reducing blocking time improves the experiences of visitors to your site. Systematically analyzing and improving TBT not only increases user satisfaction but can also affect better visibility in search engines. Take care of regular tracking of TBT and other performance indicators to keep your site up-to-date with speed and responsiveness.

We delved into the topic of Total Blocking Time (TBT), showing how this indicator can affect how quickly and smoothly our websites operate. In simple terms, TBT tells us for how long our site is like frozen and does not respond to interaction attempts, such as a click. Understanding this indicator helps in creating sites that not only load lightning fast but also respond immediately when the user wants it.

What is worth taking away from this is the belief that every millisecond matters. By caring for a detail like TBT, we can significantly raise the comfort of using our sites, which in today's world of fast internet and impatient users, can be a real game-changer.