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:
setTimeout, to avoid locking the main thread for extended periods of time. Again, maybe you just need that one function?
- Related to
asyncis defer. Use the
- 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
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 😭.