Total Blocking Time (TBT)

Total Blocking Time (TBT)

Optimize Web Performance: Effective Strategies to Cut Down Total Blocking Time

Total blocking time directly hampers a website’s interactivity, often leading to user frustration. Our focused guide demystifies total blocking time and provides precise strategies to lower it, ultimately accelerating your website’s responsiveness.

Key Takeaways

  • Total Blocking Time (TBT) is a key metric indicating website responsiveness by measuring time intervals where long tasks block the main thread, affecting user experience and SEO rankings.

  • Improving TBT involves identifying and optimizing long tasks in JavaScript and CSS, through strategies such as code splitting, async loading, and minimizing file sizes to enhance page load speed and interaction readiness.

  • ChopChopify offers specialized solutions to address TBT issues, including in-depth performance audits, custom script optimizations, and tailored enhancement plans to improve overall website responsiveness.

Demystifying Total Blocking Time (TBT)

Total Blocking Time (TBT) represents the responsiveness of a site by measuring time intervals where long-running tasks, exceeding 50ms, block the main thread during page loading. These tasks, which kick in after the First Contentful Paint (FCP), aggregate the blocking durations and directly impact usability and perceived speed of a website. Understanding total blocking time measures is crucial for optimizing user experience. It is important to measure total blocking time to assess and optimize the performance of a website or web application.

To further clarify, here are the definitions of the different metrics:

  • TBT (Total Blocking Time) isolates and measures blocking tasks on the main thread to assess user interaction readiness.

  • TTI (Time to Interactive) focuses on the full interactivity of the webpage, measuring the time it takes for the page to become fully interactive.

  • FID (First Input Delay) specifically measures the response time to user input, indicating how quickly the page responds to user actions.

These metrics showcase different aspects of web performance, including core web vitals and page load performance for web pages.

The Significance of TBT in Web Performance

TBT, or Total Blocking Time, plays a vital role in enhancing user experience. Its importance extends to influencing website engagement, revenue generation and is also pivotal for search engine rankings. The performance score of a website deeply integrates the TBT metric—where it constitutes an essential element of metrics such as the Lighthouse Performance Score. Google states that achieving a TBT score below 300 milliseconds falls within acceptable limits while maintaining this measure under 200 milliseconds can be seen as notably exemplary.

Prioritizing efforts on refining your site’s TBT could yield considerable benefits concerning web performance across various dimensions.

Comprehensive Guide to Measuring TBT

To measure total blocking time (TBT), it involves calculating the collective duration of all long task segments that exceed 50 milliseconds. These occur between the First Contentful Paint and Time to Interactive benchmarks.

For evaluating TBT, Lighthouse and Google PageSpeed Insights are considered top tools. They prioritize this metric in their analysis. Chrome DevTools also offers a way to measure TBT: by opening its Performance tab, recording while you refresh the page yourself, then scrutinizing the ‘Main’ section for any long tasks adding up to your total blocking time.

Identifying and Addressing Long Tasks

Long tasks refer to any process in a web page’s execution that exceeds 50 milliseconds, contributing substantially to the Total Blocking Time and causing delays in user interactions. Even one long task can greatly affect a website’s performance metrics. Chrome DevTools and WebPageTest are valuable resources for pinpointing and depicting these lengthy operations that extend the website’s overall blocking time.

To cut down on Total Blocking Time, several tactics must be employed such as:

  • refining JavaScript code

  • segmenting longer tasks into shorter segments

  • implementing asynchronous programming techniques

  • applying code splitting strategies

  • transferring tasks onto web workers

JavaScript Execution Profiling

Profiling the execution of JavaScript tasks entails assessing the performance of functions within JavaScript. This assessment aids in refining task execution time through code modification. For example, to improve interactive responsiveness, tasks can be designed to relinquish control back to the main thread by implementing methods such as setTimeout() or utilizing postTask() from the scheduler API.

When we reshape our code based on insights gleaned from profiling JavaScript’s operational behavior, it is possible to drastically curtail total blocking time. Such refinements contribute meaningfully to enhancing a website’s reactivity and user experience.

