Page speed has become important factor since Google added speed as one of the ranking factors. With Core Web Vital and core speed update, there are no options for website owners to improve the page loading speed. Using third-party scripts on the website is one of the biggest issues that plummet the speed. However, you can use tricks like delaying JavaScript to overcome this issue. In this article, we will explain how to reduce total blocking time to zero by delaying JavaScript in WordPress.
What are Blocking Resources?
Generally, CSS and JS can cause render blocking resources issue in Google PageSpeed Insights tool. However, JavaScript is the major culprit especially when loading from third-parties. Many WordPress themes and plugins use JavaScript to offer certain functions. You can use minimal themes like GeneratePress or Astra, but it may not be suitable for all scenarios. Also, these themes need dozens of plugins to make your site looking professional.
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
- Reduce JavaScript execution time
- 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.
By looking at the issues, you can easily understand Google hates JavaScript and JS is the culprit killing your page speed score.
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?
The easy recommendations could be using a theme that does not rely on JavaScript and avoid using heavy page builder plugins. Below is a PageSpeed score of a website that uses GeneratePress theme without any heavy or page builder plugins. The mobile / desktop speed scores are 55 / 72 respectively.
The reason for low score is obvious that the site uses Google AdSense, that is third-party JavaScript code in the header section. Therefore, even if you have lightweight theme and plugins, third-party code can do the damage to reduce the score.
Unfortunately, you can’t simply disable AdSense or Analytics code which are legitimately needed for you. The only option here is to delay JavaScript so that the total blocking time will become zero. Delaying JavaScript will stop loading the script unless there is a user interaction to trigger that script. For example, an advertisement will show only when the user reaches that screen area. There are multiple plugins available for delaying JavaScript in WordPress.
- WP Rocket – this is the most popular premium caching plugin for WordPress. You can purchase WP Rocket for $49 for single site license to speed up your website. After installing, go to “File Optimization” tab and enable “Delay JavaScript” option. Save your changes and clear the cache before you check the score in PSI tool.
- 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.
- Flying Scripts – this is a free plugin and works like a charm for delaying JavaScript in your site. We will explain this option in detail as you can use this plugin for free.
Delay JavaScript in WordPress with Flying 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
No matter which plugin you use to delay JavaScript, you can go back to check your page in Google PageSpeed Insights tools. In most cases, you will see above 90 and in our example case, we get 100 / 100 in mobile / desktop respectively.
This is because the total blocking time will become zero when you delay JavaScript, in addition, you can eliminate render blocking resources by delaying the script.
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”.
Defer Vs Delay JavaScript
Remember, delaying JavaScript is different that deferring JavaScript. Deferring will move the scripts to generally footer section of the page. The scripts will still load when rendering the page thus reduce page speed score in PageSpeed Insights tool. Deferring JavaScript may help to overcome render blocking resources but will not reduce total blocking time.
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.
Leave a Reply
Your email is safe with us.