Total blocking time (TBT) is a metric used by Google Lighthouse Audits to measure the amount of time that a web page’s main thread is blocked by JavaScript and other resources. High TBT can lead to slow page load times, which can negatively impact user experience and search engine rankings.
E-commerce store owners should pay attention to TBT, as slow page load times can lead to high bounce rates and lost sales. In this article, we will discuss the science behind TBT and provide a list of best practices for reducing TBT on your e-commerce store.
The Science of Total Blocking Time
TBT is measured in milliseconds and is the sum of the time that the main thread is blocked by JavaScript, CSS, and other resources. When a web page is loaded, the browser’s main thread is responsible for parsing and executing JavaScript and rendering the page. If the main thread is blocked by a resource, such as a large JavaScript file, the page will not be able to render until the resource is fully loaded.
There are several factors that can contribute to high TBT, including:
- Large JavaScript files
- Unoptimized images
- Blocking CSS
- Third-party scripts
- Unnecessary code
Best Practices for Reducing Total Blocking Time on Your E-commerce Store
- Minimize the number of third-party scripts: Third-party scripts, such as analytics and tracking codes, can add significant TBT to your pages. Reduce the number of third-party scripts by only using the ones that are essential to your business.
- Optimize images: Large images can add significant TBT to your pages. Optimize your images by compressing them and using the appropriate image format (e.g., JPEG for photographs and PNG for graphics). There are a number of Shopify apps that will automate this for you.
- Defer loading of non-essential resources: Defer the loading of non-essential resources, such as social media widgets and tracking scripts, until after the page has loaded.
- Use code splitting: Code splitting allows you to break up your JavaScript code into smaller chunks, which can be loaded on-demand. This can significantly reduce TBT on your pages.
- Minimize the use of blocking CSS: Blocking CSS can add significant TBT to your pages. Minimize the use of blocking CSS by using inline styles, and by loading critical CSS first.
- Remove unnecessary code: Remove any unnecessary code, such as old or unused apps, from your store.
- Monitor TBT regularly: Regularly monitor TBT using tools such as Google Lighthouse Audits, and make changes as needed to keep TBT low. Why not automate it with the Pharos Site Speed app for Shopify?
In conclusion, TBT is a metric that Shopify store owners should pay attention to as it can have a significant impact on user experience and search engine rankings. By following the best practices outlined in this above, you can reduce TBT on your e-commerce store and improve the overall performance of your site.