Streamlining Third-Party Code

Implementing DNS-prefetch to initiate connections with third-party scripts in advance can diminish the loading delays they cause. This strategy is key for enhancing performance by curtailing blocking time due to these external plugins or scripts.

For WordPress websites, specifically, refining JavaScript files that contain third-party code proves crucial in diminishing Total Blocking Time. Such optimization has a profound effect on slashing the total time blocked and bolsters the website’s comprehensive functionality.

Enhancing Main Thread Efficiency

Optimizing the performance of the main thread, which handles tasks such as executing JavaScript, parsing HTML to build the DOM, and determining CSS styles and layout calculations, is essential for minimizing total blocking time. Enhanced management of this central processing unit can be achieved through utilization of the scheduler API by scheduling activities based on their urgency with functions like postTask().

Assigning levels of priority to various tasks—for instance marking them as ‘background’ or ‘user-blocking’—can streamline the sequence in which they are processed by the main thread. This stratification plays a key role in boosting overall efficiency.

Strategies to Reduce Total Blocking Time

Grasping the factors that affect Total Blocking Time paves the way for adopting methods to diminish it. These methods encompass:

  • Code splitting to refine JavaScript execution

  • Reduction of JavaScript file sizes

  • Elimination of superfluous JavaScript code

  • Postponing the loading of JavaScript files until pivotal content is visually rendered by the browser

  • Asynchronous script execution

Implementing these tactics can lead to a marked enhancement in TBT.

Contemporary web tools like v-memo and v-once directives within the Vue framework along with WebWorkers are instrumental in curtailing total blocking time.

Asynchronous Loading Techniques

The implementation of asynchronous loading methods is crucial for diminishing the total blocking time on a webpage. By incorporating the ‘async’ attribute within script elements, it enables browsers to download scripts concurrently as it proceeds with page rendering. Utilizing the ‘defer’ option instructs browsers to carry out script execution only once the rendering of the webpage has been completed.

Utilizing requestIdleCallback can be instrumental in postponing less urgent tasks until such a time that the browser enters an idle state, which serves to improve TBT further. Nevertheless, despite its advantages, not every script can be loaded asynchronously without issues due to certain dependencies or required sequence of operation. Hence meticulous testing is imperative for assuring their compatibility, especially when dealing with specific plugins and themes.

Optimizing CSS Delivery

CSS optimization is crucial for enhancing web performance, as it helps alleviate the workload of the main thread. This in turn can significantly cut down on Total Blocking Time. By condensing CSS files—removing comments, whitespace, and unnecessary code—the file size diminishes, which contributes to a reduction in Total Blocking Time.

By employing strategies such as utilizing the ‘content-visibility’ property in your CSS and leveraging the Intersection Observer API to postpone rendering of elements not currently visible on-screen, you can Decrease Total Blocking Time. These methods help streamline content processing and improve overall webpage efficiency.

Eliminating Unnecessary Characters in Code

By compressing JavaScript and CSS files through the removal of superfluous characters, including whitespace and comments, load performance can be significantly enhanced, subsequently decreasing Total Blocking Time (TBT). The minimization of these sizable assets is critical in lessening TBT as they are substantial contributors to extensive blocking times.

Excising unused portions of JavaScript code and CSS from websites plays a crucial role in boosting performance while diminishing its Total Blocking Time. Fundamentally, streamlined code results in accelerated loading periods leading to an improved user experience.

ChopChopify: Your Partner in Boosting Website Responsiveness

ChopChopify excels in addressing issues related to page speed, and is particularly adept at mitigating Total Blocking Time (TBT) concerns. This expertise significantly improves the quality of user interactions on webpages by focusing on TBT enhancements.

In dealing with WordPress platforms, ChopChopify suggests employing the Async JavaScript plugin as a strategy for bettering site reactivity. This plugin assists in asynchronously loading both JavaScript and CSS, thus optimizing your website’s responsiveness—a crucial factor that can be effectively managed with ChopChopify as your ally.

Advanced Optimization Techniques with ChopChopify

