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.
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.
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.
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
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.
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.
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.
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.
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.
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
Written by Harsh Abrol
With Over 14 years Experience in IT Field , Helping Companies to Optimise there Products for more Conversions
Do you need Help in Web Development ?
Join over 1500+ businesses we've already helped!
Total Blocking Time (TBT) is the time that the main thread of a web page is busy and can’t respond to the user actions as reported by Google PageSpeed Insights. It indicates how many seconds a user may be confronted with latencies while engaging with a web page.
TBT is crucial since its quality affects customers’ experience. Essentially, a high TBT worsens site performance, slows page load speed, and increases the time it takes for a site to respond to user input, which in turn increases bounce rates, and decreases conversion rates. Moreover, TBT is taken into account by Google, and therefore, working on its improvement is a way to increase the website’s ranking.
TBT is determined by the period between the first of Paint and Time to Interactive. It is the sum of all the blocking tasks that occur and take longer than 50 ms during this period.
High TBT is mainly caused by heavy JavaScript processing, large CSS, synchronous resources, and untuned third parties.
Latest
Artificial Intelligence (AI) is making an important step, it's going to possibly be even more critical to the processes of small and medium organizations (SMBs). AI has already started to impact how companies manage inventory, interact with customers, and handle budgets.
Nowadays, there are two primary options for most writers and content creators: digital and traditional publishing. Each direction has its advantages and disadvantages, that can have an effect on the success, reach. In this article, we will discuss the differences between these methods, supporting writers, businesses, and publishers.
Managing a team of field employees has been made less difficult and more effective with the advanced technology of tracking tools. Managers use these tools to supervise field operations, keep track of employees’ activities, and establish facts in their analysis. In this article, we’ll explain how modern tracking tools function and the advantages they offer.
Enhance efficiency with creative business solutions that drive productivity and revenue. Contact us for tailored solutions designed specifically for your business
©2024Digittrix Infotech Private Limited , All rights reserved.
Anniversary Offer
Request Instant Call
Hire Remotely
