Need to reduce your total blocking time in WordPress?
Total blocking time is caused by long tasks (over 50ms) that block the main thread.
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?
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.
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.
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.
- 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
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:
- Host Gravatars locally using WP User Avatar.
- 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
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?
How do I reduce total blocking time using WP Rocket?
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?
Hope this was helpful!