ChopChopify initiates the optimization process with a thorough examination of performance, particularly focusing on Total Blocking Time (TBT) concerns. This evaluation is customized to each client’s website architecture, factoring in distinct scripts and functionalities that affect TBT.

Following these comprehensive audits, ChopChopify crafts customized acceleration strategies aimed at mitigating the identified issues with Total Blocking Time. The strategic approach involves assigning high priority to essential operations while postponing non-essential JavaScript execution and leveraging advanced web technologies that support asynchronous resource loading.

Custom Script Optimization

ChopChopify employs sophisticated surveillance to pinpoint sluggish JavaScript operations that substantially add to Total Blocking Time. Employing tools for real-time profiling, the service detects scripts responsible for long tasks, supplying specific information to direct optimization pursuits.

Comprehensive analyses from tracking these scripts enable ChopChopyfy to concentrate on code segments most detrimental to TBT. They commonly overhaul scripts with an aim at enhancing efficiency through minimization of superfluous calculations and refinement of algorithms. Modifications are made so that script execution is conditional or delayed until needed, thus mitigating their effect on script loading times.

Personalized Performance Audits

ChopChopy’s methodology for enhancing web page performance includes a detailed analysis of Total Blocking Time (TBT), which is pivotal to tracking the duration until a web page reaches full interactivity—also referred to as Time to Interactive (TTI). This component of the audit process aims at consistently monitoring TBT.

In these evaluations, identifying and mitigating long tasks that may cause total blocking or delay user interactions becomes paramount. Such insights allow ChopChopy to pinpoint optimization opportunities essential in boosting the overall efficiency and responsiveness of the website.

Tailored Speed Enhancement Plans

ChopChopify carries out comprehensive performance evaluations to identify the key elements contributing to excessive Total Blocking Time on a client’s website. Leveraging the results of these audits, they craft tailored solutions through a combination of refined coding practices and strategic resource distribution to solve issues specific to each client.

Their role extends beyond initial fixes. ChopChopify commits itself to maintaining enhanced performance by establishing continuous monitoring systems and making periodic adjustments that cater to the dynamic nature of web development changes.


In summary, the Total Blocking Time (TBT) plays a crucial role as an indicator of web performance by gauging how responsive a website is. An excessive TBT score can negatively impact user experience, which in turn may harm search engine rankings and potentially decrease earnings from the site. Nevertheless, optimizing TBT is possible through various methods such as managing long tasks effectively, employing asynchronous loading techniques, and refining JavaScript and CSS delivery systems. With access to ChopChopify’s seasoned performance optimization professionals, improving your website’s responsiveness is well within reach.

Frequently Asked Questions

What is Total Blocking Time (TBT)?

Total Blocking Time, or TBT, quantifies the periods within which tasks that take more than 50ms to execute during a page’s load time prevent interaction with the main thread. This metric serves as an indicator of a site’s responsiveness by measuring these blocking intervals.

How can I measure TBT?

Tools such as Lighthouse and Google PageSpeed Insights, along with manual measurements using Chrome DevTools, can be used to measure total blocking time (TBT), offering essential insights into its performance.

How can I reduce TBT?

Implementing optimization strategies for JavaScript and CSS, employing asynchronous loading, and deferring tasks that are not critical can enhance page loading speed. These techniques aim to diminish the Total Blocking Time (TBT), thus facilitating a quicker interactive experience.

What is the role of ChopChopify in improving TBT?

ChopChopify excels at enhancing website performance by specifically targeting Total Blocking Time (TBT) improvements. They achieve this by conducting thorough performance audits, optimizing scripts, and devising personalized plans aimed at boosting page speed.

The importance of their work lies in its critical contribution to minimizing TBT, which is essential for superior website performance.

What is an acceptable TBT score?

A TBT score under 300 milliseconds is deemed satisfactory, while achieving a TBT score below 200 milliseconds is notably impressive.

It’s important to monitor this metric regularly to maintain the best possible performance for your website or application.

Back to blog

Leave a comment

Please note, comments need to be approved before they are published.