How to Reduce Total Blocking Time (TBT) on WordPress

Imagine clicking a button on a website, but it takes an eternity to respond.

Frustrating, right?

Well, you might just need to fix your site’s Total Blocking Time (TBT).

TBT directly impacts user perception of website speed and interactivity. Excessive blocking time can lead to frustrating user experiences, especially on pages with complex functionality or heavy resource usage.

In this blog, we’ll look at how to measure TBT and strategies to reduce it to make your WordPress site load faster.

Let’s get started…

Understanding Total Blocking Time (TBT)

Total Blocking Time (TBT) is a key performance metric that measures the duration between the First Contentful Paint (FCP) and Time to Interactive (TTI), during which the main thread of the browser is occupied with tasks that prevent user interaction.

By reducing Total Blocking Time, websites can deliver smoother and more responsive user experiences, leading to higher engagement, retention, and ultimately, improved business outcomes.

To optimize TBT, developers and webmasters focus on resolving performance bottlenecks, optimizing code execution, prioritizing critical tasks, and adopting best practices in web development and optimization techniques.

What Is the Difference Between Total Blocking Time, First Input Delay and Time to Interactive?

Metric	Total Blocking Time (TBT)	First Input Delay (FID)	Time to Interactive (TTI)
Definition	Measures the time the main thread is blocked and unable to respond to user input or render content.	Measures the time it takes for a web page to respond to the first user interaction, such as clicking a button or tapping on a link.	Measures the time it takes for a web page to become fully interactive, allowing users to interact with all elements without delay.
Focus	Focuses on the duration of blocking time during page loading and interaction.	Focuses specifically on the delay experienced by users when trying to interact with a web page for the first time.	Focuses on the overall time a web page takes to become usable and responsive to user input.
Impact on UX	Excessive TBT can lead to delays in user interactions and a perceived lack of responsiveness.	Higher FID indicates a longer delay before users can engage with the page, potentially causing frustration and impatience.	Longer TTI means users may have to wait longer before fully interacting with the page, leading to a poor user experience.
Optimization	Optimizing TBT involves reducing the length and frequency of blocking periods by optimizing code execution, minimizing resource-intensive tasks, and prioritizing critical rendering paths.	Optimizing FID involves improving page load performance, optimizing JavaScript execution, minimizing render-blocking resources, and prioritizing critical page elements to reduce the delay in responding to user input.	Optimizing TTI involves prioritizing critical resources, deferring non-essential JavaScript execution, minimizing render-blocking scripts, expediting loading, and enhancing page interactivity.
Tool for Measurement	It can be measured using tools like Lighthouse, Chrome DevTools, or web performance monitoring platforms.	It can be measured using tools like Lighthouse, Chrome DevTools, or web performance monitoring platforms.	It can be measured using tools like Lighthouse, Chrome DevTools, or web performance monitoring platforms.
Importance in UX	Crucial for delivering a smooth and responsive user experience, especially on interactive and dynamic web pages.	Critical for ensuring that users can quickly interact with a web page, particularly on mobile devices or in situations with limited network connectivity.	Essential for providing users with a seamless browsing experience by ensuring that the page becomes fully usable and interactive as quickly as possible.

How to Measure Total Blocking Time (TBT)

Measuring Total Blocking Time (TBT) is a vital step in assessing and optimizing the performance of a website or web application.

TBT represents the cumulative duration during which the main thread of a webpage is blocked and unable to respond to user interactions due to processing tasks such as JavaScript execution, rendering, or network requests.

Source: web dev

The above timeline has five tasks, three of which are Long Tasks because their duration exceeds 50 ms. The next diagram shows the blocking time for each of the long tasks:

Source: web dev

Thresholds for Total Blocking Time

Threshold Leve	TBT (in milliseconds)
Good – nothing to do here	150 milliseconds or less
OK, but consider improvement	Between 150 and 224 milliseconds
Longer than recommended	Between 224 and 350 milliseconds
Much longer than recommended	Higher than 350 milliseconds

What Is the Impact of Total Blocking Time on Performance?

TBT accounts for 30% of the Performance Score, making it the top metric to optimize. Higher TBT directly affects user engagement and satisfaction.

Users who encounter prolonged delays due to blocking resources or scripts are more likely to abandon the site or become frustrated with the experience.

Join 12,000+ Agencies Loving Our Managed WordPress Hosting!

Say goodbye to the need for an in-house IT team. Opt for Cloudways and experience lightning-fast hosting, expert 24x7x365 support, and the performance your clients expect from your agency.

TRY NOW

How to Monitor Total Blocking Time (TBT)?

Keeping an eye on TBT (Total Blocking Time) is important to see if our strategies are working and where we can improve. Use tools like Google PageSpeed Insights, Lighthouse, or WordPress plugins to track TBT.

These tools provide valuable insights into our website’s performance, allowing us to refine our optimization efforts accordingly.

Moreover, they generate comprehensive reports highlighting specific areas requiring attention to enhance TBT and overall performance.

For example, the screenshot below shows the performance of a Cloudways page:

Keeping an eye on the TBT will tell you how long it takes for the first bit of real content to appear on your visitor’s screen.

For example, Cloudways’ TBT in the screenshot below is 100 ms, which is good.

You can also check out the “Diagnostics” section in PageSpeed Insights. It lists specific ways to improve TBT on your site.

For example, you can dig deep into Minimize main-thread work drop-down to get started and then work your way down to address more issues on your site.

How to Reduce Total Blocking Time in WordPress

Reducing TBT is crucial for improving website performance and user experience. Here are a few strategies to achieve this:

1. Optimizing CSS and JavaScript

