Total Blocking Time (TBT) in Page Insights measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses, during its loading phase. It's a crucial metric for understanding a website's responsiveness and is a key indicator of potential user experience frustrations.
What is Total Blocking Time (TBT)?
Total Blocking Time (TBT) quantifies the cumulative duration where the main thread of a web page is blocked for long enough to prevent it from responding effectively to user interactions. This blocking occurs between the First Contentful Paint (FCP) and Time to Interactive (TTI) events.
The sum is calculated by adding the blocking portion of all "long tasks" that occur during this critical period. A "long task" is defined as any task that occupies the main thread for more than 50 milliseconds (ms). The "blocking portion" is the time exceeding this 50ms threshold. For example, if a task takes 150ms, its blocking portion is 100ms (150ms - 50ms). These long tasks prevent the browser from responding to user input, leading to a frustrating, unresponsive experience.
Why is TBT Important for User Experience?
TBT is a vital metric because it directly correlates with how users perceive the responsiveness of your website. A high TBT value means users will likely experience delays when trying to click buttons, scroll, or interact with forms, leading to:
- Frustration: Users become impatient when a page appears loaded but doesn't react to their actions.
- Poor First Impressions: A slow and unresponsive initial experience can lead to users abandoning your site.
- Impact on Core Web Vitals: While TBT itself is not a Core Web Vital, it is highly correlated with First Input Delay (FID), which is a Core Web Vital. Improving TBT can significantly help improve your FID scores.
Understanding TBT Scores in Page Insights
PageSpeed Insights, powered by Lighthouse, provides TBT scores and categorizes them to help you understand your page's performance:
| TBT Score Range | Performance Category | Explanation |
|---|---|---|
| 0-200 ms | Good | The page is highly responsive to user input during loading. |
| 201-600 ms | Needs Improvement | The page might experience noticeable delays in responding to user input, impacting user experience. |
| >600 ms | Poor | The page is significantly blocked from responding to user input, leading to a frustrating user experience. |
These scores are based on data collected in a lab environment (simulated load conditions), which makes TBT an excellent diagnostic tool for identifying performance bottlenecks.
How to Improve Total Blocking Time
Optimizing TBT involves minimizing the main thread's work during the critical loading phase. Here are practical strategies to reduce your TBT:
- Minimize JavaScript Execution Time:
- Code Splitting: Break down large JavaScript bundles into smaller, on-demand chunks.
- Tree Shaking: Remove unused code from your bundles.
- Defer Non-Critical JS: Load scripts that aren't essential for initial rendering later. Use
deferorasyncattributes.
- Break Up Long Tasks:
- Yield to the Main Thread: Instead of running a single, long script, break it into smaller, asynchronous tasks. Use
setTimeout,requestAnimationFrame, orisInputPendingto yield control back to the main thread, allowing the browser to respond to user input.
- Yield to the Main Thread: Instead of running a single, long script, break it into smaller, asynchronous tasks. Use
- Optimize Third-Party Scripts:
- Audit Third-Party Code: Identify and defer or remove unnecessary third-party scripts (e.g., ads, analytics, social media widgets) that might be blocking the main thread.
- Lazy Load: Load third-party scripts only when they are needed or visible in the viewport.
- Reduce Main Thread Work:
- Minimize DOM Manipulation: Excessive or inefficient manipulation of the Document Object Model (DOM) can be very costly. Batch updates where possible.
- Reduce Style and Layout Recalculations: Avoid styles that trigger frequent layout recalculations.
- Web Workers:
- Move computationally intensive JavaScript operations to a Web Worker. This keeps the main thread free to handle user interactions and rendering.
Where to Find TBT in Page Insights and Other Tools
You can find your website's Total Blocking Time score in the "Performance" section of:
- Google PageSpeed Insights: This tool provides a comprehensive report, including TBT, along with recommendations for improvement.
- Lighthouse: Directly integrated into Chrome DevTools (under the "Audits" tab), Lighthouse offers detailed TBT metrics and diagnostic information.
- web.dev/measure: Another Google tool that provides performance audits.
By actively monitoring and improving your TBT, you can ensure a smoother, more responsive, and enjoyable experience for your website visitors.
