Session 9 – What is Total Blocking Time + Improving it

What is Total Blocking Time or TBT and how can we improve its score?

In this tutorial we are going to say in simple language what is Total Blocking Time or TBT inside Gtmetrix tool and what to do with this error? How to improve? Is this an error?

I am the author of this article, I am Pouria Ariafar from SEO teaching, this is not a translation article from other sites, we tried to gather a good article for you from the knowledge and experience we had along with a series of reputable sites. We are happy to be with us.

Important Introduction:

In the previous article, we talked about what is Speed ​​Index and how to optimize it, and said that this factor is highly dependent on FCP and LCP factors, but Total Blocking Time is one of the most difficult criteria for improvement in GTmetrix and other site speed testing tools. Yes, especially for WordPress friends, who in my opinion can not solve this problem in 80% of WordPress sites, and other friends either have a professional programmer along with an SEO expert, or they have nothing at all on their site and it is private and they have a good score. However, I hope this article helps you.

The Total Blocking Time standard is similar to the First Input Delay standard in Web Vitals. Now, TBT was first introduced at Google’s Lighthouse in 2020, and then the GT Metrics site in its Performance Criteria, referring to the same old DOM that was once part of Yahoo!’s Yslow factor, but this time the TBT benchmark has been optimized and tightened.

According to my field research in site speed service projects, dedicated TBT sites are much better than WordPress sites. The reason is also clear, because the administrators of WordPress sites install plugins and are looking for WordPress plugins for every good and big possibility. They also use templates that have all kinds of features. More features on the front means more hassle in optimization.

 

What is Total Blocking Time?

So what does Total Blocking Time mean now? This criterion is somehow related to the user interaction with the page. The total time between FCP and TTI when the main thread is busy and better blocked is called Total Blocking Time. I know it got a little hard. So let’s first examine the concept of main thread together.

 

What is Main Thread?

When the website page is loading, a lot of resources are required to be called and various tasks and operations occur behind the page. Things like parsing HTML and CSS files, creating a DOM (what is a DOM article), running JavaScript files, and خیلی in very simple terms, the browser uses the main thread to execute these tasks or user requests (like clicking).

A good example for better understanding:

Consider the main thread like a restaurant waiter. This waiter has various tasks such as taking orders, delivering orders to the kitchen, taking food to the table, cleaning the tables and so on. Now what happens if one of the waiter’s work takes too long? True, it does not reach other important tasks. So we have to design the tasks of the waiter (main thread) in such a way that taking care of a certain job does not take too much time.

The following example will help you better:
Now what does it mean to block the main thread? Whenever one of the tasks of the main thread lasts more than 50 milliseconds, I say the main thread is blocked. Now between the FCP and TTI times, we calculate all the times that the main thread is blocked and add them together to get the TBT or Total Blocking Time. (We talked about TTI or Time to Interactive in Session 10)

The image above says very clearly, 4 tasks (Task) are to be performed. Now, for example, a task can be reading a JS file, basically JS files cause more TBT time. Now, except for the second task, the rest of the tasks, that is, one, three and four, took over 50 milliseconds and we marked in red, the sum of all these cases is TBT or the Total Blocking Time that we said.

What affects TBT?

  • HTML page analysis
  • Head over to the CSS file
  • Dealing with JS file (this is the most important)
  • Build a DOM
  • Layout tree production
  • And ….

The TBT benchmark is one of the new GTmetrix user-centric benchmarks. Because during this time (ie when the main thread is blocked) user requests and inputs are not done. For example, if the user clicks a button, nothing happens. So the user thinks that our site has a problem and leaves the page and a bad user experience is formed.

 

What is the amount of Total Blocking Time in the Performance Report?

The TBT benchmark is 25% of the GTmetrix Performance Score, and this shows the great importance of this key benchmark. How to score GTmetrix to TBT, as follows:

  • 150 milliseconds or less: OK
  • Between 150 and 224 milliseconds: Acceptable, but requires optimization
  • Between 224 and 350 milliseconds: Slightly longer than standard
  • More than 350 milliseconds: much longer than standard

 

How to optimize TBT or Total Blocking Time?

Reducing Total Blocking Time largely depends on JavaScript execution. Therefore, optimizing the execution of JavaScript files will improve TBT. TTI factor optimizations also help a little, but not always. Paying attention to the following also reduces the Total Blocking Time on our page:

  • Reduce JavaScripts runtime
  • Main thread optimization
  • Delete unused JavaScript files
  • Replace heavy JavaScript libraries with smaller ones

Important Note: The main-thread is related to JS or JavaScript, friends think that if they express compression of JavaScript files, TBT will be better, but I must say no, it will not be better, just in a nutshell. Of course, no one denies optimizing JS or CSS files, but the idea that we should compress to make it better was old-fashioned. So you need to let the programmer do this for you.

  • Also: According to my research, defragmenting JS or CSS files does not help much to improve TBT, although it may be good on paper and
  • put JS execution at the end, but in practice we did not see much effect.

We also have two important errors in the Structure section that have a direct effect and are recommended to read.

Avoid long main-thread tasks
Avoid an excessive DOM size error
However, do not think that you can easily improve this factor, and you should know that to optimize it, it is effective above 20 cases, as we said in previous articles.

 

Total Blocking Time

Total Blocking Time is one of the most important criteria of the new GTmetrix, which has a great impact on increasing the performance score. TBT checks when the main thread is blocked due to long tasks and as a result the browser could not respond to user requests. Whenever the main thread is involved in a task for more than 50 milliseconds, the rest of the time is part of the TBT. Total Blocking Time is similar to First Input Delay in Web Vitals.

To improve Total Blocking Time, you have to check a series of important factors, which are at least 10, and we mentioned in SEO teaching, in other words, improving and optimizing the Total Blocking Time factor by giving a code is not solved and is not simple.

Finally, it is recommended that you seek help from an SEO expert or someone you trust and know to get better results. You can also ask questions in the comments of SEO teaching site.

Be sure to follow the tutorials for fixing SEO teaching gtmetrix errors. Or if you are interested in technical SEO, follow the technical and technical SEO topics.

 

Leave a Comment