TBT, or Total Blocking Time, represents the amount of time a page is blocked from responding to visitors’ inputs, such as clicks, screen taps, or keyboard presses.
In this article, we’ll get into the details of what TBT is, explain why it’s an important metric, and tell you how you can reduce it in Google Pagespeed Insights step by step. As always, we provide you with an audio version of the post, since it might be easier to understand some of the more technical stuff through listening.
With that out of the way, let’s get started.
What Is Total Blocking Time
Simply put, total blocking time is a technical concept that measures the time from the first contentful paint (FCP) to the time to interactive (TTI). FCP is the amount of time needed for the first element of the page to appear in the user’s browser after he opens it, which is usually the logo, whereas TTI is the amount of time needed for the web page to start responding to the user’s inputs.
TBT is a metric related to the first input delay (FID), which represents the time needed for the site to respond to the user’s interaction with it. FID is an important core-web metric used to measure load responsiveness from the user’s perspective. It’s a real-world metric that can’t be directly measured with Google Pagespeed Insights, given that it’s a synthetic test.
This is when the TBT comes to the scene. Total Blocking Time is a metric whose main function is to emulate how busy the processor is. What it shows is how responsive the web page is while doing work.
Let’s try to explain this in simpler terms.
So, why is this metric so important?
Why Is TBT Important
TBT is the heaviest weighted metric right now in Google Pagespeed Insights test. The reason behind this is that TBT is a user-oriented metric which gives you a great overview of user experience translated to statistics. It also contributes 30% to the score in version 8 of Lighthouse Scoring calculator – a tool which provides a great overview of different metrics. That being said, it becomes obvious how important TBT really is for your site’s speed and overall performance.
Now that you know what TBT is and why it’s an important metric, let’s move on to the common issues that cause a high Total Blocking Time and how you can resolve them.
Solutions to Reducing Your TBT
Fix 404 Errors
To find out if there are any 404 errors on your site, you can use our speed test tool SiteSpeedBot. SiteSpeedBot is free and easy to use. It will provide you with a detailed overview of your site’s performance, and help you locate the 404s, which is something most other speed test tools won’t do.
Remember that 404s are the worst for your site speed and overall performance, so fixing them should improve things and make room for better user experience.
Make Sure You Don’t Break Things
To resolve this issue, run an audit of your WordPress plugins, the code in Google Tag manager, and any manual code embeds. Later on, remove anything you don’t use, since this can be of big help, particularly on older sites.
Move the Code Further Down the Page or to the Footer
Moving those codes further down the page without changing it at all will speed things up significantly. The further down the page the code is when fired, the more of the rendering will be finished, so that code will cause a lower Total Blocking Time.
While here, we’d like to mention an example of a site we were boosting a few days ago. Initially, it had a score of around 80 in Google Pagespeed Insights. This site had clickcease code among other analytics and AdWords codes. After we changed the trigger to “window loaded”, it gained another 15-20 points, and reached a score of 95-99 after which the pages felt much snappier too.
Use CloudFlare Rocket Loader
Use Browser Hints To Speed Up The Code – Preconnect & Preload
In most cases, we only use the preconnect directive and usually add https://www.googletagmanager.com, https://www.google.com and hostnames for other marketing scripts as preconnect directives.
Easier way to do this is by using the Pre Party Resource Hints plugin in WordPress. A more difficult, but also more effective way to do this would be to use a speed test tool, such as Site Speed Bot, and look for a slower third-party code. To do so, we can add preconnect code manually, or let a plugin, such as Perfmatters, do it for us. If you choose to do it manually, insert <link rel=”preconnect” href=”https://plausible.io”> code into the header of the site.
You can find a lot of articles that brag about this optimization method as it was magic, but it doesn’t do that much. Still, in some particular situations combining or minifying can help, especially in terms of site speed. One such case is when the code has a lot of comments, but that doesn’t happen so often.
Reduce Page Size
Big sized images can be fixed by using image compression, lazy loading, and NextGen image optimization. Image compression should be lossless, in order to preserve the quality while cutting down the size. Lazy loading is a feature that blocks elements from loading until the user scrolls down to the part of the page where that element is located, while NextGen image optimization introduces newer formats, such as the webp format, which reduces the size even further while keeping the quality intact.
This step only applies to the sites that have a lot of CSS. A majority of websites have under 200 kilobytes of CSS, which isn’t really a problem when speaking of Total Blocking Time.
In case your CSS is over 300 kilobytes, you might want to consider optimizing your CSS. Again, WP Rocket is our tool of choice when it comes to reducing or optimizing the CSS. WP Rocket comes with a setting which allows you to inline and optimize all of the CSS at the same time. We sometimes use this option when working on our clients’ sites, and we’ve found it to be helpful.
Now that we’ve explained all of the common factors that influence TBT, we should take some time to focus on resolving some issues that, even though less important, might also cause a big Total Blocking Time.
Use CDN Network
Our recommandation when it comes to which CDN service is among the best is CloudFlare. Their $5 per month plan provides APO service, and it’s a great choice, especially if your visitors are spread around the globe.
Use HTTP2 Protocol
Another factor that we mention in almost all of our speed-focused posts is the use of HTTP2. Having the newest version of protocol will help increase your site speed and improve the overall performance, so make sure to always use the newest version of the protocol that your host supports. You can run your site through our speed test tool, SiteSpeedBot, which will tell you if your hosting provider supports the HTTP2 protocol. This can increase the speed at which the browser downloads stuff, so make sure you check it out.