Total Blocking Time (TBT) is a time based metric that describes JavaScript main thread activity. It is useful for understanding how long a page is unable to respond to user input. TBT is designed to be more reliable than Time to Interactive, which can show more variation due to rogue JavaScript tasks. TBT is not a Core Web Vital. It is the lab stand-in for Interaction to Next Paint, which is one, and which can only be measured from real visits.
How is Total Blocking Time calculated?#
Total Blocking Time totals the "blocking period" of long JavaScript tasks that occur after First Contentful Paint. The blocking period is the duration of a task that is over 50ms. For example, a task that is 120ms in duration will be calculated as 70 ms of blocking time.
In Calibre, Total blocking time is calculated by Lighthouse, which is part of our testing suite.
What Total Blocking Time measurement is fast?#
Measured on average mobile hardware, pages with less than 200 ms of blocking time can be considered fast, between 200 and 600 ms as average, whereas durations over 600 ms are considered slow.
How to improve Total Blocking Time?#
Total Blocking Time measures main-thread work that blocks input, so reducing and breaking up JavaScript is the main lever. Because TBT is the lab proxy for responsiveness, improving it also tends to improve Interaction to Next Paint in the field. Work through these steps:
1. Ship less JavaScript#
- Send less code: Code-split, tree-shake and remove unused JavaScript, and reduce your bundle size.
- Lazy load below the fold: Defer features and components that are not needed for the initial view.
2. Break up and defer long tasks#
- Split long tasks: Break tasks longer than 50ms into smaller pieces and yield to the main thread with
scheduler.yield()orsetTimeout(). - Defer non-critical scripts: Load non-essential scripts with
asyncordefer, and reduce the cost of hydration.
3. Reduce third-party and main-thread work#
- Audit third-party scripts: Tag managers, analytics and chat widgets add main-thread execution. Load them lazily, or move them off the main thread with a web worker (for example, Partytown).
- Find the long tasks: Use the synthetic Long Task Timeline to see which tasks block the main thread.
4. Monitor Total Blocking Time over time#
- Track TBT with Calibre: TBT is measured in synthetic tests. Set a TBT performance budget and compare across pages on the Pages Leaderboard.
- Compare against thresholds: TBT is good at 200ms or less and poor above 600ms. See Core Web Vitals thresholds.