category oscprofessionals - Blogs - Total Blocking time in Shopify

Total Blocking Time (TBT): The Key Metric for a Lightning-Fast Shopify Store

Nitin & Bhavesha | December 12, 2022 | 5 min read

In today’s digital landscape, website speed reigns supreme. Customers demand instant gratification, and Shopify stores are no exception. Enter Total Blocking Time (TBT), a crucial metric impacting your site’s responsiveness and user experience.

Why TBT Matters for Shopify Stores

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.

With over 50+ successful optimization projects under our belt, our team has identified key strategies to conquer TBT

What is TBT?

Total Blocking Time (TBT) measures the duration in which the main thread was blocked long enough to prevent input from being responsive. It measures the total period your webpage was blocked, preventing interaction.

Achieving a Champion TBT Score

For a lightning-fast Shopify experience, aim for a Total Blocking Time (TBT) under 200 milliseconds. Here’s how Google PageSpeed Insights (GSI) categorizes TBT.

Exceptional: 200ms or less
Good: Between 200 and 350ms
Needs Improvement: Exceeding 350ms

TBT in a Nutshell

Measures: The time webpage is “stalled,” unable to respond to user input.
Impacts: Core Web Vitals, search ranking, and user experience.
Optimized by Minimizing DOM size, third-party scripts, and resource requests.

Looking For Expert Shopify Speed Optimization And Other Services Get In Touch

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.

Tools for TBT

Google PageSpeed Insights: The industry standard for performance analysis.
GTMetrix: Provides in-depth analysis and waterfall charts for detailed bottleneck identification.
Google Lighthouse: Integrates with Chrome DevTools for real-time insights.

Beyond the Top Techniques

Avoid documents. Write and excessive query selectors: These methods disrupt parsing and increase TBT.
Monitor and benchmark: Regularly track your TBT score and identify areas for improvement.

Benefits of TBT

Pinpoints Bottlenecks: TBT highlights tasks blocking the main thread, indicating areas for optimization.
Improves Core Web Vitals: By tackling TBT, you indirectly improve other Core Web Vitals like FCP and LCP, leading to better search ranking and user experience.
Prioritizes User Needs: Focusing on TBT ensures a responsive website, minimizing user frustration and boosting engagement.

By strategically addressing TBT, you unlock a Shopify store that’s blazingly fast, responsive, and ready to convert. Remember, a smooth user experience translates to happy customers, higher engagement, and greater success. Take control of your TBT, and watch your Shopify store soar to the top of search results and user satisfaction. Our expert Shopify developers are adept at implementing these and other advanced TBT optimization strategies.