Do you want to know why your WordPress page is struggling to load in 2024?
This is one of the core metrics in webpage speed called Total Blocking Time.
Users will feel that your site is slower if the Total Blocking Time is high, and everyone doesn’t like sites that load slowly, right?
Don’t worry! in this blog post, you will learn about Total Blocking Time (TBT) in WordPress and also learn the reasons. Finally, you will know how to reduce total blocking time in WordPress.
What Is Total Blocking Time in WordPress?
Total Blocking Time (TBT) is an important metric that tells how long a web page is prevented from rendering. It is a time between the user’s input and when the web page becomes interactive.
Page rendering, input processing, and other critical operations are all handled by the main thread. The main thread is blocked from executing more code while a Long Task is being processed. This might make the page feel sluggish and unresponsive to the user’s actions.
For example, you are clicking a link to get to a different page. The new page is being loaded, but the browser’s main thread is currently occupied by a Long Task. Because of this, you will see nothing but a blank screen when your browser attempts to load a new website.
After waiting for the Long Task to finish processing (around 50 ms), the browser will be able to display the newly loaded page. However, after 50 ms of waiting, you may have already given up hope that the website would load instantly.
A high TBT score feels like your website is taking too long to reply to your input.
What causes Total Blocking Time in WordPress?
Several reasons cause Total Blocking Time WordPress, let’s find out those reasons.
Your JavaScript and CSS are not optimized:
If JavaScript and CSS files are not optimized, they can cause TBT. This is especially true for files that come from plugins, page builders, or third-party code. Long tasks (more than 50ms), useless code, and big files can all be part of this.
Third-party code:
TBT can go up when third-party code is used, like tracking codes or plugins. This could happen if you add a lot of tracking codes for embedded analytics tools like Google Analytics, Tag Manager, Heatmaps, Facebook Pixel, New Relic, reCAPTCHA, or AdSense.
Unoptimized Database:
If any of the database queries that are used to load the page are slow, the main thread will be blocked until the queries have finished running. This will prevent the main thread from responding to user input.
Poorly Optimized Images and Videos:
When a WordPress page loads, the browser needs to download all of the images and videos on the page before it can start rendering the page. If any of the images or videos are poorly optimized, the browser will need to spend more time downloading them, which can delay the rendering of the page.
Response time from the server is slow:
A server that responds slowly can make TBT go up. This could be because of how the server is set up, the hosting plan, or the content delivery network (CDN) that is being used.
Excessive Long Main Thread:
TBT can go up if there are a lot of long main-thread jobs. This can be caused by JavaScript being added by WordPress plugins, themes, or third-party code.
Too many plugins:
Too many plugins can cause TBT if they are not optimized or if they don’t work well together.
Just learn what causes TBT in WordPress. Now we need to fix it.
How to reduce total blocking time in WordPress?
First, we need to measure the Total Blocking Time of your WordPress website.
To measure your website’s TBT, you can go to PageSpeed Insights on Google.
Type in your URL and click the Analyze button.
If you need to wait a few seconds, PageSpeed Insights will diagnose your website thoroughly.
You will receive a report for both your desktop and mobile version of your WordPress website.
Let’s check the desktop version first.
You can see that there is no TBT in the desktop version. But the other metrics are very poor. Now let’s check the mobile version.
The mobile version has a green total blocking time of 20 ms, which is a good range. But after fixing it will be 0 ms.
You can fix your page speed metrics performance with your coding knowledge but as a beginner, you can use the WordPress plugin to fix those issues.
You can fix Total Blocking Time (TBT) with many WordPress plugins.
WP Rocket is one of the best and most famous plugins. This is a complete speed optimization plugin. It can help you lower TBT by compressing and minifying your CSS and JavaScript files, activating lazy loading of your images, and caching your pages.
But there is one problem, WP Rocket is a premium plugin, although it has a free version that won’t fix your page speed performance effectively.
We need to find an alternative plugin, which is free and very effective. You can check these 10 plugins to optimize your WordPress Website.
We will use two plugins that can fix our problems.
Go to your WordPress dashboard.
Navigate to Plugins -> Add New.
Now type Wp-DBManager on the plugin search and click Install Now.
Now Activate the plugin and again go to the plugin search.
Type Debloat on the plugin search and click Install now.
After installing Debloat, activate the plugin.
Great, we have both the plugins to fix our page speed performance.
Before applying any changes, you need to keep a backup of your website.
Well, we will use the WP-DBManager plugin now. It provides the option to optimize and repair databases, create backups, delete backups, drop and empty tables, and execute predefined queries. Also, you can schedule Database backups, optimizations, and repairs automatically.
Go to your dashboard and click Database -> Backup DB.
Then scroll down and click the Backup button.
After taking a backup of the database, your website is ready to optimize the database.
Go to Database -> Optimize DB.
Then, without touching any field, simply scroll down and click the button Optimize.
Great, your database is optimized.
Now we will use the Debloat plugin. This plugin removes unused CSS, optimizes CSS, optimizes JS, and speeds up your site.
Navigate to your dashboard and click Settings -> Debloat: Optimize.
You will see a page to optimize CSS and you can clear any cache from the Empty All Cache button.
Simply check all the fields that can slow down your pages with the unoptimized CSS.
Also, you can check check remove unused CSS and click the Save Changes button.
Now go to the Optimize JS tab and check all the fields that use JS to slow down the webpage.
After checking all the fields, scroll down and click the Save Changes button.
Great, now let’s check the web page performance again using PageSpeed Insight.
Again type the URL and click Analyze.
You will find that the Total Blocking Time of the mobile version is changed from 20 ms to 0 ms.
Well, you know that most of the web users are from mobile devices, so optimizing the mobile version is a must for your WordPress website.
Final Words
Finally, you have learned how to reduce total blocking time in WordPress.
Now if anyone asks you about Total Blocking Time, you can confidently explain to them what is it, what causes it, and how to fix it.
Your web page speed is a core factor in SEO, so you should always keep an eye on it.
Frequently Asked Questions
How Often Should I Measure Total Blocking Time in WordPress?
In WordPress, you should check Total Blocking Time (TBT) often, at least once a month. This way, you can find and fix any speed issues your website might be having.
It is recommended that you check TBT more often if you are making big changes to your website, like adding new plugins or themes. This is to make sure that the changes are not slowing down your website.
What Is The Difference Between Deferring And Delaying Javascript Files In WordPress?
If you defer JavaScript, the JavaScript files won’t load until the rest of the page has loaded. If you delay JavaScript, the JavaScript files won’t load at all until the user interacts with the page. Both of these methods can be used to make a WordPress website run faster.
