Total Blocking Time In WordPress: How To Reduce Main-Thread Tasks And JavaScript

Total blocking time wordpress

Total blocking time is caused by long main-thread tasks, which means that’s the report you should be looking at in PageSpeed Insights.

Open your avoid long main-thread tasks report. Are your longest tasks from third-party code like Google Tag Manager or Analytics? Are they from specific plugins using jQuery? Most times, blocking time is caused by JavaScript added by WordPress plugins, themes, or third-party code.

Just like most recommendations in PageSpeed Insights, using a lightweight foundation will solve most of your issues (as well as avoiding too many third-party tracking tools in this case).

While it’s always best to start at the source, you can make other optimizations like delaying, deferring, and minifying JavaScript. Or even removing certain plugins/JavaScript files from specific content using asset unloading plugins like Perfmatters. This is a 3-step process: find bottlenecks, start at the source, then optimize everything else. Comment if you have questions.

Total Blocking Time (Milliseconds) Recommendation
0–300 Good
300-600 Needs Improvement
Over 600 Poor

 

1. Find Long Main-Thread Tasks

In PageSpeed Insights, look at your longest main-thread tasks.

The URLs often tell you whether it’s from a specific third-party domain, plugin, jQuery (which is also needed for many plugins), etc.

Avoid long main thread tasks 1

Minimize main-thread work is basically the same report only it shows a more general picture. You can see whether you need to work on JavaScript, CSS, or other files. Any report affecting total blocking time shows the “TBT” abbreviation next to it like shown in the screenshot above.

Minimize main thread work

 

2. Delay JavaScript

Third-party code is one of the biggest culprits of blocking time.

This usually happens when you install a bunch of tracking codes so you can track analytics (Google Analytics, Tag Manager, Heatmaps, Facebook Pixel, New Relic, and even reCAPTCHA or AdSense). Once you’ve removed third-party code you don’t need, you can usually delay the rest.

View your third-party code report and look at their JavaScript files:

Delay javascript third party code

WP Rocket delays most of these automatically while other plugins require you to add these manually (FlyingPress, Flying Scripts, LiteSpeed Cache, and Perfmatters are all manual). Choose a plugin for this and read through the plugin’s documentation since their steps can be different.

Here’s a list of common JavaScript files you can delay:


