How to Improve Total Blocking Time

The functionality of websites is a key factor in today’s digital environment. Total Blocking Time (TBT), which directly impacts a user’s surfing experience, is a crucial performance component.

Web developers and site owners must not only grasp the notion of Total Blocking Time but also have the skills and resources necessary to measure and enhance it and guarantee the best possible website performance. In this post, we’ll look at three useful tools for quantifying TBT and four practical methods for improving it.

Web professionals may create smooth user experiences and increase customer satisfaction. This will ultimately lead to improved business outcomes by understanding the relevance of Total Blocking Time and discovering how to mitigate it.

Table of Contents

• What Is Total Blocking Time?
• What Is A Good TBT Score?
• Impact of High TBT and The Reasons Behind
• How to Check For TBT?
• How to Reduce Total Blocking Time?
  • Reduce the influence of outside code
  • Reduce the work that the main thread is doing
  • Minimize the size of website assets
  • Remove any outdated CSS and Javascript codes
  • Cut down on the size of third-party scripts
  • Decreases the time it takes JavaScript to run
  • Trust website optimization experts
• Conclusion

What Is Total Blocking Time?

Total Blocking Time (TBT) is a performance metric used by Google to measure the responsiveness of a web page. It quantifies the amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. In simpler terms, it measures the total amount of time that a page is unresponsive to user input due to the execution of scripts during page loading.

Here’s how it’s measured:

• First Contentful Paint (FCP): This marks the point when the browser first renders any text, image (including background images), non-white canvas, or SVG content from the DOM. It’s the first indication that the page is loading.

• Time to Interactive (TTI): TTI measures the time from when the page starts loading to when it’s fully interactive. A page is considered fully interactive when it displays useful content (measured by FCP), event handlers are registered for most visible page elements, and it responds to user interactions within 50 milliseconds.

• Calculating TBT: Total Blocking Time is calculated by adding up all time periods between FCP and TTI where task lengths exceed 50 milliseconds. Essentially, for every task that runs longer than 50ms, TBT measures the amount of time beyond that 50ms threshold. Short tasks don’t contribute to TBT, and it doesn’t include any time outside the FCP-TTI window.

For example, if there are three long tasks between FCP and TTI:

• Task 1: 70ms

• Task 2: 80ms

• Task 3: 130ms

Each task’s contribution to TBT is the time over 50ms. So, the TBT would be: (20 + 30 + 80) = 130ms.

TBT is especially significant because it directly affects the user experience. A web page with a high TBT may feel slow and unresponsive, causing frustration for visitors. Slow-loading pages can lead to increased bounce rates, decreased user engagement, and negative impacts on conversions and revenue.

What Is A Good TBT Score?

A good Total Blocking Time (TBT) score is measured in milliseconds (ms). It depends on various factors, including the complexity of the web page, the device being used, and the user’s expectations.

According to Google, the scores for TBT are categorized as follows:

TBT Measurement	Performance Rating
0 to 300 ms	Good
300 to 600 ms	Needs Improvement
Over 600 ms	Poor

Aiming for a TBT of 300 milliseconds or less is considered ideal for ensuring a responsive and user-friendly page experience. This metric is crucial for optimizing user interaction and engagement.

It’s worth mentioning that TBT is just one performance metric among several others, such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP), which provide a more comprehensive understanding of a web page’s loading and interactivity. Evaluating TBT in conjunction with these other metrics can help gauge a website’s overall performance and user experience more accurately.

Impact of High TBT and The Reasons Behind

High Total Blocking Time (TBT) can significantly impact the user experience on a website, leading to frustration and potentially driving visitors away. Here’s a look at the consequences of high TBT and the common reasons behind it:

Impact of High TBT

• Poor User Experience: Users may experience noticeable delays when interacting with the page, such as when clicking buttons, entering text, or navigating menus, leading to frustration and decreased satisfaction.

• Reduced Engagement: Sluggish responsiveness can deter users from engaging with content, completing forms, or making purchases, directly affecting conversion rates and objectives.

• Lowered SEO Rankings: Google considers page experience signals, including responsiveness and interactivity metrics like TBT, when ranking websites. A high TBT can negatively affect a site’s SEO performance and visibility in search results.

