Total Blocking Time (TBT) is a Core Web Vital metric that measures the amount of time during which the main thread is blocked and unable to respond to user input. It is one of the metrics that measure the loading performance of a website.
When a website is loaded, the browser’s main thread is responsible for executing JavaScript and rendering the page. If the main thread is blocked, it means that it is unable to respond to user input, such as scrolling or clicking on links. This can result in a poor user experience, as the website may feel unresponsive or slow to respond.
TBT measures the time during which the main thread is blocked, and it is calculated as the sum of all the individual periods of time during which the main thread is blocked and unable to respond to user input. It is measured in milliseconds and is triggered when the main thread is blocked for more than 50ms.
There are several factors that can cause TBT, including:
- JavaScript execution: JavaScript is executed on the main thread, so if there is a lot of JavaScript that needs to be executed, it can block the main thread, resulting in a higher TBT.
- Long-running tasks: Long-running tasks, such as large image downloads or data processing, can block the main thread, resulting in a higher TBT.
- Third-party scripts: Third-party scripts, such as analytics or tracking scripts, can block the main thread, resulting in a higher TBT.
- Render-blocking resources: Render-blocking resources, such as CSS and JavaScript, can block the main thread, resulting in a higher TBT.
How to fix TBT or Total Blocking Time in a WordPress website?
To improve Total Blocking Time (TBT) on a wordpress website, website owners and developers can take several steps such as:
- Minimizing the use of JavaScript: One way to minimize the use of JavaScript on a WordPress website is to reduce the number of plugins and themes that use JavaScript. This can be done by deactivating or uninstalling any unnecessary plugins or themes and disabling any unnecessary features in existing plugins or themes. Additionally, website owners and developers can also minify and combine JavaScript files, this can help to reduce the amount of data that needs to be transferred and processed by the browser.
- Breaking down long-running tasks into smaller chunks: Long-running tasks can block the main thread and increase TBT. To break down long-running tasks into smaller chunks, website owners and developers can use techniques like web workers. This allows for the execution of JavaScript code in the background, away from the main thread.
- Loading third-party scripts asynchronously: Third-party scripts, such as analytics or tracking scripts, can block the main thread and increase TBT. To load third-party scripts asynchronously, website owners and developers can use the async or defer attributes on the script tags. This allows the browser to continue loading and rendering the page while the scripts are loading, which can help to reduce TBT.
- Deferring or loading non-critical resources asynchronously: Deferring or loading non-critical resources asynchronously can help to reduce TBT by allowing the browser to continue loading and rendering the page while these resources are loading. Website owners and developers can use techniques like lazy loading or using the preload or preconnect resources to load resources only when they are needed. This can be done by using lazy loading plugins or by adding the appropriate attributes to the resource tags in the HTML.
- Minimizing the number of render-blocking resources: Render-blocking resources such as CSS and JavaScript can block the main thread and increase TBT. Website owners and developers can minimize the number of render-blocking resources by using techniques like inline critical CSS, which is the minimal set of CSS that is required to render the above-the-fold content of a page. Additionally, website owners and developers can also minify and combine CSS and JavaScript files, this can help to reduce the amount of data that needs to be transferred and processed by the browser.
It’s worth noting that the above steps can be implemented by a developer with knowledge of HTML, CSS, and JavaScript, alternatively, there are plugins and tools available for WordPress that can help to implement these steps, such as Autoptimize, WP-Optimize, and WP-Rocket.
By implementing these steps, website owners and developers can improve TBT, resulting in a better user experience and better visibility on search engines. It’s important to note that these steps may require testing and monitoring to see the best results.