How To Optimise For Total Blocking Time (TBT)
In today’s fast-paced world, nobody likes to wait, especially when it comes to browsing the internet. Slow websites can be frustrating and often result in users abandoning the webpage. This is where Total Blocking Time (TBT) comes into play. TBT is an important metric used in web development to measure the time a webpage takes to become interactive. The lower the TBT, the better the user experience. If you want to improve your website’s speed and user experience, then optimising for TBT is a must. In this blog post, we will walk you through what TBT is, how to identify it, and specific steps to optimise it. So, let’s get started!
What is Total Blocking Time? (TBT)
Total Blocking Time (TBT) is a key metric used to measure the speed and user experience of a website. It measures the amount of time a user has to wait after clicking a link or button before they can interact with the page. This delay is caused by scripts and other resources that need to load before the page can be fully functional.
TBT is an important factor in website optimisation because it directly affects the user experience. The longer the TBT, the more frustrated a user can become while waiting for the page to load. This can lead to high bounce rates, lower engagement, and ultimately, reduced conversions.
Why does it matter?
Besides affecting user experience, the Total Blocking Time also has an impact on search engine optimisation (SEO). In May 2021, Google announced that Core Web Vitals would be included as a ranking factor for search results. Although Total Blocking Time is not a direct metric in the Core Web Vitals, it can impact other metrics which are included in the Vitals score – namely the First Input Delay (FID) metric. Therefore, optimising TBT not only improves user experience but also helps to increase website traffic and conversions.
How to find out my website’s TBT
Fortunately, identifying TBT on your website is relatively easy. There are several tools available to help, such as Google’s PageSpeed Insights, which can provide a breakdown of TBT, along with other performance metrics, such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
To use PageSpeed Insights, simply enter your website URL into the search box, and the tool will analyse your website’s performance, providing a score and detailed report. The report will show you where your website is performing well, and which areas need improvement, including TBT.
How to optimise TBT
Now that you know how to identify TBT, let’s look at some practical tips on how to optimise it!
1. Minimise Third-Party Scripts
Third-party scripts, such as advertisements, analytics trackers, and social media widgets, can significantly impact Total Blocking Time. These scripts often require additional resources to load, leading to increased TBT. To optimise TBT, consider removing unnecessary third-party scripts or reducing their impact by deferring their loading until after the page has rendered.
2. Optimise Images
Images are an essential component of most websites, but they can also be a significant contributor to TBT. Large images can take longer to load, causing delays in page responsiveness. To optimise TBT, consider compressing images to reduce their file size and using a content delivery network (CDN) to deliver them more efficiently.
3. Streamline CSS and JavaScript
Large CSS and JavaScript files can significantly impact TBT, as they require additional resources to load and render. To optimise TBT, consider minifying your CSS and JavaScript files, which involves removing unnecessary characters and white space to reduce their file size. You can also defer the loading of non-critical CSS and JavaScript until after the initial page load.
4. Use Lazy Loading
Lazy loading is a technique that defers the loading of non-critical resources until they are needed. This can significantly reduce TBT by prioritising the loading of critical resources, such as text and images. Consider using lazy loading for images and other non-critical content to optimise TBT.
5. Improve Server Response Time
Server response time is the amount of time it takes for your website’s server to respond to a request from a user’s browser. Slow server response times can significantly impact TBT, as they can cause delays in rendering the initial page content. To optimise TBT, consider improving your server response time by upgrading your hosting plan, reducing the number of requests on each page, and using a content delivery network (CDN) to deliver content more efficiently. If you scan your website with PageSpeed Insights, you can check your server response time which is measured as Time To First Byte (TTFB).
Conclusion
In conclusion, Total Blocking Time (TBT) is a critical performance metric that affects your website’s speed and user experience. By identifying and optimising TBT, you can significantly improve your website’s performance and provide a better user experience for your visitors. Follow these practical tips to optimise your TBT and ensure your website is performing at its best. If you need help optimising your website’s performance, consider working with Blue Whale Media, a leading web design company in Nottingham with expertise in performance optimisation for WordPress websites.
