How To Improve Your Total Blocking Time (TBT)

Earlier this week I talked about LCP taking up 25% of your Google Lighthouse score. But did you know there’s an even larger metric? Meet TBT. I takes up 30% of the total score. I’ll explain what it is, and what you can do to avoid it as much as possible.

Imagine you’re in a car and you’re trying to get to a destination. But there’s a big traffic jam on the way, and it’s slowing you down. That’s what TBT is like for your server. Total Blocking Time (TBT) is like a traffic jam on the highway. How do you avoid the traffic jam?

When your browser is loading your WordPress site, and there are lot of things that are taking too long to load or process, it will slow the whole process down, just like that traffic jam.

So you’ll want to:

• Minimize the size of the JavaScript files that are being loaded on the page. Larger JavaScript files will take longer to execute and block the main thread than smaller files. So, do you really need that JavaScript file loaded on that page? Or maybe just a portion?
• Because breaking up long-running JavaScript tasks into smaller chunks, using techniques such as requestIdleCallback or setTimeout, to avoid locking the main thread for extended periods of time. Again, maybe you just need that one function?
• Use a JavaScript framework or library that provides a mechanism for offloading work to a background thread. Anything to prevent something that’s not urgent to have to run on load. Web Workers are built for this.
• Use the 𝚊𝚜𝚢𝚗𝚌 attribute on your script tags to load JavaScript files asynchronously and avoid blocking the main thread. This allows your browser to focus on the things it MUST focus on while loading that page.
• Related to async is defer. Use the defer attribute on your script tags to load JavaScript files after the initial render of the page. This avoids blocking the main thread during page load. Similar to what’s mentioned above with async.
• Leveraging browser cache to store resources so they won’t have to be loaded on every single page load helps as well. Just like it does for LCP.
• Use browser performance APIs, such as performance.mark() and performance.measure() to see what your code really does. Use DevTools Performance tab to measure the impact of your JavaScript code and identify areas for optimization.

You can learn a lot from Google’s resources on how to fully make use of your Chromium based DevTools. It all breaks down on being conscious on what you load exactly, where you load it, and asking yourself with what priority it should be loaded.

Hope this helps you better understand what some of the logic is behind why you want to optimize the performance of your WordPress site in the browser. Nobody likes a traffic jam, so let’s clear up those highways 😭.