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

Read more blog – onlinedemand.net