Google PageSpeed Insights tool shows various opportunities for improving the page loading speed of your site. You can easily fix most of them like serve images in NextGen format. However, some items are difficult to fix like reduce unused CSS or reduce unused JavaScript. In our earlier article, we have explained how to reduce unused CSS and, in this article, we will explore how to reduce unused JavaScript in WordPress site.
What is Unused JavaScript?
Your WordPress site needs a theme and multiple plugins along with core files to work properly in frontend of the browser. However, not all the files are required to render the page when it loads initially. There are two types of JavaScript files that you do not need for loading above the fold content.
- Completely unnecessary – these files are needed on that particular page though they may be needed on any other page on your site.
- Loading later on the page – these script files are only needed to load content on below the fold area.
Why to Reduce Unused JavaScript in WordPress Site?
Earlier days there were no need for worrying about the files loaded on your webpages. However, Google PageSpeed Insights tool nowadays will warn you about the unnecessary JavaScript files loaded on your site. This will also result in render blocking resources as the JavaScript files may block the loading of content. From Core Web Vitals perspective, loading additional JavaScript files will affect the Largest Content Paint (LCP) metric. In addition, it will also impact the total blocking time which is having 30% weightage in score calculation. Therefore, the small script files loaded on your site will drastically pull down the PageSpeed score.
If you want to pass Core Web Vitals and get good score in Google PageSpeed Insights tool, then reducing JavaScript is the only way for you.
How to Find Unused JavaScript on a Page?
Now that you understand the importance of removing unnecessary JavaScript files. Next question is how to find the script is required by a page or not. Google PageSpeed Insights tool will show the details of each script loaded along with estimated savings in files size. Unfortunately, this will not be much useful due to the following two reasons:
- You can’t remove content from a script file without knowing its purpose.
- Each page on your site may use different scripts. Removing a script throughout on your site may increase speed on one page but break other page which needs the script to work properly. The best example for this case is the contact form plugins. These plugins will load the script files on each page though they are needed only on the pages with a contact form.
- You may not be able to reduce third-party codes.
How to Remove Unused JavaScript in WordPress?
There are two ways to reduce or remove unused JavaScript files from your WordPress site. One is to deeply analyze each page and script to take an action. Otherwise, simply delay all the scripts and exclude specific files if your site layout is broken. The approach also depends on the theme and the plugins you use for your site. For lightweight themes like Astra, GeneratePress, Kadence and OceanWP, you can go for delaying all scripts. If you have jQuery based theme with heavy page builder plugins, it is better to go with deep analysis and disable or delay scripts on each page.
Remember, the solution to fix reduce unused JavaScript warning in PageSpeed Insights is to simply lazy load the scripts similar to lazy loading of images. However, this is much more complicated than static image files as the page layout will be broken if you delay script, move the position or change the order. Here we will explain three available options for you to delay JavaScript files which will help to eliminate reduce unused JavaScript warning from PageSpeed tool.
1. Delay JavaScript with Flying Scripts Plugin
There are free plugins like Asset Cleanup which needs lot of analysis and testing to find unused JavaScript. So, the easy and effective way is to use simple plugins like Flying Scripts. Go to your WordPress dashboard to install and activate “Flying Scripts by WP Speed Matters” plugin.
After successful activation, navigate to “Settings > Flying Scripts” menu. There are three simple inputs needed by the plugin:
- Include Keywords – enter the keyword in your JavaScript file to include it in the delaying. You can find the script details from Google PageSpeed and provide it here or provide a generic term like “contact” for delaying scripts from Contact Form plugin. Make sure to enter one keyword per line.
- Timeout – by default, the plugin will set 5 seconds as the timeout and after this time, the plugin will load the script even though there are no user actions to load the script.
- Disable on pages – provide the keywords of the page URLs to disable the plugin on specific pages. This is useful if you want to turn off delaying script when a particular page layout is broken.
That’s it!!! Save your changes and you are good to go. If you have provided correct keywords to include, your speed score will hit 90+ only with this small plugin.
2. Delay Everything with WP Rocket Plugin
Flying Scripts is super useful with only problem that you need to find the name of scripts and enter the keywords correctly. WP Rocket is a premium only plugin that offers exactly opposite approach. Here you can delay entire scripts on the site with single click and exclude any scripts like jQuery with keywords.
- After purchasing WP Rocket plugin, install and activate the license on your site.
- Go to “Settings > WP Rocket” menu and navigate to “File Optimization” section.
- Scroll to bottom and enable “Delay JavaScript execution” check box.
- You can anytime come back to this section and provide the scripts to be excluded from lazy loading.
- Click “Save Changes” button to save your changes.
3. Perfmatters Script Manager and Delay Script
Next plugin in our list is a premium Perfmatters plugin which offers combination of delaying all and disabling specific files. After purchasing and activating Perfmatters plugin, navigate to “Settings > Perfmatters” section. Go to “Assets” section and enable “Delay JavaScript” option. You can either select the “Delay Behavior” as “Delay All Scripts” or “Only Delay Specified Scripts”. Based the selected behavior, you can either include or exclude the script files and set the delay timeout.
If you want to manage scripts on per page level, enable “Script Manager” option. Now, edit any of your existing post or page and click “Script Manager” from the admin bar. You can find the scripts loaded on that page and disable them on site level or only on that page. for example, you can find the scripts loaded by Contact Form 7 plugin and disable them everywhere except on pages. It is also possible, to disable the script everywhere and enable only on specific page by editing and enabling from that page. After finishing, click on “Edit Post” from the admin bar to go back to the post editor.
Script Manager is the correct way to reduce unused JavaScript and CSS files on your site. However, handling this for each page will be a tedious task when you have hundreds of pages on your site.
Testing in Google PageSpeed Insights
All the above explained plugins will work when you configure them properly. However, when you have lot of plugins and heavy theme, it is necessary to test your pages thoroughly to make sure the site is loading without breaking the layout. The best option is to test each post type like page, post and any other custom post type on your site. If you are using page builder plugins, make sure to test those pages so that delaying JavaScript is not affecting them.
Finally, go to PageSpeed Insights and test your site’s page speed and you will find it is increased to 90+ level.
Third-Party JavaScript Files
Third-party script files are one of the major factors for killing page speed of a website. If you use too many external script files, you will see warning in PageSpeed Insights tool like “Reduce the impact of third-party code”.
Scripts like AdSense, Analytics, Facebook Pixels will easily reduce your speed score to poor level. You can delay them using any of the above plugin; however, it may have negative impact. For example, delaying AdSense scripts will impact your earnings especially when you show ads on the header section. Since users may not see the ad loaded on the header section, it will perform poorly thus reducing your revenue. This is especially problem with WP Rocket as you need manually exclude the ad scripts which is dynamic in nature. Therefore, make sure to understand what you are delaying and the impact instead of only looking at the speed score.