Total Blocking Time

Total Blocking Time, or TBT, is one of the six metrics that make up the Performance section within a Lighthouse report. Total Blocking Time is the total amount of time, in milliseconds, that your page was unable to be interacted with by the user. Specifically, it considers all the long tasks between the First Contentful Paint and Time to Interactive. Long tasks are any JavaScript code that blocks any main thread from happening, thereby causing the interface to pause during the page load process. Where Time to Interactive tells you how quickly your page becomes fully interactive to a user, Total Blocking Time tells you what JavaScript tasks are taking the longest to execute.

In terms of the Total Blocking Time, any tasks that take longer than 50 milliseconds are defined as a long task. The amount of time after that is the blocking time, so for example, if a long task takes 60 milliseconds, the blocking portion would be 10 milliseconds. And like some of the previous metrics we have discussed, like the Speed Index and Tim to Interactive, the Lighthouse score represents how your pages compare to other websites when loading on mobile devices. On the Lighthouse report you will see a color-coded representation of your score. The ideal Total Blocking Time score should be under 200 milliseconds and will show up as green. Any score between 200 and 600 milliseconds (just over a half second) is considered moderately fast and will be color-coded as orange. Any Total Blocking Time score over 600 milliseconds will be color-coded red.

If the Total Blocking Time audit comes up red during your Lighthouse test, you will want to pay special attention to the recommendations. Unlike some of the other Performance metrics we have discussed, which may account for 10 to 20 percent of the Lighthouse score, Total Blocking Time accounts for 30 percent of the overall Lighthouse performance score. This is due to primarily to the fact that JavaScript, for all its great benefits, can also cause the most headaches to web developers, as it is the major factor in determining how you pages load and one of the most common barriers to optimizing web page performance. Some of the same optimizations for reducing the Total Blocking Time we have already discussed in previous sections, like reducing main-thread work, cleaning up JavaScript and any third-party code, and minifying CSS and JavaScript. The tradeoffs of developing an eye-catching and interactive web page, and a web page that loads quickly, should be considered carefully with the user experience in mind.