Optimization of Total Blocking Time

Total Blocking Time (TBT) is when a webpage doesn’t respond when you try to use it, especially during the critical rendering path. It’s an important measure for checking how quickly a webpage becomes interactive for users. TBT includes delays caused by JavaScript, which can slow down the overall experience.

Making TBT shorter is crucial for making websites faster and ensuring users have a smooth experience. Developers work on finding and fixing things that make TBT longer to make websites quicker and more responsive. This not only makes users happier but can also help websites rank better in search engines.

Checking and improving Total Blocking Time is part of the bigger goal of creating websites that work well and are easy to use in today’s digital world.

What is Total Blocking Time?

Total Blocking Time (TBT) is a metric that calculates the responsiveness of a web page at the time of loading and rendering process. In the time a page devotes without responding to the user input. It leads to frustrating experiences and slower interactions.

It is important because it directly influences the user experience. A web page with high TBT works slowly and unresponsively, leading to visitors’ frustration.

Slow-loading pages increase bounce rates, reduce user engagement, and negatively influence conversion and revenue. To upgrade TBT for any site, you need to follow the performance guidelines mentioned below:

Identify the reason for CPU activity

For instance, you need to look at the CPU timeline recording in Chrome DevTools. You need to find which section of the code causes the long tasks.

Decrease the size of third-party code.

To optimize for the TBT, the size of the Third-party codes needed to be reduced as their count. To reduce the size of Third-party codes, you have to extend an appeal to the third-party scripts.

Third-party scripts such as A/B testing tools or chat widgets include much CPU processing on the page. Think some of them are replaced or lazily loaded when required.

Decrease the Request Count of Third-party code.

Third-party scripts decrease web page performance excessively. Here are some consequences of third-party code on web page performance:

Generate requests for new networks
Hamper the browser’s main thread with long tasks
Add big image and video assets that are not being optimized
Unreacted and uncompressed third-party scripts are uncontrollable
Using dangerous JavaScript Code Structures like documents. read
Too costly and long CSS selector usage
Do not unblock the window. Onload event with unoptimized iframes.
Short of HTTP caching
Reduce Response Times from the servers
Do not unblock the content displaying without progressive rendering.

For all the above reasons, third-party codes influence total blocking time. Therefore, decreasing the third-party code count is important and helpful regarding TBT. Many third-party scripts do not influence the content of the web page directly.

Minimize the work of the Main Thread.

Main Thread is the processor of the browser to perform the below-mentioned procedure for building a new page.

Style & Layout
Parse HTML & CSS
Script Evaluation
Script Parsing & Compilation
Rendering

If the main thread is engaged more than 50ms continuously, it means that a few Main Thread Work Sections need to be optimized. To know how and what needs to be optimized, knowing which section takes the most time is necessary. The mentioned ways should be followed to optimize TBT through main thread work.

Optime the third-party codes
Decrease the main thread’s work with web workers
Avoid lengthy and difficult input handlers
Decrease the extent of the variables for style calculations
Ignore layout thrashing
Do not Unclean all of the unused Codes
Refactor, Minify, and Compress CSS
Never misuse code-splitting to decrease the JavaScript

All the abovementioned methods are used to improve the Main Thread’s Efficiency and optimize the Total Blocking Time.

Reduce the size of the Web Page Asset Size and Request Count.

Request Size and Transfer Amount are the essential factors that influence the web page in every way. To generate a better performance of TBT, the size of files that are smaller and lesser request amounts are crucial. To reduce the transfer amount and request, follow the procedure below.

Optimize the images with good extensions and pixel-decreasing algorithms.
Replace the unused codes depending on the various category
Compress and Optimize the font files
Generate Javascript and CSS bundles
Transform GIFs into videos
Remove the unimportant HTML Nodes and Script Tags

Significance of Response Time of the Server

Response Time and Time To First Byte (TTFB) are other essential matters for the TBT. The usage of optimized TTFB and fast servers also decreases the TBT. To improve the Server Response Time, you must follow the steps below.

Stay away from Dynamic Content
Optimize the Back-end Infrastructure
Increase the hardware of the Server
Do not try to misuse a CDN service
Do not misuse Advanced Caching and Server Workers

Using the Content Delivery Network (CDN) is also essential to TBT. With the help of CDNs, the TTFB can be upgraded and indirectly influences the Total Blocking Time asset processing per web page.

Total Blocking Time is a must-need metric to keep an eye on when optimizing a website’s performance. It is a user-centric performance metric focused on the responsiveness of page loading. Largest Contentful Paint and Cumulative Layout Shift are part of Google’s Core Web Vitals program, but TBT is not a part of it.

Both of them influence the organic ranking of websites. You must learn about these page experience metrics and how to work with them. You must also go through the above-said methods to improve the site performance and work with the Total Blocking Time.

Conclusion

In conclusion, Total Blocking Time (TBT) is a crucial measure of how quickly a webpage responds when you use it. Making TBT shorter is important to make websites work better and give users a smoother experience. Developers work on fixing things that slow down websites, making them faster and more responsive. Checking and reducing TBT helps create websites that work well and are easy to use, making users happy and potentially improving search engine rankings online.

FAQs

1. What is Total Blocking Time (TBT) in web performance?

TBT measures the cumulative duration a webpage is unresponsive during user interactions, especially in the critical rendering path, impacting the overall user experience.

2. Why is minimizing Total Blocking Time important for websites?

Minimizing TBT is crucial for optimizing website performance, ensuring a smoother and more responsive user experience.

3. What causes Total Blocking Time on a webpage?

TBT is often caused by delays in JavaScript ution that interfere with the main thread, hindering the webpage’s responsiveness.

4. How do developers address Total Blocking Time issues?

Developers address TBT by identifying and resolving factors causing delays optimizing website speed and responsiveness.

5. How does monitoring Total Blocking Time contribute to user satisfaction?

Monitoring and reducing TBT align to provide efficient and user-friendly web experiences, enhancing overall satisfaction and potentially improving search engine rankings.