<aside> 🌐 TBT is documented on the Google Dev website here. This page translates and summarises this material.
</aside>
<aside> 💡 Total Blocking Time (TBT) is an important summary metric for measuring page responsiveness during loading. It quantifies how non-interactive a page is before it becomes reliably interactive.
</aside>
Total Blocking Time is a metric that measures the total amount of time the main thread is blocked long enough for a user interaction to not create a reaction.
Its times are between the First Contentful Paint (FCP) and the Time to Interactive (TTI), i.e. between the display of the first piece of content and the moment when the page is interactive.
The main thread is considered "blocked" when a task lasts longer than 50ms. If the user interacts at this point, the site will not respond until the task is complete, and this may be perceived.
The blocking time is the time of the task beyond this 50ms. The TBT is the sum of all blocking times.
For example, consider this main thread:
Of the 5 tasks, 3 are blocking: the first 2 and the last one.
The first lasts 250ms and therefore generates 200ms of blocking time. The second lasts 90ms, and generates 40ms of blocking time. The last one lasts 155ms and generates 105ms of blocking time.
The TBT is 345ms (the sum of blocking times), while the main thread lasted 560ms (the sum of all times).
Good | < 300ms |
---|---|
Average | between 300ms and 600ms |
Bad | > 600ms |