One of the primary contributors to TBT is the inefficient loading of CSS and JavaScript resources. To mitigate this, developers can optimize these files by minifying, compressing, and concatenating them.

Additionally, adopting asynchronous loading techniques can prevent render-blocking and enhance page responsiveness.

Using Breeze Cloudways’ optimization plugin, you can streamline your site’s CSS and JavaScript files, reducing load times and improving overall performance effortlessly.

 

2. Minimizing Render-Blocking Resources

Render-blocking resources, such as external scripts and stylesheets, hinder the rendering process and prolong TBT.

To minimize their impact, consider deferring the loading of non-critical resources or strategically placing them to ensure progressive rendering without blocking critical page elements.

3. Utilizing Caching Techniques

Implementing caching mechanisms, such as browser caching and server-side caching like Varnish, can significantly reduce TBT by serving pre-generated content to users, thus minimizing server requests and processing time.

You can use caching plugins or Breeze server configurations to optimize WordPress performance effectively.

4. Implementing Lazy Loading

Lazy loading is a technique that defers the loading of non-essential resources, such as images and videos, until they are needed.

By implementing lazy loading plugins or native browser features, WordPress websites can prioritize the loading of critical content, thereby reducing TBT and improving overall performance.

5. Leveraging Content Delivery Networks (CDNs)

Content Delivery Networks (CDNs) distribute website content across geographically dispersed servers, reducing latency and improving resource delivery speed.

Integrating a CDN with a WordPress website ensures faster loading times and lower TBT by serving content from the nearest server to the user’s location.For Cloudways users, integrating Cloudflare CDN offers additional benefits beyond just geographical distribution. It seamlessly integrates with your Cloudways account, simplifying setup and management. Also, Cloudflare CDN includes features like:

6. Optimizing Images

Unoptimized images contribute significantly to TBT by increasing page load times.

To address this, optimize images by resizing them to appropriate dimensions, compressing them without compromising quality, and leveraging modern image formats like WebP. You can use any WordPress image optimization plugin to make the job easier.

Additionally, consider lazy loading images to prioritize critical content.

7. Delay JS

Start by identifying the critical and non-critical JS files affecting page loading. For example, non-critical scripts like analytics or social media widgets delay their execution using asynchronous loading.

Here’s how you can implement this in WordPress:

<script async src="path/to/non-critical-script.js"></script>

By adding the async attribute to the script tag, the browser will download and execute the script asynchronously. Moreover, for critical scripts that must be loaded before rendering, utilize the defer attribute:

<script defer src="path/to/critical-script.js"></script>

This ensures that essential scripts are downloaded without blocking the HTML parsing process, thus minimizing TBT. Furthermore, optimize the remaining critical scripts by minimizing their size and reducing execution time.

8. Prefetch DNS Requests

Prefetching DNS requests is a technique that involves resolving domain names before they are actually needed. This can significantly improve page loading speed by eliminating the DNS lookup latency when resources are requested.

function add_dns_prefetch() {
    echo '<link rel="dns-prefetch" href="//example.com">';
    // Replace example.com with the domain you want to prefetch
}
add_action('wp_head', 'add_dns_prefetch', 0);

This code snippet adds a DNS prefetch hint for the specified domain to the HTML head section of your WordPress site.

9. Minify JS

Minimizing JS files can decrease the time browsers take to download and parse these scripts, thus reducing TBT and improving overall page load speed. To implement JS minification in WordPress, you can use the code below:

// Original JS code
function greet(name) {
    console.log('Hello, ' + name + '!');
}
// Minified JS code
function greet(n){console.log('Hello, '+n+'!');}

In the minified version, unnecessary characters and spaces have been removed, resulting in a more compact file that loads faster and contributes to reducing TBT on your WordPress site.

You can also use Breeze plugins to minify JS files.

10. Minify CSS Files

Minification removes unnecessary characters from code to reduce its size, improving load times. Compression reduces the size of CSS files to optimize the delivery to the browser.

Breeze offers built-in CSS minification, automatically minimizing all your CSS files for improved loading times. It also provides separate options for inlining critical CSS, further enhancing TBT.

Fastest WordPress Hosting For Developers & Agencies at just $11/Month*

Experience blazing fast server speeds with Cloudways LAMP + NGINX hybrid stack. Improve your Core Web Vitals and supercharge your WordPress with Cloudways Hosting.

TRY NOW

How Cloudways Can Help You Reduce Total Blocking Time (TBT) WordPress?

To show how Cloudways can help reduce Time to Interactive (TTI) for WordPress websites, I’ve created a demo website on Cloudways.

• I conducted an initial speed test using Google PageSpeed Insights to measure Total Blocking Time (TBT).

• As you can see, the demo site needs a lot of improvements.

• To reduce TBT, I logged in to your Cloudways dashboard and navigated to the server management section.
• Next, I enabled services such as Varnish, Memcached, and Redis in the Cloudways platform, which optimize caching mechanisms and enhance database performance

• After that, I Installed plugins like Bot Protection and Breeze, which reduce server load and improve response times.

• After making the adjustments, you can see improvements in TTI, FCP, CLS, and overall PageSpeed scores, indicating enhanced user experience and search engine friendliness.

Conclusion

Reducing Total Blocking Time (TBT) on WordPress enhances user experience, improves search engine rankings, and maximizes website performance.

You can make your website load much faster by understanding the factors contributing to TBT and implementing targeted strategies such as optimizing CSS and JavaScript, minimizing render-blocking resources, leveraging caching techniques, and other strategies.

If you’re searching for a simple way to improve your Core Web Vitals score, why not migrate to Cloudways? With our optimized tech stack and premium add-ons like Cloudflare Enterprise, achieving great performance is easier than ever.