In the world of web performance, one important metric is total blocking time (TBT). But what exactly is TBT, and why does it matter?
TBT measures the total amount of time that a page is blocked from responding to user input during load. This includes things like DOM blocking, loading scripts, and more. A high TBT indicates that a page is slow to become interactive.
Understanding TBT is key for web developers looking to improve site performance. Here’s a deeper look at what TBT is and some tips for reducing it.
What is total blocking time?
Total Blocking Time, or TBT, is a Chrome DevTools metric that measures the total amount of time from the start of the page load until it is visually rendered and capable of reliably responding to user input without jitter or delay.
TBT measures all time periods where the page is unable to respond to user interactions like clicking, tapping, or scrolling. This includes:
- DOM blocking time
- Loading and blocking time
- Script blocking time
- Other computation blocking time
TBT begins measuring when the initial HTML document starts loading and ends when the page is visually complete and ready.
Why does TBT matter for web performance?
A high TBT indicates that users will experience a slower, clunkier feel when loading your web page. Pages with high TBT will seem delayed and unresponsive to user interactions like scrolling or clicking buttons.
Google recommends keeping TBT under 300 milliseconds on mobile and under 100 milliseconds on desktop for optimal performance. Exceeding these thresholds means users may abandon your site due to sluggish interactivity.
Reducing TBT should be a priority for web developers. Even subtle improvements to TBT can positively impact user experience and satisfaction.
How to Reduce Total Blocking Time
Here are some tips to help reduce total blocking time on your website:
- Minify and compress files: Minifying CSS, JavaScript, and HTML files reduces their file size, which speeds up loading. Compression using gzip or brotli also helps transfer files faster.
- Optimize images: compress and resize images to reduce their file size. Set size limits, use newer formats like WebP, and lazy load below-the-fold images.
- Reduce redirects: Eliminate unnecessary redirects that pause page loading and increase TBT.
- Prioritize critical resources. Load the CSS and JS resources needed for above-the-fold content first. Defer or async non-critical resources or add media attributes for responsive prioritization.
- Reduce server response time: upgrade to faster hosting, implement caching, and optimize databases to deliver resources faster.
- Minimize render-blocking resources. Avoid too much render-blocking CSS or JS in the document head, which can delay rendering.
- Code efficiently: Refactor and optimize JS/CSS code to be leaner and execute faster.
- Use media/print CSS: Reduce CSS sent to mobile/print devices by splitting CSS into media-specific files.
- Limit third-party scripts: Identify and eliminate unnecessary third-party scripts that bloat code and create blocking.
For a deep dive on optimizing TBT, check out this helpful guide on reducing TBT for your website. It goes into detail on techniques like optimizing web fonts, using lightweight JS libraries, and more.
By understanding what contributes to TBT and applying these optimization tips, you can dramatically improve interactivity for users visiting your website. Prioritizing a low TBT should be a key goal for web performance.
Final Words
Total blocking time critically impacts web performance and the user experience. By minimizing TBT through optimizations like efficient coding, resource prioritization, and reducing bloat, pages load faster and feel more responsive. Keeping TBT low should be a priority for web developers seeking to improve site speed and interactivity.