• Increased Bounce Rates: Visitors are more likely to leave a site without taking any action if they encounter delays and unresponsive behavior, increasing bounce rates.

Reasons Behind High TBT

• Heavy JavaScript Execution: Extensive or complex JavaScript tasks can block the main thread, delaying the time until the page becomes interactive. This includes large scripts, third-party code, or inefficiently written JavaScript.

• Large, Unoptimized Assets: Oversized images, CSS, and JavaScript files require more time to download and process, contributing to longer blocking times.

• Inadequate Resource Prioritization: Failing to prioritize critical resources can lead to non-essential scripts blocking the main thread during initial load, delaying interactivity.

• Lack of Code Splitting: Sending an entire JavaScript bundle rather than only what’s needed for the initial load can increase the amount of code that needs to be parsed, compiled, and executed, leading to higher TBT.

• Poor Use of Web Browser Caching: Not leveraging browser caching effectively means that returning visitors must download and process the same resources repeatedly, increasing load times.

How to Check For TBT?

The choice of the “best” tool depends on your specific needs, preferences, and workflow. It is recommended to explore and experiment with all three following tools to determine which one aligns best with your requirements and provides the most valuable insights for measuring and improving TBT:

Chrome DevTools

As a built-in feature of the Google Chrome browser, Chrome DevTools provides a comprehensive set of tools for web developers to analyze and optimize their websites. It includes performance profiling capabilities that can measure TBT and other performance metrics.

With its real-time monitoring and debugging features, Chrome DevTools allows you to identify and diagnose performance issues directly in the browser, making it a powerful and convenient tool for measuring TBT during development and testing.

Strengths:

• Integrates with the Google Chrome browser, making it easily accessible.

• Analyzes performance with real-time monitoring and troubleshooting features.

• Provides a wide range of performance metrics, including TBT.

• Allows you to analyze and optimize performance directly in the browser.

Weaknesses:

• Requires technical expertise, primarily suited for development and testing purposes.

• Restricts itself to investigating Chrome’s performance.

• May not provide as comprehensive reports as standalone tools like Lighthouse or WebPageTest.

Lighthouse

Lighthouse is an open-source tool developed by Google that can be used as a command-line tool or an extension in Chrome DevTools. It performs automated audits on web pages and generates detailed reports on various aspects, including performance metrics like TBT.

Lighthouse provides valuable insights into TBT scores, opportunities for improvement, and actionable recommendations for optimizing performance. It is handy for evaluating and benchmarking TBT against industry standards.

Strengths:

• Offers a user-friendly, comprehensive report on performance metrics, including TBT.

• Provides actionable recommendations for optimizing performance.

• Utilizes as a command-line tool or as a Chrome DevTools extension.

• Allows for benchmarking against industry standards and best practices.

Weaknesses:

• Causes many different results between each version of Lighthouse.

• Lacks real-time monitoring and debugging capabilities.

• Restricts itself to evaluating performance within the Chrome browser.

WebPageTest

WebPageTest is a popular online performance testing tool that allows you to analyze the performance of your web pages from multiple geographical locations and different browsers. It provides comprehensive test reports, including TBT measurements, and offers advanced testing options, simulating various network conditions and devices.

WebPageTest is beneficial for understanding how TBT impacts users in different regions and helps optimize performance for a broader audience.

Strengths:

• Allows testing from multiple geographical locations and various browsers.

• Offers advanced testing options like simulating network conditions and devices.

• Provides detailed reports with TBT measurements and other performance metrics.

• Enables performance comparison between different tests and configurations.

Weaknesses:

• Enables a steeper learning curve compared to other tools.

• Conducts tests on remote servers, which may introduce additional variables.

• Requires an internet connection to access the WebPageTest website.

When choosing a tool, consider factors such as your level of technical expertise, the specific performance metrics you need to measure, the testing environment you prefer, and the depth of analysis required.

It’s often beneficial to utilize a combination of these tools to gain a more comprehensive understanding of TBT and optimize website performance effectively.

How to Reduce Total Blocking Time?

Reducing Total Blocking Time (TBT) involves optimizing your website’s performance. Here are several strategies you can employ to reduce TBT:

Reduce the influence of outside code

