Total Blocking Time: What is it?

Total Blocking Time: What is it?

What is Total Blocking Time?

Total Blocking Time is a metric that counts how long a page is unable to respond to user input such as mouse clicks, screen touches, or keyboard presses. Between First Contentful Paint and Time to Interactive, the amount is calculated by adding the blocking proportion of all long tasks.

A task’s blocking time is defined as the time it takes to complete a task that is longer than 50ms. And a page’s total blocking time is the sum of the blocking times for each long task that occurs between First Contentful Paint and Time To Interactive.

The total blocking time for your page is the sum of all of these times.

Total Blocking Time - Browser Main-Thread

A Long Task is defined as any task that takes more than 50ms to complete. There are three long tasks in the example above (in red).

As an example, there are 5 tasks on the main-thread in the screenshot above, three of which are Long Tasks because their individual durations exceed 50ms. The following are the blocking times for each Long Task:

  • Task A – 170ms duration
  • Task B – 20ms duration
  • Task E – 95ms duration

In this case, the Total Blocking Time is 285ms. The Total Blocking Time would be 450ms if the main-thread only had one task that took 500 ms.

Time To Interactive informs you when your page is fully interactive; Total Blocking Time tells you which JavaScript tasks took the most time to complete.

Time To Interactive considers the page to be fully interactive. If there have been no long tasks in the main thread for at least 5 seconds.

Consider the scenarios below:

  • Over a 5-second period, three 60ms tasks were spread out.
  • There is only one 5-second task.

Time To Interactive would be pushed back by the same amount in both scenarios.

Total Blocking Time - Long Tasks

Scenario A is largely interactive throughout the page load because no longer tasks consume too much of the browser’s resources.

However, because the first situation has a Total Blocking Time of only 30ms and the second has a Total Blocking Time of 4950ms, both instances would feel significantly different to a user.

Scenario A is largely interactive throughout the page load because no long tasks consume too much of the browser’s time, whereas Scenario B is completely uninteractive while the browser is occupied with the long task.

Total Blocking Time is a useful companion metric to Time To Interactive and an insightful stand-alone metric.

Total Blocking Time Thresholds

Total Blocking Time calculates the total time between First Contenful Paint and Time To Interactive during which the page is unable to respond to user input and displays the result in milliseconds.

The following are the Total Blocking Time thresholds:

  • Good – There’s nothing to do here = Total Blocking Time of 150ms or less.
  • OK, but consider an improvement = Total Blocking Time between 150 and 224ms.
  • Longer than the recommended time = Total Blocking Time between 224 and 350ms.
  • Much longer than the recommended time = Total Blocking Time higher than 350ms.

How Does Lighthouse Calculate Your Total Blocking Time Score

Your Total Blocking Time score is based on a comparison of your page’s Total Blocking Time time to the Total Blocking Time times of millions of other real-world sites when loaded on mobile devices. To see how Lighthouse score thresholds are set, see How metric scores are determined.

The following table illustrates how to interpret your Total Blocking Time score:

Total Blocking Time time
(in milliseconds)
Color Codes
0–200Green (fast)
200-600Orange (moderate)
Over 600Red (slow)

Total Blocking Time – Score Table

How can Total Blocking Time be improved

Total Blocking Time is strongly connected to JavaScript execution, so any improvements to JavaScript execution (in general, Time To Interactive optimizations) are likely to reduce your Total Blocking Time.

Some of these optimizations are as follows:

  • Reducing JavaScript execution time
  • Minimizing main-thread work
  • Removing unused JavaScript
  • Reducing the impact of third-party code
  • Replacing large JavaScript libraries with smaller alternatives

How Can You Boost Your Overall Performance Score

Determine which improvements will add the most value to your page by looking at the Opportunities section of your Lighthouse report. The greater the significance of the opportunity, the greater the impact on your Performance score. The Lighthouse screenshot below, for example, shows that removing render-blocking resources gives the best results:

Speed Index - Opportunities Section

Google PageSpeed Insights – Opportunities Section

The Impact Of Total Blocking Time On Your Performance Score

Total Blocking Time accounts for 25% of the Performance Score as a Web Vital metric, making it a key metric to improve.

This means that optimizing your Total Blocking Time can be one of the most effective ways to improve the responsiveness of your website. With Pegasaas Accelerator WP our Web Performance Optimization plugin for WordPress will improve your Total Blocking Time responsiveness in just one click.

Pegasaas will save you hours of learning time and help you manage your optimizations more efficiently. Sign up for a 14-day free trial today to get started.

Comments are closed.