Optimizing and evaluating the TBT criterion to improve the user experience of visiting your website pages has a significant impact. This measure shows your website pages’ loading time and responsiveness to user clicks. The shorter this time is, the faster your website will be displayed to the user and will bring his satisfaction.
The TBT criterion is also very important in the ranking of website pages in Google, that is, it is effective in the SEO criteria of the site. Therefore, you should try to optimize this criterion by reducing the long tasks that monopolize the main thread of the browser.
This article from the SEO Education Articles Collection should provide an overview of what is measured in this metric, how it is calculated, why you should care, and how to improve TBT.
Table of Contents
What is TBT or Total Blocking Time?
Tbt or Total Blocking Time is an index that is used to evaluate the response speed of website pages during loading after a user’s request, which is an important indicator for measuring site performance. By evaluating the TBT metric, you will find out how long each page of your website has been blocked from receiving input from the application.
To be better with this specialized topic that plays an important role in site optimization and SEO; it is better to first examine the concept of some specialized terms that are effective in determining the TBT index:
Time to Interactive (TTI)
Time to Interactive (TTI) is a metric that is defined as the exact opposite of the TBT metric. When a website is entirely and continuously available and there is no delay in responding and loading its pages, it has no TBT and as a result, the user experience of visiting this website is complete and without delay.
Long tasks
A long task is a JavaScript code whose execution takes more than 50 milliseconds in the browser. The responsiveness or interaction between the web page and the user is related to long tasks that act as blockers when the website is loaded.
Long tasks are considered blockers because the browser cannot stop or interfere with that task. Therefore, when a long task is running, the main Browser thread cannot respond to the user’s clicking as input, and the loading of the web page for the user is blocked or so-called Freeze until the long task is fully executed.
The reason for the importance of the TBT criterion
The most important criteria that are considered for a site optimization or SEO are the indicators that are considered by reputable search engines such as Google. Since in recent years, the interactiveness of sites has been given special attention by Google, the evaluation of the TBT criterion, which has a direct relationship with improving the user experience of interacting with a website, has become important. It can be said that the optimality of this index plays a key role in improving the ranking of the site in the search pages and is also effective in the SEO of the site.
What should be the TBT criterion for an optimized site?
If a site is well-optimized, the average TBT should be less than 300 milliseconds. Usually, this average value is determined by summing up all the long tasks running on the website and comparing it to the top 10,000 websites with the best TBT ranking.
Since the TBT evaluation results are one of the criteria related to website performance in the Google Lighthouse Report, in general, the optimality of the TBT criterion is measured according to the results of this report in the following ranges:
- Good or green TBT in Lighthouse Report: between 0 and 300 milliseconds
- Medium or orange TBT in Lighthouse Report: between 300 and 600 milliseconds
- Weak or red TBT in Lighthouse Report: more than 600 milliseconds
This amount has a great impact on site ranking and SEO because it can be seen in the Core Web Vitals section of Google Webmaster.
What tools can be used to determine why a website’s TBT is high?
To be able to optimize the TBT of a website, one must first identify the reasons for the delay and, in fact, the long tasks that delay the loading process of web pages. You can use tools like Chrome DevTools for this.
When the website pages are checked with this tool, the long tasks that have monopolized the main thread of the browser are shown in red, and in this way, you can click on each long job and see The “Bottom Up” section looked at why TBT is so high.
How to evaluate the TBT standard
Page Speed simulators can be used to measure and evaluate TBT. Many tools evaluate and calculate TBT, the most commonly used of which are:
- Lighthouse
- Chrome DevTools
- WebPageTest
- GTMetrix
- SpeedCurve
- Pingdom
- Puppeteer
Optimizing the site for TBT criteria
After using appropriate tools, long tasks, or scripts that cause a delay in loading the web page and responding to the user, it is determined that the block codes that created these long tests should be modified to The TBT criterion should be optimized as much as possible.
One of the following methods can be used to optimize block codes:
Reducing the number of site script requests
To optimize the tbt metric, you can minimize the number of unnecessary third-party scripts to avoid creating traffic or line tasks that cause delays in the loading time of your website page.
Reducing the size of site scripts
Reducing the size of third-party scripts is another factor that contributes to TBT benchmark optimization. Since you don’t have authorized access to control third-party codes, you should communicate with their owners to reduce the size of these scripts through various methods, such as Twitter or email, and ask them to remove unnecessary parts. To reduce the size of the script.
Minimizing the tasks of the main thread in the browser or dome
The Main Thread is the browser processor that can process various data on your web page, including style and layout scripts, Parse HTML & CSS, and other things. To optimize the TBT criterion, you must first check the working sections of the Main Thread Work Sections with tools such as Chrome DevTools and optimize the tasks that took more than 50 milliseconds to complete.
In addition to the above, other solutions can help you optimize TBT and improve the user experience of viewing and entering website pages, including:
- Cleaning up useless JavaScript and CSS codes
- Compression of javascript and css files
- Implementation of splitting code (Splitting code) for JavaScript assets