In the modern digital space, a fast website is no longer an option.

It's a cold, hard necessity for user experience and SEO. 

Total Blocking Time (TBT) is among the most critical Core Web Vitals metrics used to measure website speed. This measures the short span of time in which a website is effectively blocked from responding to user inputs, such as mouse clicks and key presses. 

From a user's standpoint, TBT is perceived as a noticeable delay in a website's responsiveness — thus, creating a worse experience. Left unoptimized, it can lead to higher bounce rates, lower Google rankings, and lost customers with a bad taste in their mouths.

Let's change that today. 

In this post, we'll delve into the technical definition of TBT, why it's important, and some actionable steps to improve it.

What is Total Blocking Time (TBT)?

Technically speaking, TBT is more accurately defined as the time between the First Contentful Paint (FCP) and the Time to Interactive (TTI) whenever long tasks block the main thread (read more from Google’s developer documentation here).

A long task can be any task that takes a minimum of 50 milliseconds to complete. It also can't be interrupted by browsers, let alone users, once executed. 

TBT factors in all the long tasks that block the main thread prior to TTI. 

Suppose your website executes the following tasks after FCP:

• Task 1: 50 milliseconds
• Task 2: 120 milliseconds
• Task 3: 30 milliseconds

Your TBT would be 170 milliseconds since the third task didn't hit the 50-millisecond threshold. 

To track your website's TBT, fire up a performance analysis tool like PageSpeed Insights and enter your domain or specific page URL. Your TBT will be shown alongside other Core Web Vitals metrics, namely Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Cumulative Layout Shift (CLS).  

Remember, TBT in addition to the Interaction to Next Paint (INP) metric directly affect your website's perceived responsiveness. 

And since it comes right after FCP, users may be able to see clickable elements they can't interact with yet — from menus to CTA buttons. This in turn may lead to misclicks and a lot of frustration. 

Why is TBT Important for Your Website?

TBT has a profound impact on website performance and, by extension, profitability. 

Here's why:

• TBT can make or break the entire user experience. The TBT and INP metrics are specifically designed to capture long delays that are noticeable by real users. TBT also exacerbates problems with long LCP times, which substantially increase bounce rate.
• TBT optimization improves conversions. In addition to increasing user retention, optimizing TBT also ensures that users actually get to see your website's conversion elements. Better website responsiveness also directly enhances user engagement as well as conversion rate.
• TBT affects your search engine rankings. As part of the Core Web Vitals set of metrics, Google takes TBT into consideration when determining your search engine rankings. The lower your TBT, the higher your website can rank.

To prove the importance of TBT, Google conducted a case study involving Mercado Libre — Latin America's biggest ecommerce and online payments platform. 

Mercado Libre's frontend architecture team bet on multiple optimization strategies that target the site's TBT, including code splitting and asset bundle optimization.

The results? 

Using WebPageTest and the Chrome User Experience Report, the team verified that improving TBT reduced perceived input delays by 9%. Optimizations like code splitting also resulted in a 90% reduction in Max Potential First Input Delay (FID) — a now-deprecated Core Web Vitals metric in favor of INP. 

Common Causes of High TBT

Before we get to work, let's take a closer look at the main issues that contribute to a high TBT:

1. Large JavaScript Files

Executing large or unoptimized scripts can clog up the main thread with long tasks, delaying not just interactivity but rendering as well. 

Even just a few problematic JavaScript integrations can cause seconds of delay. In some cases, even first-party scripts from plugins that are meant to enhance performance can add to your TBT.

Thread blocking scripts usually come from third-party plugins, embeds, and analytics tools. While they might be essential to certain website functions, any type of poorly-implemented code can single-handedly kill the user experience.

2. Unoptimized CSS

HTML and CSS files are generally smaller and easier to execute than JavaScript. They're more likely to extend the time it takes to render a page, which primarily affects FCP and LCP.  

But that doesn't mean they can't be a problem as far as TBT goes. 

Poorly optimized CSS can bloat the main thread, further worsening problems with large scripts. This also occurs with relevant resources, including large CSS frameworks such as Bootstrap, Foundation by Zurb, and older Bulma versions.

