Are you looking for different methods to reduce the total blocking time in WordPress? 

The total blocking time is blocked by the main thread, and it is caused by the long tasks and third-party coding. Blocking the total time of the WordPress website is caused by unsuitable CSS, JavaScript, plugins, and third-party codes. The blocking of the total time of your WordPress site may be caused by the different fonts and images. If you want to reduce the total blocking time, then you can learn the JavaScript file. You should learn the JavaScript file and find the material in the file that causes the blocking.

Find the Component that Causes High Blocking Time:

Different components cause the high blocking time of your site.

 GTmetrix Waterfall: The GTmetrix Waterfall epitomised the blocking time.

 Chrome Dev: There are other tools Chrome Dev Tools and it shows the total blocking time.  

Third-Party Code: There you can directly measure page speed insight during the blocking time of the third-party code. 

Main Thread Tasks: Reducing the main thread in the Google list is the main factor of the blocking time. Find the page speed insight of the harmful main thread.

Total Blocking Time

Total Blocking Time in Milliseconds	Recommendation
0-300	Good
300-600	Need Improvement
Over 600	Poor

1.Defer JavaScript:

If you want to improve your WordPress website performance, then you can defer JavaScript. You can defer JavaScript by the manual method and WordPress plugins. 

Diagnostic Section of the Lighthouse Issues:

You can manage to remove the blocking resources and unused JavaScript files and avoid the chaining critical requests recommendation. 

Manual Method to Defer the JavaScript:

You can defer the JavaScript by the manual method and improve your WordPress website performance. There you can add the attribute to defer the JavaScript in HTML. You can add the JavaScript tag in the HTML and add this JavaScript attribute <script src=”code.js” defer></script>.

WordPress Plugins:

Asset CleanUp: This is a free WordPress plugin, and you can use this plugin and scan the loaded content on the page. With this plugin, you can select the un useful content of the JavaScript.

WP Rocket: WP Rocket is another plugin, and with this plugin, you can press and defer the JavaScript file.

2. Delay JavaScript:

You can delay the JavaScript and improve the performance of the touching screen, scrolling, and clicking buttons. With the delay in JavaScript, you can improve the performance and total blocking time. You can improve this performance with the manual method and WordPress plugins.

Manual Method:

You can delay the JavaScript with the coding and you need to set a function. To delay the JavaScript you need to use the setTimeout() function. You can use this function to delay the JavaScript

WordPress Plugins:

Flying Scripts: You can use this plugin to delay the JavaScript.

WP Meteor: This is another plugin and you can use this plugin to delay the JavaScript and improve the website speed for the visitor.

Gonzales: You can disable the CSS and JavaScript with the conditions and it depends on the page visitors.

Test the Combination of Both CSS and JavaScript:

The combination of CSS and JavaScript may increase or decrease the total block time and you need to check it. You need to test the results of enabling or disabling the combination of both CSS and JavaScript.

3. Remove Unused JavaScript:

You can remove the unused JavaScript to reduce the total blocking time of the website.

Asset Clean up:  This is a WordPress plugin and you can use this plugin to scan and detect loading pages. 

Testing Mode: Now you can enable the testing mode and check the results.  You can check the error of the unloaded content.

Remove Unused JavaScript: Now you can check the loaded CSS and JavaScript. When there are any unused CSS and JavaScript is unused then you can disable the CSS. 

You can disable the Elementor and you can disable the slider, lightbox, and woo Commerce.

4. Minify CSS:

There is a cache plugin, and this plugin has the option to minify the CSS and minify the JavaScript. You can improve the CSS delivery time and minify the CSS and JavaScript.

• You can run your website with the PurifyCSS.
• Now you can download both minified and purified CSS.
• You can paste all CSS files in the “fallback critical CSS” field and remove the CSS delivery with WP Rockets helper plugins.
• Now you can disable the optimised CSS delivery on the particular blog post, and if these plugins do not work, then you can try to use the FlyingPress plugin.

5. Optimize the Third-Party Code Script:

 You need to reduce the third-party code script, and you can open the page speed insight and view the third-party code that blocks the main thread and blocks the time. The third-party code loads from external websites, such as Google Analytics, Tag Manager, and advertising the social network. You need to decrease the effect of the third-party code and try to know which script is causing the total blocking.

6: Host Locally Fonts and Preload Themes:

If you use the fonts and then the fonts increase the total blocking time of the WordPress website.

Host the Fonts Locally: You can download the fonts directly from the google fonts website. You can convert it into the WOFF2 format with tools like Tranfonter and use the CSS in it. OMGF plugin can also be used to host the fonts locally as an alternative method.

Preload Fonts: Preloading fonts can be executed in two ways and the first way involves manually loading the fonts. The other method is that you can use the different plugins to preload the fonts. You can use the WP Rocket and Perfmatters tools to preload the Google-recommended fonts. Now you can find these fonts in the fonts section of GTmetrix Waterfall and copy their URL and reload it.

7. Fix 4xx And 5xx Errors:

You can check the GTmetrix Waterfall chart and if you saw the red error it is the error of the loading requests. The blocking time and wait time limit is increased so you need to fix this problem.

8. Remove Heavy Page Builder and Plugins:

Some heavy page builders and plugins slow your site and you need to remove these heavy page builders and plugins.

The Elementor and Devi are page builders and these page builders slow your websites. Now there are different page builders that are trending, such as GeneratePress, Gutenberg, and Oxygen Builder.

If you want to fast the speed of your website you need to follow the given steps.

• Use the Asset Cleanup plugin to remove the unused Elementor features.
• If you can improve the performance of your website by adding some additional plugins.
• You can disable the additional page builder and plugins to increase the site speed.
• If you have shared hosting with a low CPU limit then avoid using the heavy plugins and page builders.

9. Test Total Blocking Time of Your Site Without Animations:

If you use the animation in your site then these animations slow the speed of your website.

These animations increase the total blocking time and layout shifting. So, if you want to use animation on your website, you can use the Google-recommended CSS transform property without shifting the layout.

10. Optimize Images:

There are different recommendations to optimize the images and reduce the total blocking time.

Compress the Images: You can use it to test the page speed insight at the 85% compression level. So, you can use the Short Pixel plugin to optimize the images.

Proper Size of Images: If the image is large in size, you can resize the images for your blog. Now if your blog size is 600 pixels to properly crop the image of your blog.

Image Dimensions: You can add the height and width attributes in the HTML on the website. There is the WP Rocket plugin that adds the missing image dimensions. 

Use adaptive images: You can use the adaptive images plugin to change or small the size of the images on the mobile.

Conclusion:

There are different ways to reduce the total blocking time of your website. You can defer, delay the unused JavaScript and, minify the CSS and JavaScript. You can defer and delay the JavaScript with the manual method. In the manual method today and the JavaScript, you can add the JavaScript coding in the HTML file.

You can use the WordPress plugins to delay and defer the JavaScript and reduce the total blocking time. If your website has a slow speed, you can remove heavy page builders like Elementor and plugins. You can remove and scan the third-party codes with the plugins to reduce the total blocking time of your website.