What is Total Blocking Time (TBT)?
Total Blocking Time (TBT) measures the amount of time during a webpage load when the browser’s main thread is blocked for more than 50 milliseconds, preventing it from responding to user input. This metric is crucial for evaluating a website’s responsiveness and ensuring a smooth user experience.
TBT is calculated after First Contentful Paint (FCP) and typically stops measuring at Time to Interactive (TTI) in tools like Lighthouse.
Key Concepts of TBT
- Main Thread Blockage:
A task running on the main thread for over 50 milliseconds is considered a Long Task, and the browser must wait for its completion before responding to user actions. - Blocking Time Calculation:
The blocking time is the duration exceeding 50 ms for each long task. The total blocking time is the sum of all blocking times during the measured period.
Example: TBT Breakdown
| Task Duration (ms) | Task Blocking Time (ms) |
|---|---|
| Task 1: 250 | 200 |
| Task 2: 90 | 40 |
| Task 3: 35 | 0 |
| Task 4: 30 | 0 |
| Task 5: 155 | 105 |
| Total Blocking Time | 345 ms |
How TBT Relates to Other Metrics
- TBT vs. INP (Interaction to Next Paint):
- TBT helps detect potential interaction delays in lab testing.
- INP measures responsiveness based on real-world user interactions.
- TBT vs. TTI (Time to Interactive):
- TBT measures responsiveness before a page becomes interactive.
- It’s less prone to outliers compared to TTI, making it more reliable in specific scenarios.
How to Measure TBT
- Recommended Tools:
- Lighthouse: Provides detailed performance audits and specific recommendations.
- WebPageTest: Offers insights into page performance metrics, including TBT.
- Good TBT Score:
- Aim for a TBT of less than 200 milliseconds on mobile devices for optimal user experience.
Also Read: Total Blocking Time (TBT) in Core Web Vitals Improvement Strategies
Tips to Improve TBT
- Optimize Long Tasks:
Break down lengthy tasks into smaller, non-blocking tasks. - Reduce JavaScript Execution Time:
- Minimize heavy scripts.
- Use techniques like lazy loading and code splitting.
- Reduce Third-Party Code Impact:
Limit the use of third-party tools or optimize their loading mechanisms. - Minimize Main Thread Work:
Reduce resource-heavy operations that delay responsiveness. - Lower Request Counts:
Decrease the number of HTTP requests and optimize file transfer sizes.
Improvement Example
Scenario: A page with high TBT due to a heavy analytics script.
Solution:
- Defer the analytics script to load after TTI.
- Replace the script with a lightweight alternative.
Also Read: Detailed Overview: Interaction to Next Paint (INP)
Why TBT Matters ?
A low TBT ensures that users perceive your website as fast and responsive, which improves overall satisfaction and reduces bounce rates. To improve TBT, optimize your scripts and minimize main thread work, ensuring a smoother browsing experience.
By focusing on TBT and related metrics like INP, you can build websites that are fast, efficient, and user-friendly. Regular audits using tools like Lighthouse will help maintain optimal performance.