A naukri.com initiative
Dev
2w
390
Image Credit: Dev
Total Blocking Time: Understanding TBT and Core Web Vitals
- Total Blocking Time (TBT) is a critical performance metric that evaluates the responsiveness of a webpage during its loading phase.
- TBT measures how long the main thread is blocked, which prevents the browser from responding to user interactions like clicks, scrolls, or key presses.
- TBT is the cumulative blocking time of all long tasks that occur between first contentful paint (FCP) and time to interactive (TTI).
- Total Blocking Time (TBT) directly impacts First Input Delay (FID) by reducing the main thread’s blocking time, improving responsiveness.
- Improving TBT involves reducing main thread blocking time by addressing the root causes of long tasks. Strategies include optimizing JavaScript execution, reducing third-party script load, and refactoring inefficient code.
- TBT is a key indicator of website responsiveness and overall performance, playing a significant role in user experience, search engine rankings, and understanding underlying issues that slow down your site.
- Improving TBT leads to faster and more interactive websites, ensuring better performance and satisfaction for users.
- Measuring TBT using tools like Lighthouse and addressing issues like long tasks and unoptimized scripts are essential steps towards achieving a good TBT score of under 200 milliseconds.
- TBT should primarily be measured in a controlled lab environment to minimize variance caused by real-world user interactions. Field measurements can use newer APIs like Long Animations Frame API for additional insights.
- A good Total Blocking Time (TBT) score is critical for delivering an optimal user experience. When tested on average mobile hardware, a TBT of under 200 milliseconds is considered excellent.
Read Full Article
23 Likes
For uninterrupted reading, download the app