min read

Total Blocking Time (TBT)

Written by

Joe Krug

Edited by

TL;DR:

TBT measures the duration that your web page is unable to respond to user interactions, like clicks, taps, or key presses.

What is Total Blocking Time (TBT)?

Total Blocking Time (TBT) is a metric for the responsiveness of your web page during load. It measures the duration that your web page is unable to respond to user interactions, like clicks, taps, or key presses.

It's measuring how long your user blocked. How long does it take for your website to be able to respond to user interaction?

TBT is calculated by adding up the time beyond 50 milliseconds for each task running longer than 50 milliseconds that occurs from the First Contentful Paint until the page becomes interactive.

Does TBT influence SEO?

TBT is not a ranking factor for search engines. While speed test metrics will not directly affect your website rankings, they are important principles for great web developers to understand. Bad scores that indicate a bad user experience may hurt your SEO if users bounce from your website.

What is a great TBT score?

We want a TBT of less than 200 milliseconds.

How to optimize a Webflow website for TBT

Optimize JavaScript by removing unnecessary scripts and adding async or defer to all scripts.
Break up long tasks on the main thread. Anything that’s running for more than 50 milliseconds can have a negative influence for TBT. Break code into smaller, manageable snippets using asynchronous code (like setTimeout, requestIdleCallback) to keep the main thread free.
Use Web Workers. A key aspect of INP is keeping the main thread light and free for UI loading. We can offload heavy JS to Web Workers to free up the main thread.
Prioritize loading of content and scripts that affect “above the fold” content. TBT analysis will start firing clicks in the visible viewport. Make sure everything in the viewport loads as soon as possible.