What are Blocking Resources?
In addition to themes and plugins, you may also use external scripts from one of the following sources:
- Facebook Pixels or Google Analytics or (Tag Manager) tracking.
- Google AdSense or any other display advertisements (especially program using header bidding).
- Google Fonts
Ironically, most of these external scripts are from Google who pushes website owners for speed improvement.
Where to Find Total Blocking Time?
The total blocking time is one of the parameters used to calculate Google PageSpeed Insights (PSI) tool. This is part of the Lighthouse Scoring calculator which is the scale behind PSI.
- Go to PSI tool and test any page from your website.
- Check the “Lab Data” to find “Total Blocking Time”.
- As mentioned, the “Opportunities” section will generally show the reasons as unused CSS / JS and render blocking resources.
- Click on the “TBT” tab against “Show audits relevant to” text to filter relevant issues that cause total blocking time.
Issues That Cause Total Blocking Time
As you can see in PSI, here are some of the issues that actually increase total blocking time.
- Reduce the impact of third-party code
- Avoid an excessive DOM size
- Minimize main-thread work
- Avoid long main-thread tasks
You can click on each issue showing in your case to find the source item. For example, clicking on “Reduce the impact of third-party code” will the complete list of resources that loads on above the fold area of your page.
Why Reducing Total Blocking Time is Important?
You may wonder why you should look at TBT which is not part of Core Web Vital measurement. This is a complete misleading fact that only FID, CLS and LCP are important for Core Web Vitals. In fact, TBT is the most important parameter as it weighs 30% in the PageSpeed score. Under “Lab Data” results, click on the “See calculator” link to go to Lighthouse scoring calculator page. There, you can find the weightage of each parameter that affects your page speed score.
Change the “Device type” to mobile or desktop and check the calculation logic. You can also check the difference between the weightages of parameters in previous and current versions. TBT has the highest weightage of 30% and can plummet your score if you are not working on to improve it.
How to Reduce Total Blocking Time?
- Perfmatters – the second option is also a premium plugin that is cheaper than WP Rocket. Perfmatters is a good choice when you already have a caching solution for your WordPress site. You can get this plugin’s single site license for $24.95. You can go to the plugin’s setting page and navigate to “Options” tab. Enter the script name you want to delay under “Assets” tab. You can also set timeout to load the scripts if there are no user interactions. This plugin has a script manager to selectively load the script on required pages. For example, you can disable WooCommerce scripts on all post where you do not need the plugin’s scripts.
- Login to your WordPress admin panel and navigate to “Plugins “ Add New” section.
- Search for “flying script” to find “Flying Scripts by WP Speed Matters” plugin.
- Install and activate the plugin.
- Click on the “Settings” link showing below the installed plugin to go to the settings page. Alternatively, go to “Settings > Flying Scripts” menu item.
- The plugin has super simple settings. All you need is to enter the keywords under “Include Keywords” section. For example, include “adsbygoogle.js” for delaying AdSense advertisements. Similarly, you can delay jQuery or gtag to remove render blocking issue in PSI tool.
- You can leave the “Timeout” as 5s which is a default value. Timeout is a delay for loading the script even if there are no user trigger.
- If you want to disable the plugin on certain pages, you can enter the keywords in “Disable on pages” box.
- Click “Save Changes” button to delay the scripts.
You can check out the help questions under “FAQ” and get other optimization plugins under “Optimize More!” tabs. Otherwise, those tabs are not required at all.
Test in PageSpeed Insights Tool
You have to wait for a month time (precisely 28 days) to see the Core Web Vital assessment to change from “does not pass” to “pass”.
However, delaying will completely stop loading the script on the page when initial rendering. Only user interaction like scrolling or touch in mobile will trigger the scripts to dynamically. Hence, it is a kind of tricking PageSpeed Insights and other speed measuring tools as if the scripts do not exist on the page.