Total Blocking Time In Shopify
Nitin & Bhavesha | December 12, 2022 | 5 min read
Overview
Following are some points related to TBT –
- 1. TBT is total blocking time.
- 2. GSI score has a 30% weightage for TBT.
- 3. TBT of 200ms or less is considered good.
- 4. A higher TBT will result in higher FCP and LCP. Both are Web vital related scores.
- 5. DOM size, CSS, and JS are major contributors to TBT.
It will be helpful to understand TBT and to maintain it based on the content below. The content below derives from our experience executing over 50+ speed optimization projects on Shopify websites.
What is TBT?
Total Blocking Time (TBT) measures the duration of time in which the main thread was blocked long enough to prevent input from being responsive. It measures the total period of time your webpage was blocked, preventing interaction.
Site Speed Performance Analysis Tools
- Google Pagespeed insights (Recommended)
- GTMetrix
- Google Lighthouse
What is a Good Total Blocking Time Score?
In an average device, GSI recommends a total blocking time of fewer than 300 milliseconds.
- Good: 200 ms or less.
- Better: Between 200 and 350ms
- Bad: greater than 350ms
TBT Score – Our Results –
- 1) Avoid an excessive DOM size
- 2) Avoid long main-thread work
- 3) Minimize third-party usage
- 4) Keep request counts low and transfer sizes small
- 5) Use of Critical CSS
- 6) Avoid the use of document.write and query selectors
1. Avoid an excessive DOM size
A dom object will be created for each Dom element, and each element will be associated with a CSS class.
If there are more DOM elements then as per the above parsing process of the HTML document there will be more dom element-related objects created and each dom object will be further mapped to a CSS class. This overall will result in higher script handling/parsing time.
Also when we have more DOM elements any document.write or similar call that results in layout calculation and rerendering will need a comparatively higher time.
2. Avoid long Main-Thread Work
Optimize third-party javascript, utilize web workers to do tasks of the main thread (third-party), and Minify and defer CSS. cut the complexity of your styles and pattern.
A single main thread is used by HTML by default unless web workers are used. In order to reduce HTML main thread work, we will examine the elements that cause it.
3. Minimize Third-Party Usage
The slowdown of pages is caused by third-party scripts, such as ads, analytics, trackers, and social media buttons. This is especially true if the third-party scripts block renders. In order to display a page, they must be downloaded, as well as their dependencies. It is possible to make the page interactive at times, which results in a higher TBT.
4. Keep Request Counts Low and Transfer Sizes Small
“Requests” refer to the number of files (resources) required to render a web page, and “transfer sizes” refer to the size of those files. A page with more files will take longer to load and scripts will take longer to parse. Both of these will consume the main thread time and increase TBT.
5. Use of Critical CSS
A critical CSS is the CSS that is applied to above-the-fold elements, or the CSS that is responsible for the content that is immediately visible when a user opens your website. To render a page browser will need and parse all the CSS that is in the head. So we shall minimize
CSS requirements and load most of the CSS after the document download is completed. This can be achieved if we create critical CSS for the above fold page content.
6. Avoid the Use of documents.write and Query Selectors
To improve page load performance, the DOM construction algorithm performs a predictive run. If scripts, stylesheets, or other render-blocking resources are injected via document.write().
The document.write() can increase blocking time and page loading times. As this action will result in the layout being redefined and rerendered.
The Query Selector will have to look at each dom element for matching criteria. This can be time-consuming if there are more dom elements.
How to Improve Total Blocking Time?
The total blocking time is closely related to JavaScript performance, and any improvements to JavaScript execution (Generally, optimizations that improve TTI) will likely reduce your TBT.
- 1. Reduce the impact of third-party code.
- 2. Reduce JavaScript execution time.
- 3. Minimize main thread work.
- 4. Keep request counts low and transfer sizes small.
*May require design and functionality changes
#Blog Pages are not part of Optimization Scope
