Total blocking time is caused by long main-thread tasks, which means that’s the report you should be looking at in PageSpeed Insights.
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).
- Find long main-thread-tasks
- Optimize your theme + page builder
- Remove jQuery
- Make sure critical CSS is working
- Host fonts locally and preload/inline them
- Optimize images
- Add resource hints
- Remove unused CSS
- Fix 4xx And 5xx Errors
|Total Blocking Time (Milliseconds)||Recommendation|
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.
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.
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.
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:
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.
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).
Don’t want to remove your page builder? Then optimize it.
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.
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.
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).
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.
- 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.
6. Remove jQuery
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.
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.
If it’s not, disable it. Some optimization plugins do this or use jQuery Manager.
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.
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.
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.
10. Host Fonts Locally And Preload/Inline Them
Fonts can increase total blocking time especially if they’re not optimized.
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.
Preload Fonts – see the “avoid chaining critical requests” report and copy high priority fonts.
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.
Inline Fonts – prevent requests from extra CSS and loads your fonts faster.
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.
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>
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.
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.
How do I reduce total blocking time in WordPress?
How do I reduce total blocking time in WP Rocket?
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.