Total Blocking Time: Understanding TBT and Core Web Vitals

Total Blocking Time is a crucial performance metric in Core Web Vitals. In this blog, we’ll explore what Total Blocking Time is, why it matters for user experience, and how to optimize it using top tools. Understanding TBT can help improve your website's performance and overall interactivity.

What is Total Blocking Time (TBT)?

TBT is a critical performance metric that evaluates the responsiveness of a webpage during its loading phase. It specifically measures how long the main thread is blocked, which prevents the browser from responding to user interactions like clicks, scrolls, or key presses.

What is the Main Thread?

The main thread is the part of a browser responsible for processing essential tasks, including rendering the webpage, executing JavaScript, and handling user interactions. When the main thread is busy, it cannot respond to user inputs, leading to delays or a sluggish user experience.

How is TBT Measured?

1. Defining Long Tasks:

A task is considered a long task if it runs on the main thread for more than 50 milliseconds. During a long task, the browser cannot pause or interrupt it to handle user inputs, causing the main thread to be "blocked."

2. Calculating Blocking Time:

The blocking time for each long task is the portion of the task’s duration that exceeds 50 milliseconds. For example:

If a task lasts 120 milliseconds, the blocking time is 120−50 = 70 milliseconds.

3. Summing Blocking Times:

The TBT is the cumulative blocking time of all long tasks that occur between:

• First Contentful Paint (FCP): When visible content first appears.
• Time to Interactive (TTI): When the page becomes fully interactive.

For instance, if several long tasks collectively block the main thread for 345 milliseconds, the TBT is 345 milliseconds.

Why TBT is Important?

Total Blocking Time (TBT) is more than just a metric—it’s a key indicator of a website's responsiveness and overall performance. It plays a significant role in user experience, search engine rankings, and understanding the underlying issues that slow down your site. Let’s break down why TBT is essential and what contributes to its increase.

Impact on Performance and User Experience

• Interactivity Delays: A high TBT means the browser’s main thread is blocked for extended periods during the page load. This prevents it from responding to user inputs like clicks or scrolling, creating frustration and the perception of a sluggish or unresponsive site.
• User Perception: Users expect fast-loading, interactive web pages. Even a short delay caused by blocking time can lead to disengagement, reduced session duration, and higher bounce rates, especially on mobile devices.

Influence on Search Engine Rankings

• Core Web Vitals: Total Blocking Time is closely tied to Core Web Vitals, Google’s key metrics for measuring user experience. A poor TBT negatively affects your site’s Largest Contentful Paint (LCP) and First Input Delay (FID), which are critical for search engine rankings.
• SEO Impact: Pages with optimized TBT scores are favored by Google, as they contribute to faster load times and better user experiences. This directly improves your website's visibility and organic traffic.

Causes of Increased TBT

• Heavy JavaScript Execution: Excessive JavaScript can overload the main thread with tasks that take longer to execute, resulting in long blocking times.
• Unoptimized Third-Party Scripts: Embedding third-party libraries or widgets (e.g., ad networks, analytics tools) can introduce long tasks, increasing the TBT.
• Inefficient Rendering: Complex CSS or unoptimized rendering processes can also block the main thread, delaying interactivity.
• Large Tasks: Chunky or unoptimized code bundled into a single execution block can prevent the browser from processing user input in a timely manner.

How TBT Relates to Other Metrics

• Time to Interactive (TTI): TBT directly affects TTI because the more time the main thread spends blocked, the longer it takes for the page to become interactive.
• First Input Delay (FID): While TBT is measured in lab environments, it correlates with FID in real-world scenarios, reflecting how quickly a page responds to user input.

Core Web Vitals and the Role of TBT

What are Core Web Vitals?

Core Web Vitals are Google’s key performance metrics that measure website user experience. They include:

1. Largest Contentful Paint (LCP): Tracks loading speed.
2. First Input Delay (FID): Measures responsiveness.
3. Cumulative Layout Shift (CLS): Evaluates visual stability.

These metrics ensure a site loads quickly, responds fast, and remains visually consistent.

How TBT Supports Core Web Vitals

Although not a Core Web Vital, Total Blocking Time (TBT) directly impacts FID by reducing the main thread’s blocking time, improving responsiveness. Optimizing TBT also enhances LCP and CLS by ensuring a smoother loading experience. Focusing on TBT helps improve Core Web Vitals, leading to better user satisfaction and thus higher SEO rankings.

Measuring and Improving TBT

A good Total Blocking Time (TBT) score is critical for delivering an optimal user experience. When tested on average mobile hardware, a TBT of less than 200 milliseconds is considered excellent. Scores above this threshold indicate potential performance issues that could frustrate users.

Here’s a breakdown of TBT thresholds:

• Good: Less than 200 ms
• Needs Improvement: 200 ms to 600 ms
• Poor: Over 600 ms

Striving for a good TBT score not only improves your Lighthouse performance rating but also enhances user satisfaction.

How to Measure TBT

TBT should primarily be measured in a controlled lab environment to minimize variance caused by real-world user interactions. Tools like Lighthouse and WebPageTest are the most reliable options for this.

• Lighthouse Audit: Run a Lighthouse performance audit to get a detailed report on your TBT and specific recommendations for optimization.
• Field Measurement: While not ideal for TBT due to high variance, field measurements can use newer APIs like the Long Animations Frame API for additional insights.

Improving Your TBT Score

Improving TBT involves reducing main thread blocking time by addressing the root causes of long tasks. Here are actionable strategies:

Optimize JavaScript Execution:

• Minimize JavaScript payloads using techniques like code splitting.
• Remove unused JavaScript to reduce unnecessary processing.
• Defer non-critical JavaScript execution to prevent blocking.

Reduce Third-Party Script Load:

Limit or optimize third-party scripts (e.g., ads, analytics) that can introduce long tasks.

Refactor Inefficient Code:

• Use Chrome DevTools to identify long tasks.
• For example: If document.querySelectorAll('a') returns 2000 nodes, refactor it to return only the required nodes.
• Streamline complex selectors and scripts to reduce computation time.

Improve Rendering Processes:

Optimize CSS to avoid inefficient rendering tasks that block the main thread.

Tools to Aid TBT Optimization

1. Chrome DevTools Performance Panel: Analyze long tasks and find opportunities for optimization.

Image Ref

2. Lighthouse Suggestions: Use the suggestions in a Lighthouse audit report to address specific issues affecting TBT.

Image Ref

Conclusion

Total Blocking Time (TBT) is a vital performance metric that measures the responsiveness of a webpage during its loading phase. By understanding what TBT is, why it’s important, and how it impacts Core Web Vitals, developers can prioritize optimizations to enhance user experience and SEO rankings. Measuring TBT using tools like Lighthouse and addressing issues like long tasks and unoptimized scripts are essential steps toward achieving a good TBT score of under 200 milliseconds.

Improving TBT leads to faster, more interactive websites, ensuring better performance and satisfaction for users. For more detailed insights, check out this guide.