ga( '
ga('
google-analytics.com/analytics.js
analytics.js
gtagv4.js
analytics-minimal.js
/gtm.js
/gtag/js
gtag(
/gtm-
adsbygoogle.js
grecaptcha.execute
optimize.js
fbevents.js
fbq(
/busting/facebook-tracking/
disqus.com/embed.js
script.hotjar.com
wp-content/themes/script-name
wp-content/plugins/plugin-name

Then add them to your plugin:

Flying scripts

Some plugins let you adjust the timeout. If you’re not seeing good results in PSI, try increasing it. But make sure you test this since delaying too long can impact things like AdSense revenue.

 

3. Remove Plugins Adding JavaScript

Still not sure which plugins add the most JavaScript?

Look at the coverage report in Chrome Dev Tools. You can filter by “type” to see all JavaScript files and see their total bytes, unused bytes, and URL (which usually has the plugin name in it). You could even search for Elementor to find CSS/JS files Elementor and its plugins are adding.

Unused javascript chrome dev tools

Query Monitor, WP Hive, and my list of 75+ common slow plugins are also useful resources.

 

4. Optimize Your Theme + Page Builder

Elementor and Divi add more CSS/JS than Gutenberg.

I recently switched to GeneratePress but there are plenty of other solid options that also use Gutenberg (like Blocksy and Kadence, although Kadence is definitely on the expensive side).

Fastest wordpress themes
View full test

Don’t want to remove your page builder? Then optimize it.

Activate Built-in Performance Settings – Elementor’s Experiments and Divi’s built-in performance settings have several options to reduce and optimize CSS, JavaScript, and fonts. Even Elementor’s optimized DOM output can help since DOM size is part of total blocking time.

Elementor with without experiments font optimization

Don’t Install Heavy Page Builder Plugins – using slow page builders is bad enough, why make it worse? I get you may want more templates, but you have to be careful with those plugins too.

Elementor css

Code Your Header/Footer In CSS – CSS is much more lightweight than page builder code. You can still use a page builder to design pages, but these appear across your entire site. I hired WP Johnny to do it and my source code went from mentioning Elementor from about 2,000 to 200.

Elementor source code

 

5. Remove JavaScript From Specific Content

Yep, we’re talking about asset unloading plugins like Perfmatters and Asset CleanUp. I like Perfmatters because it has many other optimizations not found in most cache plugins (or do a better job). Like remove unused CSS which does a better job than WP Rocket (see why in #14).

Some plugins and JavaScript files load across your entire site when they’re only being used in specific areas. By disabling these on specific pages/posts, you can remove unused JavaScript.

Once you choose a plugin, activate the script manager if needed, then enable test mode until you’re ready to publish changes. View any page on your site and click “script manager” in the top menu to see CSS/JS files loading on that page. I listed examples on disabling things below.

Examples:

  • Disable social sharing plugin everywhere but posts.
  • Disable contact form everywhere but contact page.
  • Disable gallery plugins everything but pages with galleries.
  • Disable elementor-diagolog if you’re not using it for Popups.

Disable plugins perfmatters

Disable elementor diaglog javascript

 

6. Remove jQuery

jQuery slows down your website and increases total blocking time. Felix Arntz from Google/WordPress wrote an article on how removing jQuery can lead to 80% less JavaScript.

Perfmatters has a script manager setting to show dependencies. Once enabled, head to “jQuery” in the script manager and you’ll see whether your plugins/theme depend on jQuery. This can mean removing plugins, replacing them with code or plugins that don’t use jQuery, and even changing themes. But this is worth it if you’re serious about making improvements.

Jquery plugin dependencies 1

If removing jQuery completely isn’t an option, you can just try removing jQuery migrate. Check Chrome Dev Tools to see if your website is using it.

Jquery migrate chrome dev tools 1

If it’s not, disable it. Some optimization plugins do this or use jQuery Manager.

Remove jquery migrate

 

7. Minify JavaScript/CSS

Minification reduces file sizes by stripping unnecessary characters. If it breaks your site, you should find problematic files and exclude them rather than disabling the setting completely.

Minify javascript

 

8. Test Combining CSS/JavaScript

Combining files is not recommended in the majority of cases especially for large sites or if you’re using HTTP/2 (which most websites are). This can actually increase total blocking time.

Dont combine javascript files

 

9. Make Sure Critical CSS Is Working

Most cache plugins have documentation to check whether critical CSS is working which can improve nearly all core web vitals: LCP, CLS, as well as total blocking time. So make sure it is.

Wp rocket critical css 1

 

10. Host Fonts Locally And Preload/Inline Them

Fonts can increase total blocking time especially if they’re not optimized.

Blocking time gtmetrix waterfall

Host Fonts Locally – instead of serving fonts from third-party domains like fonts.gstatic.com, many plugins have a setting to host fonts locally (like Elementor). FlyingPress and other cache plugins also do it. WP Rocket doesn’t so you may need to use something like Perfmatters/OMGF.

Elementor host google fonts locally preload

Preload Fonts – see the “avoid chaining critical requests” report and copy high priority fonts.

Avoid chaining critical requests

Preload fonts while testing results in a Waterfall chart (too many can actually have a negative impact). You should only preload fonts loading above the fold or when found in CSS files. Most cache plugins do this, use Perfmatters (shown below), Pre* Party , or you can do this manually.

Fonts should always be preloaded with the crossorigin attribute.

Preload font perfmatters

Inline Fonts – prevent requests from extra CSS and loads your fonts faster.

Elementor inline font icons

 

11. Defer JavaScript

Deferring JavaScript improves total blocking time by eliminating render-blocking resources.

Most cache plugins have a setting for this but it can sometimes break your site, in which case you’ll need to find any problematic files causing errors and exclude them from being deferred. Otherwise, you can use Async JavaScript. Install the plugin then click apply defer in the settings.

Async javascript

 

12. Optimize Images

Optimizing images improves total blocking time by keeping request counts low and transfer sizes small. There are multiple recommendations in PageSpeed Insights for optimizing images.

Having used multiple image optimization plugins, I can tell you CDNs are usually easier, more effective, and  prevents bloat added by image optimization plugins. Cloudflare Pro with image resizing, Mirage, and Polish are excellent and I use this with Rocket.net’s Cloudflare Enterprise. Bunny Optimizer is solid which you can also use on FlyingCDN when using FlyingPress. I don’t recommend RocketCDN (StackPath) which lacks many features – including image optimization.

  • Properly size images – avoid huge images and resize them to correct dimensions. For example, my blog width is 765 pixels width so I crop my blog images to those dimensions.
  • Defer offscreen images – lazy load them, but make sure all above the fold images are excluded and preloaded (or use fetchpriority). “Preloaded critical images” in FlyingPress and Perfmatters are best where you set a number of images usually shown above the fold.
  • Compress images – Lighthouse tests images at 85% compression, so that’s what I’d use.
  • Serve images from a CDN – make sure your CDN is serving images (as well as CSS/JS).
  • Specify image dimensions – most cache plugins have a “add missing image dimensions” setting or you can manually add a width + height in the image’s HTML. Fixes layout shifts.
  • WebP – most images CDN and image optimization plugins can serve images using WebP.
  • Resize images for mobile – most image CDNs do this or use an adaptive image plugin. Otherwise, large images are served to mobile which can increase mobile load times/LCP.

Image optimization pagespeed insights

 

13. Add Resource Hints

We already talked about preload in step 10, so what about prefetch and preconnect?

In the past, DNS prefetch was used for third-party domains. But you usually don’t need this anymore because most third-party code should be delayed. The other type of prefetch can be done in plugins like Flying Pages or FlyingPress where it will preload pages in the viewport. While this won’t improve total blocking time, it can make your site appear to load much faster.

<link rel="dns-prefetch" href="https://maps.googleapis.com">

Preconnect should usually only be used for third-party fonts like fonts.gstatic.com and CDN URLs. However, fonts should be hosted locally so there should be no reason to preconnect third-party fonts. CDN URLs are only used by CDNs like BunnyCDN or StackPath (not Cloudflare) which are usually preconnected automatically by your cache plugin when you add the CDN URL to your cache plugin’s settings. Which means again, there’s usually no need to do this manually.

<link rel="preconnect" href="/assets/vendor/gstatic" crossorigin>
<link rel="preconnect" href="https://cdn.yourdomain.com" crossorigin>

Prefetch dns requests

 

14. Remove Unused CSS

If your minimize main-thread work report shows styles are creating long tasks, removing unused CSS can help.

While the following cache plugins support this (WP Rocket, FlyingPress, LiteSpeed Cache, Perfmatters), you should ideally be using one of the last 3 options. When WP Rocket removes unused CSS, they load used CSS in inline HTML which increases HTML size and also means it’s not able to be cached. With the other 3 options, you’ll load used CSS in a separate file which is faster for real users. Therefore, WP Rocket may be better for “scores” but it’s slower for visitors.

Remove unused css wp rocket vs perfmatters vs flyingpress
Vikas explains why WP Rocket is slower (update: Perfmatters now has “separate file” option)

 

15. Fix 4xx And 5xx Errors

If you have red errors in your GTmetrix Waterfall chart, it means there’s an error loading the request. As you see, it adds quite a bit of blocking time and wait time. You want to fix these.

Gtmetrix canceled errors 1

 

FAQs

How do I reduce total blocking time in WordPress?

Reducing total blocking time in WordPress is usually done by optimizing JavaScript, although you should check long main-thread tasks in PageSpeed Insights to learn specific files that need to be optimized.

How do I reduce total blocking time in WP Rocket?

WP Rocket can improve total blocking time by delaying/deferring JavaScript, removing unused CSS, minifying CSS/JS, and using critical CSS.

How can I improve total blocking time in Elementor?

While Elementor's CSS/JS can increase total blocking time, you can optimize it using Experiments, coding your header/footer in CSS, and avoiding heavy page builder plugins.

Cheers,
Tom

You Might Also Like:

Leave a Comment