Total Blocking Time and First Input Delay

Understanding Total Blocking Time

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). 

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.

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 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.

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 Optimize CSS delivery
    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
    For Google fonts we are already automatically optimizing requests with 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:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.