The total blocking time: How To Improve It
The web Performance Metric that measures the time taken during page loading is known as the Total Block Time or TBT. This is the time taken when the main thread has been blocked and there is a delay in interacting with the page. Hence, for a website to perform well, it is important to enhance the total blocking time. So, how is this done? Well here are a few pointers on how to improve the TBT:
To minimize the Impact of the Third-Party code
Basically, a third-party code is any code that has been hosted within a domain which is different to the domain of the URL that has been audited with Lighthouse. When the page starts to load, the time taken to block the main thread by every third-party page is calculated by Lighthouse. Hence to minimize this, it is recommended to learn how to use the Chrome Dev Tools and the other lighthouse edits that function to detect the third-party code.
To Minimize the JavaScript execution time
Most developers have noticed that Javascript usually takes quite some time to execute. This tends to slow down the performance of your page in various manners such as:
The Network Cost: More the Bytes more is the download time taken.
The compile and the Parse Cost: Usually the Javascript tends to get compiled and parsed within the main thread. However, when the main thread is busy the page does not respond as expected to the input by the user.
The Execution Cost: It is the main thread where the Javascript is usually executed. In case there are quite a few codes that your page needs to run before required, then this delays the total blocking time. Now as we know the TBT is one of the main metrics directly connected to how the page speed is perceived by the users.
The Memory Cost: More than required memory is consumed when the Javascript tends to hold on to plenty of references. This generally causes the page to get janky or even slow down as they consume a lot of memory. Also the memory leaks can lead for your page completely freeze up.
To Reduce the Main Thread Work
The code is turned into a webpage which is interactive, with the help of the Renderer Process. Hence, it is the main thread of the renderer process generally that handles most code. This is done as it parses the HTML and constructs the DOM, tends to parse the CSS and applies the certain style, evaluates and thus, executes the Javascript.
It is also the Mainthread that processes the user events. Hence, any time the main thread is busy ‘functioning’ something else. This is why your web page might not respond to the user interaction thus causing the bad experiences. So, you see, you also need to minimize the total blocking time. This can be easily done by using tools such as Chrome DevTools to know exactly what the main threads are doing to the web pages.
To Maintain the Request Counts Minimum and theTransfer Size to be Small
It is possible to calculate the Transfer size values and Requests, values for the Total row that are computed by adding the values for Script, Image, Font, Stylesheet, Media and Document rows. Likewise bear in mind that the Third-Party column does not affect the Total row values.
The main focus is to make the user aware of how many of the total requests and the total transfer size comes from the third-party domain. The major effect of high resource counts or large transfer sizes on load performance depends on the kind of resource that is being requested.
Is the TBT Related to TTI?
TBT is the measurement done over a certain time period. As certain lab tools that traditionally measure the page loads such as the Lighthouse, TBT are measured up until TTI as it helps quantify the extent of how non-interactive a page is before it grows reliably interactive. Nevertheless, the TBT could also be measured once the page load is done and so beyond TTI, for instance in Lighthouse Timespan mode.
TTI includes a page that is reliably interactive in case the main thread has remained free of long tasks for a minimum of five seconds. This implies that three, 51 ms tasks that are spread out over 10 seconds can push back the TTI in the same way as far as a single 10-second long function, nevertheless these two conditions would feel a lot different to a user who is trying to connect with the page.
CONCLUSION
So, this is all that we have at the moment on The total blocking time: How To Improve It. Be sure to share your thoughts on this article and we would love to hear from you.
Comments