Reducing the effects of outside code is one efficient method for decreasing Total Blocking Time (TBT). Consider the requirements of the external dependencies and scripts used on your website. Getting rid of any extraneous scripts can aid in cutting down on blocking time.

For complicated integrations, look at server-side solutions or lightweight alternatives. Asynchronous or postponed loading of scripts can be used to lessen the effect of these scripts on TBT.

Reduce the work that the main thread is doing

Reduce the amount of work the main thread does as an alternative method. Profiling the performance of your website can assist in identifying rendering or JavaScript methods that use a lot of resources and cause blockage.

The work can be distributed more effectively and avoid protracted stalling periods by optimizing your JavaScript code by dividing large tasks into smaller portions or employing asynchronous programming techniques like Promises or Web Workers. By prioritizing crucial rendering activities, you can ensure that time-sensitive information loads fast and that your website seems responsive.

Minimize the size of website assets

In addition to these techniques, reducing TBT significantly depends on the number of website materials. Reduce the size of your media files without sacrificing quality by optimizing and compressing them. Utilize strategies for lazy loading to load resources only when necessary, cutting down on initial load time and potential blocking.

Examine your website’s codebase regularly to spot and eliminate any obsolete JavaScript and CSS. You can decrease the parsing and execution time, hence lowering TBT, by eliminating unnecessary or outdated code.

Remove any outdated CSS and Javascript codes

It’s crucial to regularly audit your website’s codebase to eliminate any obsolete JavaScript and CSS. TBT decreases as a result of the parsing and execution times being reduced by removing useless or out-of-date code.

Examine the requirement of third-party scripts and how they affect TBT to reduce their size. Consider eliminating or substituting hefty third-party scripts with server-side fixes or lighter substitutes. Reducing their quantity and size will lessen these scripts’ influence on TBT.

Cut down on the size of third-party scripts

Another efficient strategy is to make third-party scripts less in size. Analyze each third-party integration’s relevance and effect on TBT. Consider eliminating or substituting hefty third-party scripts with server-side fixes or lighter substitutes. The blocking time caused by the execution of these scripts can be decreased by lowering their quantity and size.

Decreases the time it takes JavaScript to run

TBT can benefit from reducing the time it takes for JavaScript to execute. Reduce unused loops in your JavaScript code, enhance algorithms, and apply effective coding techniques. Reduce the size of JavaScript files by minifying and bundling them, speeding up parsing and execution.

By implementing these tactics, you may effectively decrease Total Blocking Time, improve website performance, and satisfy users. Utilize tools like Chrome DevTools, Lighthouse, or WebPageTest frequently to test and monitor your website’s performance, track progress, and fine-tune your optimization strategies.

Remember, a lower TBT directly contributes to faster page load times, improved interactivity, and better user engagement. Prioritizing performance optimization benefits your website’s visitors and positively impacts search engine rankings, conversions, and overall user satisfaction.

Trust website optimization experts

Try Mageplaza website performance optimization now for:

• Higher sales and customer retention: Faster page loading times lead to higher conversion rates, reduced cart abandonment, and increased customer satisfaction, all of which contribute to improved sales and customer loyalty.

• Faster page loading: Slow-loading pages can frustrate visitors, leading to higher bounce rates and lost opportunities. By optimizing various aspects of your website, including code, images, and caching, we can help significantly reduce page load times, enabling your visitors to access your content quickly and seamlessly.

• Better search engine ranking: By optimizing your website’s performance with us, you improve your chances of achieving better visibility, attracting more organic traffic, and ultimately increasing your online presence.

LET’S REDUCE YOUR TOTAL BLOCKING TIME!

Conclusion

In conclusion, decreasing Total Blocking Time (TBT) is critical for improving website performance and offering a seamless user experience. You can significantly reduce TBT and enhance overall performance by practicing the techniques covered in this article, such as minimizing the main thread’s workload, minimizing the influence of external code, and optimizing website assets.

It is crucial to regularly monitor and test your website using tools like Chrome DevTools, Lighthouse, or WebPageTest to measure TBT and track the impact of your optimization efforts.

The significance of optimizing TBT cannot be emphasized as website complexity and user expectations rise. You may drastically minimize Total Blocking Time and give your users a faster, more responsive browsing experience by putting the tips in this article into practice while also being careful in monitoring and maintaining performance.