Total Blocking Time

Total Blocking Time (TBT) is a web performance metric that indicates how many milliseconds your website does not respond to clicks, taps, or keystrokes while loading. The metric counts all periods during which the browser spends more than 50 milliseconds performing JavaScript tasks that block the user. A low TBT means visitors can interact more quickly with buttons, forms, and menus. For ecommerce stores and form-intensive sites, a TBT below 300 milliseconds is often the difference between a conversion and a user abandoning the site.

How Total Blocking Time Measures the User Experience

Total Blocking Time occurs because browsers can only perform one task at a time in the main thread. If a heavy JavaScript task takes 200 milliseconds, it blocks the browser for 150 milliseconds (200 minus the allowed 50). All blocking periods between First Contentful Paint and Time to Interactive are added together to calculate the TBT score. Google PageSpeed Insights displays this value by default because it is a strong predictor of field data such as Interaction to Next Paint. An ecommerce store with many product filters or a site with complex animations often unintentionally accumulates blocking tasks. The result: visitors can already see the page but cannot interact with it yet.

Why Total Blocking Time Is Now a Core Web Vitals Metric

Google introduced TBT in 2020 as a lab metric that correlates with First Input Delay, one of the original Core Web Vitals. Since 2024, Interaction to Next Paint has replaced FID, but TBT remains the best predictor in controlled testing environments such as Lighthouse. Search engines use speed and interactivity as ranking factors. Visitors leave sites that are slow to respond, especially on mobile. In practice, we’ve seen with our SMB clients that improving TBT from 400 to 200 milliseconds can reduce the bounce rate by 8 to 12 percent. This makes TBT a useful metric for anyone looking to improve conversion and discoverability.

What Total Blocking Time Offers for Ecommerce Stores and Lead Forms

A low Total Blocking Time ensures that visitors can immediately click, scroll, and fill out forms as soon as the page is visible. For ecommerce stores, this means fewer abandoned shopping carts: customers don’t have to wait before they can add a product or proceed to checkout. For B2B sites with contact forms, fast interaction reduces the chance that a visitor will leave before the form responds. In technical SEO projects, we optimize TBT by splitting JavaScript, deferring third-party scripts, and removing render-blocking resources. The results are measurable: better conversion rates, longer sessions, and higher rankings on Google. TBT isn’t a goal in itself, but a signal that your site is ready for action the moment the visitor is.

You use Total Blocking Time (TBT) to identify bottlenecks in the loading experience before visitors abandon the page. This metric helps you prioritize which scripts, plugins, or third-party tools you need to optimize or disable. Below are four specific situations in which TBT monitoring makes a difference for Dutch small and medium-sized businesses.

Optimizing the ecommerce store checkout for mobile conversion

An ecommerce store with 800 products and five payment methods often loads heavy JavaScript libraries for payment providers, address autocomplete, and analytics. If the TBT on mobile exceeds 500 milliseconds, customers cannot immediately click the checkout button. They can see the button, but the browser doesn’t respond. This leads to frustration and abandoned shopping carts. By measuring TBT in PageSpeed Insights or Lighthouse, you can identify which scripts are blocking the main thread. These are often Google Tag Manager containers with ten tags, chat widgets, or A/B testing tools. By loading these scripts asynchronously or delaying them until after the first interaction, the TBT decreases by 200 to 400 milliseconds. The result: a faster checkout, fewer bounces, and a measurably higher conversion rate on mobile.

Making landing pages with forms interactive faster

A B2B service provider with lead forms on every landing page wants visitors to be able to start typing immediately as soon as the page appears. If the TBT is high due to tracking scripts, font loaders, or animation libraries, it can sometimes take two seconds for the form to respond. Visitors think the site is broken and leave. By monitoring TBT during the web design process, you can identify render-blocking CSS and JavaScript. Practical steps: replace heavy animation libraries with CSS alternatives, load Google Fonts locally, and delay marketing pixels until after Time to Interactive. A TBT reduction from 350 to 150 milliseconds immediately improves the user experience and increases the likelihood that visitors will fill out the form by 10 to 15 percent.

Speed up WordPress sites with page builders and plugins

A WordPress site with Elementor, WooCommerce, and ten active plugins often accumulates a lot of JavaScript. Each plugin adds its own scripts, even on pages where they aren’t needed. The result: a TBT of 600 milliseconds or more, especially on product and blog pages. By measuring TBT per page type, you can identify which plugins have the greatest impact. Common culprits include social share buttons, slider plugins, and live chat widgets. By deactivating plugins on pages where they aren’t needed, bundling scripts, or using lazy loading, you can cut TBT in half. As part of our WordPress maintenance contracts, we check TBT monthly and optimize the plugin stack. This prevents new updates from silently degrading performance.

When Total Blocking Time is the right metric—and when it isn’t

Total Blocking Time is valuable if you want to know why visitors can’t click or scroll while a page is loading. It’s a lab metric, so you measure it under controlled conditions such as Lighthouse. For real-world interactivity, look at Interaction to Next Paint in the Chrome User Experience Report. TBT is less useful for sites that use very little JavaScript, such as simple blogs or static landing pages. In those cases, the TBT is already low, and optimization yields little benefit. Don’t use TBT as your only metric: combine it with Largest Contentful Paint and Cumulative Layout Shift to get a complete picture of the user experience. This way, you’ll avoid improving TBT at the expense of other Core Web Vitals.