TBT : Important Parameter for Google Page Insight

Introduction

In the world of website performance, there is a set of tools known as Google PageSpeed Insights (PSI) which seeks to assess the state of performance of the developed website. Among the performance measures considered by this instrument, is TBT – Total Blocking Time. It is, therefore, important that you know what TBT is and its influence on your website so that you can enhance your website’s performance. Over at the DWT blog, we are going to be going deep with the basics of what TBT is and going into analysis as to why and how the TBT can be developed.

What is TBT?

Total Blocking Time means the total amount of time in which access is blocked. It is a measure used by Google PageSpeed Insights to indicate the recurrence of spans in which the main thread of a website is busy delivering elements and cannot execute other tasks necessary to cater to the inputs made by users. The main thread is responsible for most of the time needed to display content or give reactions to user inputs, and when it becomes unresponsive users of the website will observe that everything they do is slow.

In simple words, TBT quantifies the time a web page takes to interact with the user. In case your TBT is high, users may experience a significant lag in terms of clicking buttons, scrolling the page, or even when typing text in the forms.

Why is TBT Important?

TBT is important because it directly affects the user experience on your web development. People expect a site to load very fast and the more the site responds to their actions within seconds. High TBT suggests that users get irritated and therefore there are high bounce rates and low conversion rates.

In addition, TBT is also deployed by Google as a ranking element. Another factor was related to the nature of the website: the results where the websites were ranked better, the lower the TBT was. I conclude that increasing TBT can go beyond enhancing the usability of the site and eventual conspicuousness in search engine results.

How is TBT Calculated?

TBT is calculated by measuring the time between two key events during the page loading process. It captures the duration from when the first content appears on the screen until the page becomes fully interactive, highlighting how long users must wait before they can engage with the webpage:

First Contentful Paint (FCP): This is the time when the first sort of content, the textual or graphics that is to be displayed on the screen appears.

Time to Interactive (TTI): This is the time when the page is fully loaded containing all the HTML, CSS, and JS elements so that the user can interact with the page without any transition time.

TBT is the aggregate of all blocking time (msec) between FCP and TTI. Any task occurring on the main thread that has a response time of more than 50 milliseconds is considered a “blocking task.” The total sum of responses of all these blocking actions is the TBT.

For example, if a page has three blocking tasks that take 60ms, 120ms, and 200ms respectively, the TBT would be calculated as follows:

Task 1: 60ms - 50ms = 10ms blocking time

Task 2: 120ms - 50ms = 70ms blocking time

Task 3: 200ms - 50ms = 150ms blocking time

Total TBT = 10 ms + 70 ms + 150 ms = 230 ms

Common Causes of High TBT

There are various reasons which can explain why your website has high TBT, and understanding these causes is crucial for effective optimization. Identifying the root of the issue allows you to implement targeted solutions that can significantly enhance your site’s performance. Some common causes include:

Heavy JavaScript Execution: If JavaScript files are large or not well optimized, the time it will take to run them will be huge, and this causes the main thread to be busy waiting for this script. This can delay other critical operations on your page.

Large CSS Files: Files such as the CSS files if they are large or contain complex styles can also hinder the main thread during the rendering. Efficient CSS can reduce the rendering delays.

Synchronous Loading of Resources: If your website is using synchronous (or callbacks), data loading will cause the main thread to be blocked for a long time. Asynchronous loading can alleviate this issue.

Third-Party Scripts: Scripts from third parties, for instance, in advertisements or tracking codes can take extra time to be blocked in case they are not fine-tuned. Evaluating and optimizing these scripts can help minimize their impact on TBT.

How to Improve TBT

Several factors can contribute to a high Total Blocking Time (TBT) on your website. Understanding these causes is crucial for identifying specific areas that need improvement to enhance your website's performance. By delving into the various aspects that lead to high TBT, you can pinpoint the exact issues and take targeted actions to address them. Some common causes include:

Minify and Compress JavaScript Files: Remove the actual space needed by the code through minification and shrinking the size of the files through compression can help expedite execution.

Defer or Async JavaScript Loading: Remember to use the defer or async attributes when including JavaScript files, so that it does not interject the page’s rendering.

