Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
If you’re not a developer yourself, this can seem like an insurmountable task.
Finding the “hooks” you need to change how every JS file is loaded would take forever!
Luckily, there is a much easier way.
All you need is the right tool.
Why you should defer JS files
Let’s make sure we’re on the same page.
Rather than trying to manually find and defer scripts, you can use a plugin to do it automatically for you.
There are two different methods I recommend.
When you install this performance plugin, you’ll find the following new settings menu added to your site:
You can apply deferred loading method to all files, make sure to clear your cache and then carefully test your site. There is a chance some features of your site may break, such as the mobile menu or interactive search bars.
If you do notice any functionality on your site no longer works, switch to one of the versions that exclude jQuery and most likely this will resolve any issues.
Otherwise, you can manually add scripts to async or defer allowing you to carefully test one file at a time.
The one thing with this approach is that you’ll need to have some technical knowledge in order to find the script handles needed to identify which files should be deferred.
If you want a performance plugin that’s just as simple but more robust, keep reading.
How to defer JS with WP Rocket
The plugin I use on competethemes.com and recommend for most performance optimization is WP Rocket.
WP Rocket provides a simple interface full of performance optimization features. You can flip a switch to minify and concatenate files, enable advanced caching, lazy load images, and more.
In the WP Rocket dashboard, you’ll find a File Optimization section.
There are lots of great optimization tools here, and the JS deferring feature is found at the bottom of the page. If you turn on deferring, a second checkbox will appear with a “Safe Mode” setting automatically enabled too.
As I mentioned already, deferring jQuery very often leads to broken features on your site. While you can try turning off the Safe Mode, you probably shouldn’t.
For most WordPress sites, this is an easy and significant performance gain. Better still, it doesn’t require any technical knowledge to apply to your site.