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.
Table of Contents
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.
Your browser downloads a bunch of files in order to build and render the web page. That implies that the browser has a lot of work on its plate, since it does different processing. The browser uses a single thread to run the entire JavaScript on your page. This thread is called the main thread, which blocks the site from doing anything else but rendering this thread. This means that your site won’t be responsive to clicks, scrolling, or other user interactions until the render is finished.
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
As mentioned before, TBT is a usability metric, so in most cases optimizing JavaScript will do the work when it comes to improving your TBT.
Of course, there are other steps we can take to reduce TBT, but keep in mind that JavaScript optimizations will make the greatest impact. In the sections below, we’ll list the most common JavaScript issues and moves you can make to fix them.
Fix 404 Errors
When the browser comes to an element it can’t load, it will have to do some processing to figure that out. In case it encounters a custom 404 error, there could be way more problems than if it just gets a generic error page from the server (fixed 404). 404 errors are usually caused by a broken image or broken piece of JavaScript.
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.
Reduce JavaScript
This step is also very simple. When working on our clients’ sites, we often encounter tools and other files that our clients are no longer using, such as Hotjar or Lucky Orange. Run a test to get an overview of JavaScript files, plugins, and all other elements you have on your site and remove everything that’s not being used.
Remember that the fewer files, code, and plugins always implies a faster page load speed. So getting an audit of your site’s content is the first step. Again, we suggest using SiteSpeedBot. It only takes 60 seconds to complete the test, which will then provide you with the breakdown of the content by file size so you know how big the JavaScript is and what domain name it’s loading from.
Keep in mind that big JavaScript is the worst for Total Blocking Time, since larger JavaScript means more stuff to process. The size of your JavaScript should be less than half a megabyte, since pushing it over that limit wll cause your site to work slower because there’s too much stuff it has to load. In case you see a lot of JS in terms of files, there’s probably some work to do there.
Defer JavaScript
Deferring JavaScript is one of the most common JavaScript specific optimizations. Loading JavaScript can be done raw, without any optimization or tags attached to it, and can be loaded either asynchronously or deferred. Not having any of those tags in place causes your site to be very slow and block everything but the main thread.
With an asynchronous tag attached to that piece of JavaScript, the browser that processes the HTML will stop each time it encounters the JavaScript file. It downloads that JS file next and then executes it without affecting the main thread. Once the browser downloads it, it stops and processes that JavaScript file. Async is better than totally unoptimized JavaScript, but not ideal.
In the best case, we want to defer JavaScript as well. That means that the browser doesn’t stop while downloading it, but waits until the entire HTML file is processed, and then executes the JavaScript. This implies that the JS loads later in the loading process so it doesn’t block the site from users’ interactions.
How to Defer JavaScript in WordPress Using WP Rocket
We typically recommend WP Rocket when it comes to deferring JavaScript, since it does a great job and comes with a simple setting. To defer JavaScript using WP Rocket, you’ll first need to instal the plugin. Another great thing about WP Rocket is that everything comes set up already, so you can proceed to deferring JavaScript right away.
First, go to the “Settings” and then to “WP Rocket”. Next, click on the “File Optimization” and check the “Load JavaScript deferred” box under “JavaScript Files”. We suggest you also check the “Safe Mode for jQuery” box that will show up under the previous option. Lastly, click on the “Save Changes” button below, and you’re good to go.
How to Defer JavaScript in WordPress Using Async JavaScript
Async JavaScript is a free WordPress plugin. Similar to other free plugins, it might be a bit more technical, so here’s a simple guide on how to defer JavaScript using Async JavaScript.
First go to “Settings” and click to check the box that you’ll see at the top of the page, next to “Enable Async Javascript?”. In the table of “Quick Settings” you’ll pick whether you wanna JS async or JS defer while excluding jQuery. The third section lets you choose between async and defer JS parsing methods. Click “Save Changes” and it’s done.
Other tools we’d suggest when it comes to deferring JavaScript are Autoptimize and Perfmatters. Each of these tools is a great choice, but remember to only use one of them when fixing these issues, since having that optimization across multiple plugins might cause troubles.
Make Sure You Don’t Break Things
Deferring JavaScript intervenes with the load order of the files, and this makes a possibility of breaking something powered by JavaScript. jQuery shouldn’t be deferred, since it’s one of the most widely used JavaScript libraries, and deferring its files will most probably break them. WP Rocket and other defer plugins include options for “exclude jQuery” as in Async JavaScript, or “safe mode for jQuery” as in WP Rocket. We suggest we use these options in most situations.
To check if you’ve broken any JavaScript files, open your page in Google Chrome, right-click anywhere on the page (not on the links), and select “Inspect“ from the drop-down menu. Then click on “Console Tab”. In the window that pops up, you can see if there are any errors in your JavaScript code. To fix those errors, you should exclude them from being deferred.
How To Optimize JavaScript in Other Ways
Using WordPress plugins isn’t the only way to optimize JavaScript. In the following sections, we’ll get into more detail on other ways to optimize JavaScript.
Remove it!
This option is often overlooked. On a daily basis, we encounter sites that still have plugins and third-party JavaScript code installed, although JavaScript no longer uses it. This is mostly caused by tools such as Hotjar or old email marketing tools.
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.
Delay/Pause JavaScript Until the User Interacts With the Page
Each of the above-mentioned plugins comes with an option to delay or pause JavaScript. Simply put, delaying JavaScript will postpone executing the JS until the user interacts with the page. This is a great solution for features such as live chat or third-party marketing tools (Bing marketing code, LinkedIn marketing code) that aren’t necessary to immediately load.
In WP Rocket and Perfmatters, this option is called delay JavaScript. Another great plugin that will help you pause JavaScript is called Flying Scripts, and it’s free of charge. Make sure to choose the plugin that best suits you, and pause any JavaScript files that don’t have to load with the initial page.
This action can be taken on all third-party JavaScript, but we wouldn’t suggest it when it comes to some JS files such as Google analytics, since it can mess with the numbers. Same goes if you have an affiliate site ad code on there – we can pause it, but it might mess with your ad numbers.
Remember that delaying or pausing that JavaScript until the visitor interacts with the site would make a great impact since the unnecessary elements won’t be loaded as part of the initial render at all. This brings us to the next step of our post on how to reduce total blocking time.
Move the Code Further Down the Page or to the Footer
It often happens that we find an analytics code by Facebook Pixel or Google Tag Manager located right at the top in the <head> section or even at the very top of the <head> section. That implies that as soon as the browser starts rendering the page, it needs to go and process the JavaScript.
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.
Move JavaScript to Google Tag Manager and Use the Window Loaded Trigger
In case you have a lot of JavaScript, this step is just what you need. Move the JS code to Google Tag Manager and then change the trigger to “window loaded”. Google Tag Manager provides different triggers for the tags. If you leave the settings on default, the code is going to load as soon as the user clicks on the page.
On the other hand, if you use a window loaded trigger, the browser will wait until the render is completed and then execute the code. This process is very similar to deferring the JavaScript, and even a little better, since it makes the code load later. It’s important to note that using this method won’t break the code in 99,9% of the cases, so it’s not going to affect your analytics, AdWords, or any other important data.
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
Another thing that might help you improve your Total Blocking Time is CloudFlare’s Rocket Loader. The way it defers JavaScript is more sophisticated than how WP Rocket does it, so it can bring more advantages too. On the other hand, you should keep in mind that the more advanced the tool is, the bigger the chance of breaking things is. So check the browser console and ensure there are no errors logged there.
Just beware that sometimes while optimizing JavaScript, you can change the order in which it loads, and so break dependencies. Sometimes some JavaScript is relying on other JavaScript, and by working on it you might break the load chain and cause your page or site to stop working as they should. So our advice is to double-check everything.
Use Browser Hints To Speed Up The Code – Preconnect & Preload
“Browser hints” are HTML code that commands the browser to do certain things. From a JavaScript point of view, it tells the browser to priorly load specific files in the load process. The preconnect directive orders the browser to do a DNS search and connect to a server address.
Both those directives can be used to boost the speed of JavaScript as well as the overall site speed, as they’re the ones in charge of telling the browser to perform a task such as DNS lookups, which can often be slow.
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.
Combine and Minify JavaScript (Not Always)
The next step on our list is to combine and minify JavaScript. In some situations, these methods can be very useful, so they’re definitely worth a try. Combining and minifying can definitely bring some results, but we wouldn’t call it a major deal.
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
Generally speaking, reducing the page size is always helpful, since there will be less stuff to load. There are a number of elements that add to the size of a page, such as images, videos, a lot of JavaScript, and third party tools.
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.
The solutions to other issues that cause problems with page size are already listed in this article (deferring/delaying/removing JavaScript, using a CDN service, etc).
Optimize CSS
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.
Minor Issues
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
Using CDN doesn’t affect JavaScript or test score directly, but it generally allows the site to load faster. This means that CDN speeds up how quickly the visitors can download stuff or how quickly the files are sent to them. That being said, it’s clear that using a CDN increases overall load speed.
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.
Final Words
We’ve reached the end of our article on how to reduce Total Blocking Time in Google Pagespeed Insights. Keep in mind that you should be careful when messing with this stuff, especially when speaking of JavaScript, since there’s always a certain risk of breaking something. We hope that you’ll find this post helpful. As always, feel free to post any questions in the comment section, and we’ll be glad to get back to you.