Total Blocking Time and Interaction to Next Paint
Total Blocking Time (TBT) is not an actual Core Web Vital metric, but it’s important because we can measure it using tools like PageSpeed Insights or Lighthouse, unlike Interaction to Next Paint. This guide will cover all the relevant information about it.
Understanding Total Blocking Time
By improving TBT we can improve Interaction to Next Paint (INP) which is the actual Core Web Vital metric.
TBT measures the responsiveness of the page to the user input.
The browser uses what's called the main-thread to display a web page. This thread includes all the required tasks: reading the HTML, executing CSS and JavaScript, etc.
When any one of these tasks runs longer than 50 ms, which is called a Long Task, the main-thread is considered "blocked" because the browser cannot interrupt a task in progress. The amount of time after 50 ms is the blocking portion.
Total Blocking Time (TBT) is the sum of all blocking times for each long task.
If the main-thread is blocked for too long it will cause the users to experience the page as sluggish, or unresponsive to user input.
How WP Rocket can help
The execution of JavaScript is the most important factor that affects this metric. So delaying and deferring as much JavaScript as possible will have the biggest impact here.
When you analyze your site using PageSpeed Insights or Lighthouse, in the test results find the Diagnostics section, and click on the Avoid long main-thread tasks tab.
This will give you a list of the longest tasks on the main thread, which you can try to optimize.
Reduce the impact of JavaScript code
You can use the following WP Rocket features to reduce the impact:
- Load JavaScript deferred
It will reduce the render-blocking JS, and load the code that's needed for the page or responding to user input. This is applied to the code coming from your site, and third-party code. - Delay JavaScript execution
Because JS is delayed until user interaction, it will improve INP/TBT. This is applied to the code coming from your site, and third-party code. - Prefetch DNS requests
It can help in reducing the impact of third-party JS code by resolving the DNS of a specific domain before it has been explicitly called.
Reduce JavaScript execution time
- Minify JavaScript files and GZIP
By minifying JS and WP Rocket automatically compressing them with GZIP you can speed up JavaScript execution.
Minimize main thread work
- Minify CSS files and Remove Unused CSS
These options will minimize main thread work and along with WP Rocket automatically compressing it with GZIP help with transferring smaller file sizes. - Automatic Lazy Rendering
With this automatic feature, the main thread work will be reduced, because the below the fold elements will only be rendered if the user scrolls down the page and really needs to see them.
Keep request counts low and transfer sizes small
- Optimize Google Fonts
Google font requests are automatically optimized with the display=swap parameter and preconnect resource hint. - Preload fonts
For self-hosted fonts this will improve load time by adding a preload tag in the <head> of the site. This allows you to tell the browser to start downloading fonts that it otherwise wouldn't discover until much later.
Additional steps to improve TBT
The root cause of a long TBT is the code (mostly JavaScript) that has been added to your site via your theme and plugins.
Therefore it is essential to understand that while WP Rocket can help mitigate the impact of this code, it cannot fix everything.
So, ideally, you should try to remove as much JavaScript from your site as possible. You can do that using plugins such as:
- https://wordpress.org/plugins/plugin-organizer/
- https://wordpress.org/plugins/wp-asset-clean-up/
- https://wordpress.org/plugins/plugin-load-filter/
- https://tomasz-dobrzynski.com/wordpress-gonzales