Total Blocking Time

Total Blocking Time (TBT) is a performance metric used to quantify how much time a page is blocked from responding to user input. It measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) during which the main thread was blocked long enough to prevent input responsiveness.

More About Total Blocking Time

Relation to User Experience: TBT is important for understanding the interactivity of a webpage. High TBT values can indicate that a page looks interactive but isn’t actually responsive to user inputs, which can be frustrating for users.

Causes of High TBT: Often caused by heavy JavaScript execution. Long tasks on the main thread, like complex calculations or excessive DOM manipulation, can block user inputs.

Optimization: Reducing TBT involves breaking up long tasks into smaller, asynchronous tasks, optimizing JavaScript execution, and removing or deferring non-critical scripts and tasks.

Monitoring and Tools: Tools like Google’s Lighthouse and PageSpeed Insights can help identify and measure TBT, offering insights into potential optimizations.

Total Blocking Time is an essential metric for assessing the interactivity and smoothness of a user’s experience on a webpage. Optimizing for TBT is crucial for any site looking to provide a responsive and engaging user interface, especially for web applications that rely heavily on client-side scripting.