What is Total Blocking Time?

Total Blocking Time (TBT) is a performance metric that measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) during which the main thread was blocked long enough to prevent input responsiveness. It quantifies the severity and duration of how non-interactive a page is before it becomes reliably interactive.

How Total Blocking Time Affects WordPress Performance

1. User Experience:
   • High TBT can lead to a poor user experience because the page may appear to be loaded but is unresponsive to user inputs. This lag can frustrate users trying to interact with page elements, potentially leading to higher bounce rates.
2. Engagement and Conversions:
   • If users encounter delays or unresponsive behavior while trying to interact with forms, buttons, or other interactive elements, it may lead to decreased engagement and lower conversion rates, as users may abandon the task they came to complete.
3. SEO Impact:
   • TBT is one of the metrics that contribute to Google’s Core Web Vitals, specifically falling under responsiveness and user experience. Poor performance in these metrics can negatively affect a site’s search engine rankings, as faster, more responsive sites are favored in search results.

Resolving High Total Blocking Time in WordPress

1. Minimize and Optimize JavaScript:
   • Reducing the size and complexity of JavaScript files can significantly decrease TBT. Minimize, compress, and defer unused JavaScript, ensuring only necessary scripts are loaded and they do not block the main thread.
2. Defer Non-Critical JavaScript:
   • Use the defer attribute for scripts that are not critical for the initial rendering of the page. This ensures they are executed only after the HTML document has been fully parsed.
3. Break Up Long Tasks:
   • Identify and break down long tasks that block the main thread into smaller, asynchronous tasks. This can be achieved by slicing heavy computations into smaller chunks using web workers or idle callbacks.
4. Optimize Your Server Response Time:
   • Improve server response times by upgrading your hosting solution, optimizing your server configuration, and using effective caching strategies. Faster server responses reduce the initial load time, indirectly improving TBT.
5. Use a Web Worker:
   • If your WordPress site performs heavy JavaScript operations, consider moving them to a Web Worker. Web Workers run scripts in background threads, allowing them to execute without interfering with the user interface.
6. Prioritize Interactive Elements:
   • Ensure that interactive elements become interactive as soon as possible. This might involve prioritizing the loading and processing of scripts that impact the UI elements first.
7. Efficiently Load Third-Party Scripts:
   • Third-party scripts such as ads, font loaders, and social buttons can significantly impact TBT. Load these scripts asynchronously or defer their loading to a later point in the page lifecycle.
8. Monitor and Measure:
   • Regularly monitor your site’s performance using tools like Google Lighthouse, which provides insights into TBT and suggestions for improvements. Continuously measuring performance can help you understand the impact of the changes you make.

By addressing these factors, you can improve the Total Blocking Time, thereby enhancing both the user experience and the performance of your WordPress site.