Learn Measure Blog About

Total Blocking Time

Total Blocking Time (TBT) is one of the metrics tracked in the Performance section of the Lighthouse report. Each metric captures some aspect of page load speed.

The Lighthouse report displays TBT in milliseconds:

A screenshot of the Lighthouse Total Blocking Time audit

What TBT measures

TBT 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. The sum is calculated by adding the blocking portion of all long tasks between First Contentful Paint and Time to Interactive. Any task that executes for more than 50 ms is a long task. The amount of time after 50 ms is the blocking portion. For example, if Lighthouse detects a 70 ms long task, the blocking portion would be 20 ms.

How Lighthouse determines your TBT score

Your TBT score is a comparison of your page's TBT time and TBT times for the top 10,000 sites when loaded on mobile devices. The top site data includes 404 pages.

This table shows how to interpret your TBT score:

TBT time
(in milliseconds)
Color-coding
0–300 Green (fast)
300-600 Orange (average)
Over 600 Red (slow)

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

How to improve your TBT score

See What is causing my long tasks? to learn how to diagnose the root cause of long tasks with the Performance panel of Chrome DevTools.

In general, the most common causes of long tasks are:

  • Unnecessary JavaScript loading, parsing, or execution. While analyzing your code in the Performance panel you might discover that the main thread is doing work that isn't really necessary to load the page. Reducing JavaScript payloads with code splitting, removing unused code, or efficiently loading third-party JavaScript should improve your TBT score.
  • Inefficient JavaScript statements. For example, after analyzing your code in the Performance panel, suppose you see a call to document.querySelectorAll('a') that returns 2000 nodes. Refactoring your code to use a more specific selector that only returns 10 nodes should improve your TBT score.

Unnecessary JavaScript loading, parsing, or execution is usually a much bigger opportunity for improvement on most sites.

How to improve your overall Performance score

Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.

Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:

Lighthouse: Opportunities section

See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.

Resources

Last updated: Improve article