Total Blocking Time (TBT)

TBT is particularly important for evaluating a website or application's interactivity and responsiveness, as it provides insight into how quickly the user interface can respond to user input.

A lower TBT contributes to a more responsive and smooth user experience. To provide a good user experience, Google suggests sites should strive to have a TBT of less than 200 milliseconds when tested on average mobile hardware.

Improving Total Blocking Time can be achieved through various optimization techniques including:

1. Optimize JavaScript execution: Heavy JavaScript execution can significantly impact TBT. To optimize it, minimize the use of long-running tasks by breaking them into smaller chunks, use the requestIdleCallback() method for low-priority tasks, and utilize Web Workers to offload computationally expensive tasks.
2. Code splitting and lazy loading: Implement code splitting and lazy loading techniques to only load JavaScript modules when they are needed. This reduces the amount of JavaScript that needs to be parsed and executed, improving TBT.
3. Minimize the impact of third-party scripts: Third-party scripts can contribute to TBT by executing long tasks on the main thread. Evaluate the necessity of third-party scripts, defer their loading, or use async attributes to minimize their impact on TBT.
4. Prioritize input handling: Prioritize event handling related to user input, such as click or touch events, by utilizing microtask queues or wrapping input handlers in requestAnimationFrame().
5. Use passive event listeners: Passive event listeners inform the browser that the event handler will not call preventDefault() to cancel the event. This allows the browser to optimize scroll and touch events, improving TBT.
6. Optimize CSS: Heavy CSS can impact TBT due to the time required for style calculations and layout. Minimize the complexity of your CSS selectors, avoid using expensive CSS properties, and remove unused styles to optimize rendering performance.
7. Debounce and throttle event handlers: Debouncing and throttling can help limit the frequency of event handlers being called, reducing the workload on the main thread and improving TBT. This is particularly important for events such as scrolling and resizing.
8. Monitor and optimize main thread work: Regularly analyze main thread activity using browser performance tools, such as Chrome DevTools, to identify long tasks and areas for optimization.

These are just a couple of suggestions for optimizing your TBT results. Get into the performance-first mindset with our comprehensive frontend performance checklist.

Continuously monitor and analyze your website's performance to identify areas for improvement and maintain a high-performing site.