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?
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. Removed 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.
Removed 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 it’s 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 Gutengerg, 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.
Page builder migrations and polls on the fastest themes (click on image to enlarge):
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! Drop a comment if you have questions.
Cheers,
Tom
Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.
Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-03-28 15:12:47.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.