3. Excessive Document Object Model (DOM) Size

Picture a DOM as a hierarchical tree in which the root is the main HTML, sprouting branches and leaves that represent divisions, headings, images, text, and so on.

The more elements and features you add to a page, the bigger its DOM tree gets. This, in turn, increases the amount of server resources needed to load, execute, and render everything. 

Other factors such as visual-heavy themes and inlined assets also contribute to an excessively large DOM size — thus, increasing the page's TBT.

4. No Lazy Loading

Lazy loading is a web development tactic that prioritizes above-the-fold elements upon loading a page. That means all other elements below the fold (outside the viewport) will only be loaded when they're actually needed. 

Not implementing lazy loading prompts browsers to download and render everything, regardless if the user can see them or not. This is a huge problem for pages with long-form content and dynamic elements.

If you're up for it, you can inspect a real-world example of a website that has all of these issues using PageSpeed Insights. 

Anthropologie is a worldwide ecommerce brand that managed to rack up an impressive 1,300+ milliseconds TBT. The brand is great and doing well, but the website suffers from unoptimized third-party code, a bloated DOM, and non-lazy-loaded embeds that hurt responsiveness.

How to Measure TBT

Always remember that, in all walks of business, you can't improve what you don't measure. 

When it comes to TBT, you have three free but effective options:

• Lighthouse — An open-source website testing tool that can be used via a Chrome extension or the built-in inspection mode. Lighthouse lets you analyze TBT along with other Core Web Vitals metrics, accessibility, and page performance data on the fly.
• PageSpeed Insights — The internet's go-to performance analysis tool. PageSpeed Insights provides you with a comprehensive and detailed report of your website's performance on both mobile and desktop devices.
• WebPageTest — A flexible performance analysis tool that offers a number of configuration options to help generate tailored reports. While it has a steep learning curve, it can give advanced users a detailed breakdown of the loading process. 

A key advantage of WebPageTest over PageSpeed Insights and Lighthouse is the visual reporting element. You can track the loading process using the filmstrip view, generate a waterfall chart report, review website recordings, and more.

PageSpeed Insights and Lighthouse, on the other hand, offer a faster and more convenient way to track your Core Web Vitals metrics. Just enter your domain or page URL and you'll find the data you need in the performance issues section.

Interpreting TBT Scores

Here's a quick guide on interpreting your TBT scores:

• 0-200 milliseconds: Fast
• 200-600 milliseconds: Moderate
• Over 600 milliseconds: Slow

While you're tracking TBT, it's a good idea to measure other relevant Core Web Vitals metrics, namely INP, FCP, TTI, and JavaScript execution time. This will give you a better idea of how TBT impacts the real-world user experience.

We recommend evaluating your website's TBT now and tracking at least every week or whenever you implement performance-altering changes to your website.

Actionable Strategies to Improve TBT

Now that you understand TBT, why it matters, and how it becomes a problem, it's time to get to work.

Here are eight strategies to lower TBT and supercharge the snappiness of your website:

1. Optimize and Minify JavaScript

First and foremost, look into your JavaScript resources as they're the biggest contributors to a high TBT. 

An easy way to keep them in check is to compress or "minify" them by deleting extra characters, comments, and whitespace. 

The good news is, there are plenty of tools designed to cut JavaScript down to size in mere minutes. Terser, for example, is an open-source JavaScript manager and minifier that reduces file sizes by removing excess characters as well as shortening the names of local functions and variables.

Alternatively, use plugins available for your CMS or ecommerce platform that can automatically minify code en masse. One example would be WP-Optimize for WordPress-powered sites.

2. Defer or Async JavaScript Loading

Another way to optimize JavaScript is to implement deferred or asynchronous loading.

In deferred loading, a script is temporarily blocked from downloading and executing until the initial page render is complete.

You can easily use defer loading by adding the "defer" attribute to your script tag.

On the other hand, asynchronous or "async" loading specifies the priority of scripts and how they should be loaded. 

