Total Blocking Time is a User-centric metric that is measured via Lab Tools. It is a part of Web Vitals but not of Core Web Vitals. This metric measures the input responsiveness.
Let's take a deep dive into TBT and understand how you can improve high TBT Scores.
What is Total Blocking Time?
Total Blocking Time (TBT) is a performance metric that measures the responsiveness of a website to user input.
It quantifies the total time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness. In simpler terms, it's the total time when your website is "busy" and cannot respond to user interactions like clicks, screen taps, or keyboard inputs.
The main culprit behind high TBT is typically long-running JavaScript tasks. However, other tasks like parsing HTML or updating the page layout can also contribute to a high TBT.
It's important to note that tasks before the First Contentful Paint don't count towards TBT, as there's no user interface available for interaction yet.
How to measure Total Blocking Time
TBT can be measured using various tools such as Chrome DevTools, Google's Lighthouse, PageSpeed Insights, and other Lighthouse Powered Third-Party Tools.
The Long Tasks API also allows you to access long tasks from JavaScript running on the page, providing a way to calculate total blocking time.
In Chrome DevTools, you can create a recording in the Performance tab to view long tasks and TBT. Long tasks are marked by a triangle in the top right corner of the task marker, and blocking time is indicated using red stripes.
Here's an example for the calculation of Total Blocking Time:
| Task | Task duration | Task blocking time |
|---|---|---|
| Task one | 350 ms | 250 ms |
| Task two | 90 ms | 47 ms |
| Task three | 35 ms | 0 ms |
| Task four | 28 ms | 0 ms |
| Task five | 155 ms | 105 ms |
| Total Blocking Time | 402 ms |
Only Long Tasks (which run on the main-thread for more 50 milliseconds) are counted towards the calculation of Total Blocking Time.
TBT Scores Explained
Ideally, TBT should be under 300 ms. TBT determines 25% of the overall Lighthouse Performance score. While TBT is not one of the Core Web Vitals metrics that impact Google rankings, it does have a significant impact on First Input Delay (FID), which does affect rankings as it a part of Google's Page Experience Algorithm.
Different TBT values lead to different Lighthouse scores. For instance, a TBT of 0.1s on mobile and 0.05s on desktop would give a Lighthouse score of 100, while a TBT of 1.2s on mobile and 0.8s on desktop would result in a score of 10.
Ingram Micro focused on reducing Total Blocking Time and saw a 35% increase in organic traffic by improving their homepage TBT by 40%.
How To Improve TBT
Improving TBT involves identifying the cause of CPU activity, reviewing third-party scripts, splitting up long tasks, and speeding up your code.
- Identify the cause of CPU activity: Use a CPU timeline recording, for example in Chrome DevTools, to identify what parts of your code are causing the long tasks.
- Review third-party scripts: Third-party code like chat widgets or A/B testing tools can add a significant amount of CPU processing to your page. Consider if some of them can be removed, or if they can be lazy-loaded when needed.
- Split up long tasks: Instead of running all JavaScript updates in one go, consider doing the work in stages. This way, user input can be handled in the gap between the two rendering steps, and the page stays responsive throughout.
- Speed up your code: Making your JavaScript code run faster will not only improve TBT but also make your page load faster in general.
Conclusion
Total Blocking Time is a crucial metric for understanding how your website's performance impacts user experience.
By measuring and optimizing TBT, you can ensure your site remains responsive to user interactions, leading to a better user experience and potentially improved search engine rankings.
Use the tools and techniques discussed in this article to measure and improve your TBT, and keep your website running smoothly and responsively.