What Is Total Blocking Time?

By Author: Palash Ghosh
Total Articles: 4
Comment this article

What is total blocking time and how is it relevant for the website performance online? To start with, the total blocking time, also known as TBT, is a metric measure. It functions by measuring the total amount of time once the First Contentful Paint-FCP where the main thread has been blocked for quite some time in order to avoid input responsiveness.

Essentially, to enhance the total blocking time, the website owners need to focus mainly on optimizing certain aspects such as: reducing the render-blocking resources, Javascript, and use of performance tools such as Lighthouse. Also, one needs to know that the total blocking time can easily be reduced by effective management of the third-party scripts, prioritizing critical resources and applying the asynchronous loading techniques as well.

Total blocking time: How it works

As mentioned above, the total blocking time or TBT is the time taken by any tasks that are loner than 50ms (Long task) block the main or the Prime thread. This aspect majorly affects the usability of the page. This results ...
... in depicting the factor that makes a page unresponsive, before it grows completely interactive. So, what is meant by the term ‘Long Task’?

Long tasks are those tasks that ‘run’ on the main thread for more than 50ms. It is the Long tasks that tend to block the working of the main thread as the browser is not able to interrupt them as and when they are ‘running’. This implies even in the under the condition of user input. So, what is meant by the ‘Main Thread’? Lets find out.

One can say that the Main thread is essentially the main star of the show, in the case of visualizing the page. Here, the browser tends to rely on various reasons; after the browser acquires a code file the main thread parses the HTML. This is later turned into a Document Object Model-DOM. Later the CSS is parsed by the main thread and it is at this point that the stye for each element is determined. In a nutshell, all the heavy-work on website is basically conducted by the main thread, thus making it quite an important aspect of the entire working in a website.

It is here that you need to understand that any ‘long function’ (such as Javascript) can block the main thread completely. This is when the page grows unresponsive, when the users will need to wait before their inputs manage to produce the required results.

Total blocking time: How is it Measured

We can easily understand how the total blocking time is measured by taking a look at some examples.

Example 1:

If there are four tasks that are currently running on the main thread:
Task one takes 260 ms
task two - 30 ms
task three - 100 ms
task four - 60 ms

Here to calculate the TBT, you will require:

To calculate the blocking time taken by each task.
To sum up all the results

NOTE: Only those tasks above 50 ms are considered to be the blocking time.

In the case of the example shown above:

Task One is 260 ms long, 210ms of which is blocking.
Task Two takes less than 50ms, hence it does not contribute to the TBT.
Task Three is 100ms long, 50ms of which are blocking.
Task Four is 60ms long, 10ms of which are blocking.

Here, the TBT is calculated by adding:

210ms + 50 ms + 10 ms = 270 ms

Hence, the TBT for the task above is calculated to be 250 ms.

Example 2:

If we have another task that has a main thread which is 400 ms long, here the blocking time of the task will be calculated as 350 ms. Despite the fact that it is just a single task, however, it blocks more time as compared to the four tasks as shown in the Example: 1 above. This is an important aspect to consider when calculating the TBT.

INFERENCE: So, you see, the above examples clearly show that small tasks do not necessarily mean low blocking time. Likewise,a large number of tasks does not necessarily imply that the block time is large or translates to a bad user experience.

Total Block Time: What are the Heavy Tasks?

So, how do you understand what tasks harm the total block time the most? There are quite a few tools available online such as: Chrome Dev Tool and the Lighthouse Edits.

To Check the Performance E dit:
Navigate to a page you wish to analyze.
Now Right-click and select “Inspect”.
Once done, click on “Performance”.

Now Click on the “Reload” button and wait for Chrome to function

This is when you get the detailed analysis of the performance of the page. Go to the ‘Main section’ where you will see that each task is colored differently. Here, any ‘Grey task with small red overlay is your LONG TASK. Hover long enough to check how much time is taken on the Main thread.

Likewise, you can also click on the ‘Bottoms up’ for a more detailed description of every task.

CONCLUSION

That’s all that we have at the moment about What is total blocking time? Do offer us your valuable feedback about the article and we would love to hear from you.

Hi, my name is Palash Ghosh and I am a Content Writer at Rabbitloader. I write creative blogs on a niche such as Business, saas, marketing, Technical and more. Apart from writing I like to read novels, plays and short stories, and also listen to soft music.