Blog

  • BdThemes
  • WordPress
  • How To Reduce Total Blocking Time In WordPress: Free Method in 2024

How To Reduce Total Blocking Time In WordPress: Free Method in 2024

how to reduce total blocking time in wordpress website

Table ofContents

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.

MENaZoSswqnWKZxv5ScwQWcjQg7Uspm hHGb8ZWug6JksbXckPZLZ2QxGC8M6zzQlzlLYy4kP 8bQ3r5rBRHy6dbGboXvKPzzCXF9eTy6ug KvMZ0nu g0fPGksK9lp4AkGYUPTOqudZ8hQ1zmUmbHA - BdThemes

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.

lGybVM5eKafZ9hJ8kBaO1 jDNKHru8IulEs6FgoRC4Cb2HmLjRR1GoS7E0aAz8j4Ns6oyNADQQQnsPdR2in13uXPLPq4L ARixRF59zQxVp9gksFNPjQOL2 n - BdThemes

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.

cDRhkrxRrBVpr431KbA0dF7ooU5B QOZvQyODCI0KDFZQYTmBt1ohaWyfFmfPq0ktvSDagIYZlYz8zO8rKJP51RTle9XL9LRie0LfsjRpzyk3OHCCPA2 JWRdKBOaacAtTgced2cOhQH7QNeNW58iYE - BdThemes

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.

LbrqqCpeeE5ycJDuSLODE1fnveNMszyvLzRpUfm EhsQqYsZxThgOaa 2qDsa8If D xS Kn3pjVS9QpwY3RerquqUL5mlb28Ac3Wi81UiVWepfghfnrzgN9ABA5VuGY5q6wBsYpnfkO Zcv2G2S24E - BdThemes

Now type Wp-DBManager on the plugin search and click Install Now.

Ve02tFMmrt6rOCFuJNhfOYT 46sDF4OzyjjlgTfmtL0O - BdThemes

Now Activate the plugin and again go to the plugin search.

Type Debloat on the plugin search and click Install now.

sQLWI9tQ7 nCg iPlQQqyiYUfQxh xbILCke 8L1VaPBYKBxKrcT0J10Dr3Jzt7YVMMiVL9HVupzKLHsQPERSARpF N16TLMfWgWLXnOKrdzzaR5TdMEjLkeVS3BJNNGUZ pu1N4kpGfrrM6PSh664k - BdThemes

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.

HhLbzrMjQaJ eTTbPvr4vwWr moKPiWkVSVDaGrTMmFoOhVCFxH9 uSI5EI42EOuAzK3Mc9d4AU6oil6NX0k6qidFzS4kAFkOsG4cs8V3O0a0A 2vspR9sZXjHAsrFa6YsA5lpag6EVYLomzl3S9ABM - BdThemes

Then scroll down and click the Backup button.

wUXm33REv4bIligSJGZPrnQmEkVy vhdDg0xoP6YIRQ EI3z4q8JQYvrzZkXmFSHPgnNVv54qToj3kAeBRFzJD vvmIBRLhCqXXVqX yQt66TpqB9Jw QFsFC71rbbfSkUveJAmzPTub iVoloDBc0 - BdThemes

After taking a backup of the database, your website is ready to optimize the database.

Go to Database -> Optimize DB.

d 28lm1kZKrfna9QtLJbXxsFzSjQqHT7JN KQKK BOnsNxpzGaXcCrYrXgFti0th5HxfufmOEg - BdThemes

Then, without touching any field, simply scroll down and click the button Optimize.

hAngb - BdThemes

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.

TQwZt23qTaf2VgbrERrch PoMBdvJQrXY apSIzn - BdThemes

You will see a page to optimize CSS and you can clear any cache from the Empty All Cache button.

dt0 mfkHQon sFOtnmhbbGgMkQFzHcNDHvf qgi6r CZT byX0xBN nTmd3mNPUlPThTIz0C93nfvmzBZnbaSAfYxP0VJBRb0InS1 - BdThemes

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.

08AaPiKjQVdZojg N09tyYBpbMBnhFBr w2UC KZHSbZNwvpve5mVFSD3rjesZ9EI0cbYBMIJKGHunc rULYq3fZhKVgTkw9sFwzTtcyWJ2gMD77siZbQo0zjjtDh3JKNh33uYLc jyCWeo04FRqi0I - BdThemes

Now go to the Optimize JS tab and check all the fields that use JS to slow down the webpage.

- BdThemes

After checking all the fields, scroll down and click the Save Changes button.

CcIGGHaFj Jc7sZ4KvwNxg0ITBT Q6UcbwPnnXkI UdH9LKA7pQ4YQPhmOvE7NiXyBt7DCL5kkiTCmNOdTQv qZR2BvPNzOWn 4Mvg7nP3b7gYzu14WwjviOpq1WL0yh4 nndYvYCYWy7uSYwVRcuyo - BdThemes

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.

how to reduce total blocking time in WordPress

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.

Share this post to your social media

advanced divider
Picture of Kazi Riad
Kazi Riad
Hey I am Kazi Riad, a technical WordPress writer. Whose words solve many WordPress users' problems. Using WordPress since 2011, and knows all the ins and outs of WordPress eco systems. I'd love to narrate all the queries for WordPress Plugins and Themes. So let's unveil some mystery of WordPress with my writing.

Leave a Reply

Over 300,000+ Readers
Get fresh content from Bdthemes
Subscribe tonewsletter

Get Tips & Tricks, Updates, Fresh Blogs & Offers.

No spam messages. Only high-quality information that you deserve.

Explore OurProduct

Table of Contents

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 14-days money-back guarantee.
Need any further assistance? Call Us:+880 1700 55 95 95
Our supported payment system and security badge