One aspect of site performance that confuses most site owners, yet has a significant impact, is total blocking time.
This article will show you what Total Blocking Time is, why it is important, how tools such as Lighthouse and PageSpeed Insights measure it, and how to reduce Total Blocking Time on any site by using straightforward, tried methods.
What Is Total Blocking Time?
Total Blocking Time, or TBT, as the main thread is blocked for a long time, shows a website’s duration of not responding to user interactions, depending on the time between the start of the page loading and the page being entirely loaded.
In other words, firstly, total blocking time meaning is usually understood as how much time a user has to wait between a page visually loading and being able to perform a click, scroll, or keyboard input without delay or lag.
Therefore, next time if you notice a website has loaded, but it is not responding to your clicks or scroll, that delay is total blocking time.
Total Blocking Time Definition (Web.dev & Lighthouse)
According to the web.dev Total Blocking Time (TBT) definition: this metric informs about the amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was engaged and thus, unable to respond to the users’ input. As a result, users had to wait for longer time until they could start interacting with the page.
The wording in the original text is in the form of bullet points, which means that they are interchangeable.
What Does Total Blocking Time Mean for a Website?
What does total blocking time mean in a practical sense?
The actual answers to this question are:
- Your users will think your web page is very slow.
- Clicking on buttons will not result in immediate action.
- Inputting data will be difficult due to lag.
- Your visitors will get the impression that your website is unreliable and they will go away.
If you have a total blocking time website that physically causes your readers to witness the abandon button, decrease their interaction rate, and disastrous Core Web Vitals scores, then you are in trouble.
What Is a Good Total Blocking Time?
A frequently asked question is: What is a good total blocking time?
This is a level recommended by Google tools:
Total Blocking Time
Performance
0–200ms Good
200–600ms Needs improvement
600+ ms Poor
In order to be in the race, your target should be to get the total blocking time below 200 ms.
Total Blocking Time and Core Web Vitals
An important factor is the total blocking time core web vitals relationship.
Although TBT is a lab metric, it has a profound impact on the real-user metrics, such as:
- INP (Interaction to Next Paint)
- Previously, FID (First Input Delay)
A decrease in TBT will nearly always indicate an improvement in the interaction performance for real users.
Total Blocking Time in Lighthouse Explained
What Is Total Blocking Time in Lighthouse?
What is total blocking time in Lighthouse? Lighthouse determines TBT by measuring long JavaScript operations that block the browser’s main thread during page load.
The total blocking time definition Lighthouse stays concentrated on tasks that last for more than 50 ms and adds the exceeded time of those tasks to the total time of blocking.
This goes together with:
- Total blocking time
- web.dev total blocking time definition
What Is Total Blocking Time in PageSpeed Insights?
What is the total blocking time in PageSpeed Insights?
PageSpeed Insights bases its TBT scores on Lighthouse lab data, which feature two types of results:
- Mobile
- Desktop
Warnings such as “Reduce JavaScript execution time” that you see are in a direct relationship with total blocking time in PageSpeed Insights.
What Causes High Total Blocking Time?
Most of the time, JavaScript is the main source of Total Blocking Time (TBT) issues.
Typical JavaScript problems are:
- Heavy JavaScript bundles
- Unused JavaScript
- Third-party scripts (ads, chat widgets, analytics)
- Poorly coded themes or plugins
- Too many animations or sliders
In most of the cases, if your total blocking time website is high, it will be due to the JavaScript bundle that is too large or contains the wrong JavaScript for the page.
How to Improve Total Blocking Time (Easy & Practical)
Now we are getting to the most important part: how to reduce the total blocking time (TBT).
1. Limit JavaScript Execution
The quickest way to lower total blocking time is to limit the amount of JavaScript that runs on the first page load.
Here are some things that you can do:
- Remove unused JS
- Delay non-critical scripts
- Load scripts only where needed
It can almost certainly raise not dramatically but noticeably by doing this alone.
2. Using Defer and Async Properly
Defer and async usage help to avoid the scripts from blocking the rendering process.
One of the simplest methods to:
- How to fix the total blocking time
- How to reduce total blocking time
3. Break Long Tasks into Smaller Ones
Long tasks prevent the browser from using its main thread.
Developers can:
- Split JS into smaller chunks
- Use code splitting
- Load features on demand
This is an excellent idea to implement in the concept of total blocking time, how to improve.
Reduce Total Blocking Time in WordPress
For the most part, WordPress is the platform that receives the greatest number of TBT problem reports.
How to Reduce Total Blocking Time in WordPress
Here is a method to reduce total blocking time in WordPress effortlessly:
- Choose a weightless theme
- Get rid of unnecessary plugins
- Minify and defer JavaScript
- Use performance plugins (WP Rocket, FlyingPress, LiteSpeed Cache)
- Delay third-party scripts
All these measures are capable of making a difference in the final score of your how to improve total blocking time WordPress endeavor even without the need for programming skills.
How to Reduce Total Blocking Time in Shopify
How to reduce total blocking time Shopify sites:
- Remove unused apps
- Avoid heavy page builders
- Load scripts conditionally
- Optimize custom Liquid and JavaScript
As a rule, apps will push their scripts on a global scale – cleaning up scripts will be the win of your total blocking time (TBT) score.
How to Reduce Total Blocking Time in Next.js
If a programmer wonders how to reduce total blocking time Next.js, the answer would be:
- Dynamic imports
- Tree shaking
- Client-side rendering
- Component hydration
Take advantage of the tools that Next.js offers and don’t waste time arguing about TBT control.
Improve Total Blocking Time with Hosting & CDN
Even though JavaScript is the main offender, infrastructure should not be neglected either.
To improve total blocking time:
- Use fast hosting
- Enable CDN
- Reduce server response time
- Enable HTTP/2 or HTTP/3
Good delivery means less waiting time for the execution of scripts.
Total Blocking Time Là Gì? (International Meaning)
TBT stands for Total Blocking Time.
Here is a simple explanation for total blocking time:
“Total blocking time refers to the interval during which a website prohibits user interaction while loading’.
This time may be expressed in milliseconds, and it may refer to loading page events or JavaScript main tasks execution periods (responsible for the longest delay in other words).
The language used is not of importance; the result is still the same – slow interaction means a poor user experience.
TBT Audit Checklist: How to Fix Total Blocking Time
- Use this list to fix total blocking time fast:
- Find the longest JavaScript tasks in Lighthouse.
- Get rid of the JavaScript you don’t need.Defer or delay nonessential scripts. Delay loading third-party scripts.
- Theme and plugin optimization
- Ghost plugins/apps remove
- Performance caching
- Fast hosting and CDN
- Go back to PageSpeed Insights to check again
FAQs (For Users & SEO)
What is total blocking time in website performance?
1It determines how long the site stops user interaction while loading the pages.
How do I improve TBT (total blocking time)?
Cut down on JavaScript, postpone loading scripts, and eliminate the unused plugins or apps.
Does total blocking time affect SEO?
Yes. High TBT has a negative user experience and also ranks the websites lower indirectly.
Is total blocking time the same as page speed?
No. Page speed shows loading performance, whereas TBT measures user interaction delays.
What tools measure total blocking time?
Lighthouse and PageSpeed Insights.
Conclusion
At this point, you have a clear understanding of what total blocking time is, its concept, significance for SEO and user experience.
If you follow the instructions given above, you will be able to:
- Improve total blocking time
- Meet Core Web Vitals standards
- Build faster, more efficient
- Gain more user interaction and
Regardless of your platform (WordPress, Shopify, Next.js), TBT fix is one of the most powerful performance optimization changes you can do.
