Total Blocking Time and First Input Delay
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 First Input Delay (FID). This guide will cover all the relevant information about it.
Understanding Total Blocking Time
By improving TBT we can improve First Input Delay which is the actual Core Web Vital metric.
TBT measures the responsiveness of the page to the user input.
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
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.
You can use the following WP Rocket features to reduce the impact:
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.
Because JS is delayed until user interaction, it will improve FID/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.
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
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
Therefore it is essential to understand that while WP Rocket can help mitigate the impact of this code, it cannot fix everything.