Total Blocking Time

Total blocking time defines as the sum of all the long tasks (=Long Task processing Time – 50ms) between First Contentful Paint and Time To Interactive period which blocks the main thread and prevents the user from interacting with the web page.

What is Long Task?

In the UI Performance Testing term, the main thread task that takes more than 50 milliseconds is termed as ‘Long Task’.

How to calculate Block Time?

Let’s consider the main thread task (say A) taking 250ms to complete. As per the above definition, this task will be considered as ‘Long Task’ because it is taking more than 50ms. To calculate the block time, subtract 50ms from the processing time of the task and that will provide the block time of that particular task.

Block Time (in ms) = Task Processing Time (in ms) – 50

=> Block Time = 250 – 50;
=> Block Time = 200 ms

So, 200ms is the block time of task A. Since there could be multiple long tasks performed by the main thread to load a web page so calculate the block time of each long task using the above formula and then sum up all the block time to get the ‘Total Blocking Time’. Refer to the below figure:

Figure 01

Processing Time of

  1. Task A: 250
  2. Task B: 130
  3. Task C: 60
  4. Task D: 110

Block time of each Task:

  1. Task A => 250 – 50 = 200ms
  2. Task B => 130 – 50 = 80ms
  3. Task C => 60 – 50 = 10ms
  4. Task D => 110 – 50 = 60ms

Total Blocking Time = 200 + 80 + 10 + 60
Total Blocking Time = 350ms

What is the ideal value of Total Blocking Time?

TBT standard as per Google Lighthouse is:

TBT (in ms)Considered AsColour Coding
0 to 200FastGreen
200 to 600ModerateOrange
Over 600SlowRed
Table 01

How to improve TBT?

  1. Optimize JavaScript
  2. Reduce main thread task
  3. Implement the Code Splitting for Javascript 
  4. Reduce third party request count

You may be interested:

Leave a Reply

Your email address will not be published. Required fields are marked *