Lighthouse is an open-source tool, used to improve the overall performance of web pages, by rate measuring the quality of each page within your website. It can be run against any web page, public or private. The 6 main performance metrics are as follows:
- First Contentful Paint
- Largest Contentful Paint
- Speed Index
- Total Blocking Time
- Cumulative Layout Shift
- Time to Interactive
In this post, we'll focus on the Total Blocking Time (TBT) metric.
What is TBT?
Total Blocking Time measures the total time it takes for the page to become responsive to user input such as mouse clicks or keyboard presses.
The TBT is calculated by adding the blocking portion of all long tasks between First Contentful Paint and Time to Interactive.
How is TBT measured?
The Lighthouse TBT score is calculated by comparing the total blocking time of your page, with the total blocking time of the top 10,00 websites within the HTTP archive, when rendered on mobile devices. This includes 404 pages also.
A TBT of below 300, is considered fast. 300-600 would be considered moderate, and anything over 600 would be considered as slow.
Having a low TBT score will reassure the user that the page is ready and responsive, ensuring they have a positive user experience and are able to navigate/interact as necessary.
How to improve TBT
Usually, the tasks likely to take the longest, are:
document.querySelectorAll('a')that returns 2000 nodes could be refactored to only return 10 nodes.
With an automated testing service such as Metritool, you can generate a report on your website, retrieve your Total Blocking Time and a series of suggestions on how it may be improved.