Need to reduce your total blocking time in WordPress?

Total blocking time is caused by long tasks (over 50ms) that block the main thread.

For WordPress sites, total blocking time is usually caused by unoptimized JavaScript and CSS (often from plugins, page builders, or third-party code) as well as fonts, animations, and images.

Optimizing JavaScript is a good place to start which you can use defer, delay, and asset unloading plugins to do. But if you want to improve TBT at the source, take a look at your JavaScript files and learn which elements on your site are causing high total blocking time.

1. Find Elements Causing High Blocking Time

GTmetrix Waterfall – brown bars represent blocking time.

Chrome Dev Tools – the Performance tab in Chrome Dev Tools shows total blocking time.

Third-Party Code – blocking time of third-party code can be directly measured in PageSpeed Insights. Often, this is from Google Fonts, Analytics, Tag Manager, advertisements, and videos.

Long Main-Thread Tasks – Google lists “minimize main-thread work” as one of the biggest factors of total blocking time. Find your worst main-thread contributors in PageSpeed Insights.

What Is A Good Total Blocking Time?

0–300	Fast
300-600	Average
Over 600	Slow

2. Defer JavaScript

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

WP Rocket and other cache plugins might let you “load JavaScript deferred” but Autoptimize and Async JavaScript do a better job (they fixed all but one render-blocking resource for me).

Install Autoptimize and enable optimize (and aggregate) CSS and JavaScript code.

Next, install the Async JavaScript plugin, head to the settings, and click “apply defer.”

This should disable “minify CSS and JavaScript” in your cache plugin and let Autoptimize handle it. Retest your website for render-blocking resources and ideally, your scores will be improved.

3. Delay JavaScript

Delaying JavaScript can also improve total blocking time.

This is usually done using the Flying Scripts plugin or WP Rocket’s delay JavaScript execution setting. It will delay JavaScript until user interaction which makes your initial load time faster.

If you’re using Flying Scripts or another method, you can copy WP Rocket’s list of scripts that are delayed and use that as a baseline. You may also consider delaying //cdnjs.cloudflare.com and other non-critical JavaScript in your PageSpeed Insights and GTmetrix Waterfall report.

4. Test Combining CSS And JavaScript

Combining CSS and JavaScript can increase or decrease total block time.

Try enabling and disabling this (usually in your cache plugin) and test the results of both. WP Johnny says that smaller websites should usually combine while larger sites usually shouldn’t.

5. Remove Unused JavaScript

Removing unused JavaScript can significantly lower total blocking time.

Choose An Asset Unloading Plugin

Asset CleanUp and Perfmatters are popular plugins for unloading assets. I use Perfmatters on my WordPress site since the UI/UX is much better. However, Asset CleanUp is free and the Pro Version lets you unload custom CSS while Perfmatters (and Asset CleanUp free version) do not.

Enable The Test Mode And Script Manager

If using Asset CleanUp, enable test mode so you can test unloading assets without breaking your site. If using Perfmatters, enable the script manager in the settings. Perfmatters doesn’t have a test mode, so create a staging site or check your site for errors after unloading assets.

Remove Unused JavaScript Where It’s Not Being Used

Edit a page or post and view all scripts (and styles) loading on the page. If a script or style is being loaded when it’s not being used on the page, you can disable it. You can disable it on the current URL, use regex, or disable it everywhere but current URL, pages, or posts. You will need to do this for multiple pages/posts on your site where different assets/plugins are being loaded.

Examples:

• Disable unused CSS/JS in Elementor and other page builders.
• Disable social sharing plugin everywhere but posts.
• Disable slider/lightbox plugins except content where they’re used.
• Disable WooCommerce scripts and styles on non-eCommerce content.

6. Minify CSS And Generate Critical CSS

Most cache plugins have an option to minify CSS, minify JavaScript, and use critical CSS (optimize CSS delivery in WP Rocket). All can help improve total blocking time in WordPress.

However, both can result in errors.

Minification errors are easy to fix (find the problematic files in your source code and exclude them from minification).

Optimize CSS delivery errors may require a few extra steps:

• Search “rocket-critical-css” in your source code to make sure it’s working.
• If it doesn’t appear, regenerate critical CSS in WP Rocket and page builders (if applicable).
• Run your site through PurifyCSS.
• Download the combined, purified, and minified CSS.
• Paste the CSS code in the “fallback critical CSS” field.
• Exclude files from CSS delivery using WP Rocket’s helper plugin.
• Disable optimize CSS delivery on individual pages/posts if needed.
• If neither of these work, you can try Gijo Varghese’s FlyingPress plugin.

7. Optimize Third-Party Scripts

Reducing impact of third-party code is the first thing Google recommends to improve total blocking time.

Open this report in PageSpeed Insights to see which third-party code is blocking the main thread as well as its blocking time. Third-party code is anything that loads from external websites (Google Analytics, Tag Manager, advertisements, social networks, Hotjar, others).

