TBT (total blocking time) is a metric found when optimising page load speeds.
The TBT for a given page is calculated by adding up the time that is spent blocked (waiting for the network to catch up before proceeding) and the time that is spent loading.
A TBT score of 0 means that there was no waiting time at all, because everything happened at once.
A short explanation would be that it’s an acronym for effectiveness.
When optimising page load speeds, it’s important to reduce TBT as much as possible in order to achieve a faster user experience.
On a top-level, you can improve TBT by:
- Decreasing the total number of requests made by the page. Use fewer external CSS resources and JavaScript libraries.
- Optimizing images to a smaller size before loading them onto the page.
- Loading scripts at the bottom of the page instead of in the head, so they don’t block other content from being loaded first.
- Using a CDN to serve your files instead of hosting them on your servers which can result in significant latency savings.
Optimizing the Critical Rendering Path
Optimizing the critical rendering path is an important step when it comes to improving TBT.
Luckily, all browsers have a very efficient algorithm for determining what page content has to be shown first. However, developers can influence this process by either inlining or deferring certain assets in order to reduce TBT.
In general, it is best to always inline CSS and defer JavaScript. In fact, there is even an option in Google Chrome that disables deferring of JavaScript in order for developers to have maximum control over TBT.
Inlining Cascading Style Sheets
Inlining CSS means that the style information is inserted directly into the HTML code of a page, instead of storing it externally as a separate file. Inlining has some benefits over external stylesheets: it makes pages load faster and it helps reduces HTTP requests for repeated style information.
However, inlining too much CSS on a single page can result in rendering issues since HTML elements might get invalid or break when there is too much information being rendered at once.
Also note that CSS selectors can slow down renders while the browser parses them.
Inlining Or Deferring JavaScript
JavaScript is huge and highly complex.
However, when the time comes to decide what needs to be inlined or deferred, it becomes a little bit more of an art than a science since different factors need to be taken into consideration.
For example, third party libraries need to be included asynchronously in order for them not to block page rendering.
External callbacks from the element they are being used on, can also cause issues with inline scripts.
External scripts can also conflict with each other if they try to modify the same DOM elements without being aware of one another.