Total Blocking Time and Interaction to Next Paint
Total Blocking Time is not an actual Core Web Vital metric, but it’s important because it affects the Interaction to Next Paint metric. This guide will cover all the relevant information about it.
Understanding Total Blocking Time
By improving Total Blocking Time (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, 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. 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.
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.
The following are the insights related to the TBT metric:
How WP Rocket can help
You can use the following WP Rocket features to improve this metric:
- Load JavaScript deferred and Delay JavaScript execution - These features will reduce the render-blocking JavaScript, 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.
- Preconnect to external domains - It can help in reducing the impact of third-party JavaScript code by resolving the DNS of a specific domain before it has been explicitly called.
- Minify JavaScript files and GZIP compression - By minifying JS and WP Rocket automatically compressing them with GZIP you can speed up JavaScript execution.
- 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.
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
Additional resources
How to Reduce Total Blocking Time (TBT) on Your WordPress Site