How to Enhance Total Blocking Time in WordPress

Understanding Total Blocking Time

Total Blocking Time (TBT) is not an official Core Web Vital metric, but it holds significance as it can be measured using tools like PageSpeed Insights or Lighthouse, unlike First Input Delay (FID). By improving TBT, we can ultimately enhance FID, which is the actual Core Web Vital metric.

TBT measures the responsiveness of a page to user input. The main-thread within the browser is responsible for displaying a web page and executing various tasks such as reading HTML, rendering CSS and JavaScript, and more. When any of these tasks exceeds 50 ms, known as a Long Task, it blocks the main-thread since the browser cannot interrupt a task in progress. The time beyond 50 ms is considered the blocking portion, and TBT is the accumulation of all blocking times for each long task.

If the main-thread remains blocked for an extended period, it leads to a sluggish and unresponsive user experience.

How WP Rocket Can Assist

The execution of JavaScript plays a crucial role in affecting this metric. Therefore, delaying and deferring JavaScript as much as possible can have a significant impact.

To optimize TBT, you can follow these steps on your site using PageSpeed Insights or Lighthouse:

Total Blocking Time and First Input Delay

Reduce the Impact of JavaScript Code

To reduce the impact of JavaScript, you can leverage the following WP Rocket features:

  • Load JavaScript deferred: This feature minimizes render-blocking JS by loading only the necessary code for the page or user input. It applies to code originating from your site as well as third-party code.
  • Delay JavaScript execution: By deferring the execution of JS until user interaction occurs, you can improve FID/TBT. This feature applies to code from your site and third-party sources.
  • Prefetch DNS requests: Resolving the DNS of a specific domain ahead of explicit usage can help reduce the impact of third-party JS code.
See also  Discover the Perfect Limousine Service WordPress Themes for Your Business

Reduce JavaScript Execution Time

Minifying JavaScript files and compressing them with GZIP accelerates JavaScript execution. WP Rocket automatically minifies and compresses JS files, enabling faster loading times.

Minimize Main Thread Work

Minifying CSS files and removing unused CSS can significantly reduce main thread work. WP Rocket not only minifies CSS files but also compresses them with GZIP, resulting in smaller file sizes and improved transfer speeds.

Keep Request Counts Low and Transfer Sizes Small

To optimize Google Fonts, WP Rocket automatically optimizes Google font requests with the display=swap parameter and preconnect resource hint.

For self-hosted fonts, you can improve load time by adding a preload tag in the <head> section of your site. This instructs the browser to initiate font downloads earlier, enhancing overall performance.

Additional Steps to Improve TBT

The primary cause of prolonged TBT is often the code (especially JavaScript) added to your site through themes and plugins. While WP Rocket can help mitigate the impact of this code, it cannot fix everything.

To further enhance TBT, consider removing as much JavaScript as possible from your site. You can utilize plugins like:

  • ProgramMatek
  • ProgramMatek
  • ProgramMatek
  • ProgramMatek

Additional Resources

For more information on improving Core Web Vitals, refer to the WP Rocket Core Web Vitals Hub – First Input Delay.