Similar to deferred loading, you can implement asynchronous loading by simply adding the "async" attribute to script tags. You may also use the Scheduler API, particularly the 'postTask()' method, to asynchronously load JavaScript.

Just remember: "User-blocking" means the script must be prioritized, whereas "background" means it can be loaded later.

3. Eliminate Unused JavaScript and CSS

Of course, you should also consider deleting unused JavaScript and CSS from your website. This will provide you with a much leaner DOM structure, improving responsiveness and overall performance.

Uninstalling the inessential plugins typically cleans up any code you'll no longer need. 

But that's not always the case.

To identify unused JavaScript on your page, use PageSpeed Insights and look for "Reduce unused CSS" or "Reduce unused Javascript" in the diagnostics section. 

4. Implement Code Splitting

Code splitting is exactly what it sounds like. 

Rather than downloading and running a huge, single block of JavaScript, you split it up into two smaller parts — one for essential tasks, and another for functions that can be loaded later. 

The common implementation for code splitting involves using the dynamic 'import()' expression. You can also use the 'setTimeout()' global function to delay non-critical functions, giving room for user interactions when executing large code.

5. Use Lazy Loading for Images and Videos

As mentioned, lazy loading temporarily delays the loading of page assets that aren't immediately visible to users.

Lazy loading can be directly implemented inside HTML tags using the following syntax:

You can also use plugins like Lazy Loader for WordPress to lazy-load images, videos, iframes, and even audio elements without touching code.

6. Prioritize Critical Resources

To further optimize your page, consider preloading critical assets like web fonts, CSS, and other important user-facing elements. 

Preloading can be done using the following syntax on HTML elements:

Another strategy is to use server-side rendering, which reduces round trips for resources like JavaScript and presents users with a ready-to-use HTML page upon loading. This, in turn, enables the site to process user interactions faster — improving both TBT and INP.  

7. Upgrade Hosting and CDN

Lastly, remember that thread-blocking assets like JavaScript are susceptible to network latency and other server issues.

The better your hosting service, the faster these assets can be downloaded and executed. 

As a rule of thumb, prioritize upgrading to a Virtual Private Server (VPS), dedicated, or managed hosting service as soon as your website traffic starts ramping up. Don't wait for a noticeable trend of poor Core Web Vitals scores before you take action.

You can also look into Content Delivery Networks (CDNs) to reduce latency caused by server distance. 

In simple terms, a CDN is a geographically distributed network of caching servers that are tasked to deliver website data to nearby users. This can result in a dramatic increase in page loading performance.

How to Continuously Optimize TBT

Ready to start working on your website's TBT? 

Remember the following best practices to ensure positive results:

• Establish a regular testing and audit schedule. Make it a point to inspect your Core Web Vitals metrics every other week — or, whenever you implement optimizations to your site. 
• Keep third-party integrations in check. Always perform a follow-up performance audit whenever integrating new third-party tools into your website to measure their impact.
• Stay up-to-date on the latest trends and practices. Follow industry blogs like web.dev to stay ahead of performance optimization trends.
• Make performance optimization a team effort. Ensure members of your development, design, and content teams understand the importance of performance optimization and brainstorm optimization guidelines. 

How Nostra AI Can Help

Optimizing website performance can be a lot of work, but it doesn't have to be.

That's where we come in. 

Nostra AI's Edge Delivery Engine eliminates the problem of latency in the website performance equation once and for all. It uses smart caching and 310 global edge servers — distributed in strategic locations to keep your content within 50 milliseconds of the world's internet users. 

Click here to book a demo today. 

Conclusion

Optimizing TBT is an important step towards creating a faster and more impactful experience for your website audience. 

Not only will it help you with engagement metrics like conversion rate and bounce rate, it also helps boost SEO rankings as part of your Core Web Vitals.

Remember, start with a fresh audit of your TBT, choose the strategies that match your needs, and monitor the results to determine what works. 

As with any aspect of website performance, consistency is key. Keep up with your regular performance audits and listen to your data — that's the best way to ensure you're en route to success.