Total Blocking Time

What is Total Blocking Time?

Total blocking time, (TBT), is a metric designed to measure the user experience aspect of responsiveness. It measures how quickly a device responds to a user requested action, such as click on a link, menu or scroll down, and as one of the Web Vital metrics is considered a key component to monitor.

TBT is calculated as the sum of all time periods between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread is blocked for long enough, typicaly 50ms, to prevent input responsiveness.

Keeping the TBT low helps to ensure a visitor to the website that the web page is usable.

Why does TBT Matter?

Along with Largest Contentful Paint and Cumulative Layout Shift, TBT is one of the three core Google Web Vital metrics.

TBT is considered to directly affect user experience in relation to onsite conversion and bounce rate.

When a visitor to your website loads a web page on their phone or desktop and then try to interact with it they may become frustrated when their request is delayed or worse, nothing happens.

If the TBT is too long, then the web page is considered unresponsive. This could then be penalised by Google in its ranking processes. TBT is a metric that is measured in controlled testing conditions, referred to a ‘Lab testing’, but it is closely related to, and considered as an acceptable surrogate for, First Input Delay (FID), and improving it is considered beneficial to FID as well.

What Marketing Metrics does TBT affect?

If TBT is slow, for example, greater than 50 ms, it is likely that the user experience will have noticeable delays, sluggish page interaction and possibly ‘janky’ behaviour.

A high TBT value tends to have the greatest impact on:

• The first impression of how responsive a web site is.
• Bounce rate, however, problems can be amplified on mobile connected devices.
• Onsite Conversion, as the ability to click a button such as, add to cart or a product link, can be slow and frustrating.
• • Search Ranking; Google favours and priorities the indexing of web pages based on high quality user experience. This in turn, feeds directly as a page experience signal and can influence, ranking the page higher in search results.

Consequently, TBT is an important user experience metric for a web page, as it reassures the user that the web page is usable.

How is TBT calculated?

Measuring TBT is a complex process as it requires observation of browser CPU processing between the two specific timing points of FCP and TTI. TBT is then calculated by adding together all CPU processing tasks that take longer than 50ms.

In our example, the total blocking time is calculated from the CPU time of each of the 2 tasks above 50ms. Blocking time by each task above 50ms is; 70ms for task 1 and 80ms for task 3. This gives a cumulative TBT of 150ms. Task 2 is under 50ms so no blocking time is accumulated.

What is a good TBT score?

Web pges with less than 300ms (milliseconds) of blocking time can be considered as fast, between 300ms and 600ms as average and where the duration is over 600ms their rating is slow.

What causes Poor TBT?

The amount of JavaScript and how it is processed is one of the primary causes of high TBT for a web page. This type of problem is not the most simplest of issues to resolve, but it is not impossible.

How to Measure TBT

TBT is a calculated metric based on events within the browser. This makes it a difficult metric to capture data for as it must be calculated after these events have completed.

However, there are several tools available that aid in capturing TBT values these include:

• Lighthouse
• Google developer Tools
• Page Speed Insights
• Self instrumentation with a JavaScript SDK

As each of these methods predominately provide a snapshot observation, they require further methods to enable automated capture and tracking to enable ongoing and historical analysis.

Webspeed Index provides comprehensive functionality that enables you to chart TBT performance over time. Benchmarking against other web pages, both internal and competitive, enables measurement of performance and the identification of both improvement or regression

Google uses TBT as a key metric of their Web Vitals algorithm, making it important to ensure your website has a low TBT rating as this provides an area of competitive opportunity.