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 article was written by Tom Dupuis and originally published on Tom Dupuis.