Once you know which scripts cause high blocking times, optimize them:

• Delay JavaScript from third-party scripts.
• Host Gravatars locally using WP User Avatar.
• Reserve space for ads and delay the JavaScript.
• Host Google Fonts and Google Analytics locally.
• Use a lightweight social sharing plugin like Grow Social.
• Lazy load videos and replace iframes with a preview image.
• Host Facebook Pixel locally in WP Rocket’s add-on settings.
• Prefetch third-party domains (here’s a list of common domains).
• Take a screenshot of a Google Map and link the image to driving directions.

8. Host Fonts Locally And Preload Them

Fonts can increase total blocking time and it’s always faster to host them locally.

Host Fonts Locally – download your fonts directly from the Google Fonts website (while being minimal with families/weights), convert them to WOFF2 format using a tool like Transfonter, and add them to your CSS. Alternatively, you can also use the OMGF plugin to host fonts locally.

Preload Fonts – preloading fonts can be done manually or using WP Rocket and Perfmatters. Google may recommend preloading some fonts in your preload key requests report, or you can find your font files in the GTmetrix Waterfall “Fonts” section. Copy the URLs and preload them.

9. Fix 4xx And 5xx Errors In GTmetrix Waterfall

If you have red errors in your GTmetrix Waterfall chart, it means there’s an error loading the request. As you can see, it adds quite a bit of blocking time and wait time. Fix this immediately!

10. Remove Heavy Plugins And Page Builders

Some page builders add lots of extra CSS and JavaScript to your site.

Elementor and Divi were two of the slowest page builders in speed tests. In Facebook Groups, there is also a large trend of people moving to Gutenberg, Oxygen Builder, and GeneratePress.

If you don’t want to remove your page builder, you can still do the following:

• Disable unused Elementor features using Asset CleanUp or Perfmatters (step #5).
• Test your speed when adding extra plugins for page builders (Ultimate Addons, etc).
• If you’re using additional plugins for page builders, disable modules you’re not using.
• Enable Optimized DOM Output and Improved Asset Loading in Elementor settings.
• Hard code your header, menu, footer, and blog sidebar so it doesn’t use page builders.
• Avoid running heavy page builders on top of cheap, shared hosting with low CPU limits.

11. Test Total Blocking Time Without Animations

Animations can look nice, but they’re definitely not good for speed.

They can increase both total blocking time and cumulative layout shift. Google recommends using the CSS transform property which lets you use animations without causing layout shifts. Otherwise, you may want to try removing animations and retesting your total blocking time.

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.

• Compress images – ShortPixel is a solid image optimization plugin. PageSpeed Insights uses an 85% compression level in their tests – so that’s what I recommend setting it at.
• Properly size images – avoid huge images and resize them to correct dimensions. For example, my blog width is 680 pixels (with) so I crop my blog images to those dimensions.
• Serve images from a CDN – serve images (and other assets) from your CDN URL. Often, this isn’t enabled when setting CDNs and you’ll need a CDN rewrite (e.g. in Perfmatters).
• Specify image dimensions – add a width and height attribute to the image’s HTML. Same thing as WP Rocket’s settings for “add missing image dimensions” which does it for you.
• Serve important images in WebP format – next-gen format images and faster than JPEG/PNG. I would at least convert your critical images (logo, sidebar images, etc). ShortPixel and WebP Media Converter are top choices for converting images to WebP.
• Use adaptive images – use an adaptive images plugin to serve smaller images on mobile.

Retest Your Total Blocking Time

Once you’re ready, run your WordPress site through Lighthouse, PageSpeed Insights, or GTmetrix and check your total blocking time. Hopefully, it’s under 300ms like Google wants.

Frequently Asked Questions

How do I reduce total blocking time in WordPress?

The most effective way to reduce total blocking time in WordPress is to optimize JavaScript files (including third-party code). Defer, delay, minify, and remove unused JavaScript to cut down on your blocking times.

How do I reduce total blocking time using WP Rocket?

To reduce blocking time using WP Rocket, delay non-critical JavaScript, load JavaScript deferred, and make sure optimized CSS delivery is working properly. Minifying CSS, JavaScript, and preloading fonts can also reduce blocking time.

How do I reduce total blocking time on mobile?

Check files with long main-thread blocking times in your mobile speed report and optimize those specifically. Avoid hamburger menus and complex designs on mobile. Remove sliders and heavy plugins from mobile that aren’t absolutely needed. Keep it simple.

How can I improve total blocking time in Elementor?

Elementor adds a lot of CSS and JavaScript which can increase total block times. Try disabling Elementor assets using an asset unloading plugin. Avoid animations if possible and enable optimized DOM output and improved asset loading in your Elementor settings.

Hope this was helpful!

Cheers,
Hafiz