Total Blocking Time

Total Blocking Time (TBT) is a performance metric that quantifies how unresponsive a webpage is to user input during the loading process. It essentially captures the total amount of time that a page is "blocked" and unable to respond to user interactions. Let's delve into what TBT is, why it matters, and ways you can optimize it.

What Is Total Blocking Time?

Total Blocking Time measures the total time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread is blocked for long enough to prevent input responsiveness.

In other words, it sums up all the periods when the browser's main thread is busy processing something (like parsing JavaScript) and can't respond to user interactions like clicks or scrolls.

A "long task" is typically considered one that takes over 50 milliseconds. TBT adds up all the time that goes over this 50-millisecond threshold for each task.

Why Is TBT Important?

1. User Experience: High TBT means that users may experience delays when interacting with the page, leading to frustration and a poor overall experience.

2. Performance Analysis: TBT provides a more detailed view of a page's interactivity performance, helping developers identify bottlenecks and areas for improvement.

3. SEO Impact: Google has indicated that user-centric performance metrics, like TBT, can impact search rankings, so optimizing for a low TBT may enhance a site's visibility.

How to Improve TBT

Improving TBT typically involves reducing the workload on the main thread during loading. Here's how you can approach this:

1. Optimize JavaScript: Break down large JavaScript bundles, defer or asynchronously load non-essential scripts, and remove unused code.

2. Minimize Long Tasks: Identify and break up long-running tasks into smaller, manageable chunks.

3. Utilize Web Workers: Offload some JavaScript processing to background threads using Web Workers, freeing up the main thread.

4. Optimize CSS: Remove unused CSS and minimize the use of costly styles that may require complex calculations.

5. Use Proper Loading Strategies: Lazy load off-screen images, and use the preload attribute for essential resources.

6. Avoid Large Layout Shifts: Minimize layout shifts as they can cause additional calculations, adding to TBT.

Conclusion

Total Blocking Time is a vital metric that helps gauge a page's responsiveness to user interactions during the loading process. By focusing on TBT and implementing optimizations, website owners and developers can provide a smoother, more responsive user experience.