Split Long Tasks: Split long JavaScript operations into smaller segments so that they can be run in parallel and not lock out the main thread.

Minify CSS Files: Like JavaScript files, CSS files should be minimized to curb file size and hence, reduce loading time.

Use Critical CSS: Critical CSS is CSS for the above-the-fold content, which refers to the part of a website that is visible when it is opened. To load this CSS, you should include it in the page’s head but do so asynchronously so that other tasks don’t have to wait for most of the styles to load.

Lazy Load Images: The images are only loaded when they are actually required or are about to become visible in the viewport of the web page. This helps in reducing the burden of the main thread, particularly when rendering the page for the first time.

Use Web Workers: Use Web Workers, where the application can delegate long-running JavaScript tasks, as they execute in the background and do not interfere with the primary flow.

Load Third-Party Scripts Asynchronously: If third-party scripts are necessary, they must be the last to be loaded to avoid delaying the main thread.

Optimize and Limit Third-Party Scripts: Consider the need for each third-party script and remove the ones that are not that important. Further, minimize the effect of the remaining scripts on TBT as much as possible.

Tools to Measure and Improve TBT

Several powerful tools are available to help you measure and optimize Total Blocking Time (TBT) on your website. These tools provide comprehensive insights into your site’s performance, pinpointing areas where improvements are needed and offering actionable recommendations to enhance user experience and efficiency:

Google PageSpeed Insights: This tool is an effective TBT measurement tool that also generates an in-depth assessment of your website, suggesting specific areas that require improvement. It provides detailed recommendations to improve TBT.

Lighthouse: Lighthouse is an open-source web utility that checks your page and offers options for improvement of efficiency and TBT decreasing. It helps identify performance bottlenecks.

Chrome DevTools: When it comes to the main thread and high TBT, Chrome DevTools’ Performance panel helps to find out which elements on the main thread hang for a long time. This tool offers detailed insights into performance issues.

Case Study: Improving TBT for a Real Website

An e-business site had problems with page loading time and high bounce rate. Later using Google PageSpeed Insight the developer learned that TBT was more than 1000ms. Among them, there were such primary reasons as large JS files and synchronous resource loading.

The developers took the following steps to improve TBT:

Minified and deferred JavaScript: When using minifying and deferring the JavaScript files, the TBT was established to have decreased by 300 milliseconds. This optimization reduced the time the main thread was blocked.

Implemented lazy loading for images: This decreased the score of the initial load on the main thread by another 200 ms, further improving the TBT. Lazy loading improved page responsiveness.

Optimize CSS delivery: All critical CSS was rendered inline and non-essential CSS was deferred; TBT was cut by 150 ms in further stages.

As a consequence of the optimizations described above, the website’s TBT decreased from more than 1000 ms to 350 ms. This in turn enhanced the uptake of the application by users, whereby clients could stay longer on the application, fewer bounced cases, and increased conversions. Enhanced TBT led to improved user engagement and satisfaction.

Final Words

Total Blocking Time (TBT) provides a favorable way to analyze and optimize the browsing efficiency of your website. Overall, knowing more about TBT, and how to work to minimize it, will help you to improve the user experience on your site and increase its visibility with all of the most popular search engines. If you manage to optimize JavaScript, CSS, and resource loading you will learn the strategies to reduce TBT to make your website faster and more efficient.

Taking time to minimize TBT is not all about enhancing figures on the performance report; it is also all about making users’ experience a pleasant one.

Boost Website Speed and SEO with Digittrix: Expert TBT Optimization

Here at Digittrix, we know that it is critical to optimize TBT and other parameters to get the most out of your site. Our expert developers and SEO team can help you precisely adjust your site code, minimize render-blocking resources, and optimize JavaScript to reduce Total Blocking Time. With our tailored solutions, we help improve your website's overall speed and user experience, leading to better scores on Google PageSpeed Insights and higher search engine rankings. Let  Digittrix work on site improvement and ensure that your users stay engaged.

If you too want to Improve your website page TBT and are unsure of how to begin the process, schedule your appointment or book your consultation today with our expert technical managers by calling +91 8727000867

or write to us for all your queries at digittrix@gmail.com