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.
Want to defer Javascript on your site?
If you’re not a developer yourself, this can seem like an insurmountable task.
Deferring Javascript isn’t tough if you built the site from scratch, but with WordPress, you likely have a theme and 6-10 plugins all loading their own Javascript files.
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.
Browsers normally load Javascript files before they attempt to render your site. This means that visitors won’t be able to see your site until all of the Javascript (and CSS) files are fully loaded.
If you defer a Javascript file, the HTML document can load before the Javascript file is finished loading. The JS file may load at the same time, but it won’t execute until the HTML document is fully loaded.
In other words, if you defer your Javascript files, the HTML document will load sooner which means your site will be visible sooner. This makes your site appear faster to visitors which is ultimately what matters most.
With that out of the way, let’s get to the incredibly simple method available for deferring Javascript on your site.
How to defer Javascript files
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.
Defer with Async Javascript
First, there is the free and easy-to-use Async Javascript plugin.
Simple and popular, Async Javascript is a solid choice for deferring JS scripts.
When you install this performance plugin, you’ll find the following new settings menu added to your site:
If you want to get things up and running fast, you can async or defer all of your Javascript files at once with one of these settings:
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.
Overall, Async Javascript is a great plugin and it’s free!
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.
While this plugin is complex under-the-hood, the settings panel requires no technical knowledge. This goes for deferring Javascript files too.
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.
And that’s all there really is to it! Just check a single box and your Javascript files will be deferred.
If you want to explore some more performance options, you can visit WP Rocket here or review our WP Rocket tutorial.
Javascript deferred
With your Javascript files deferred, your site’s HTML document will load sooner and make your site appear much faster.
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.
If you have any remaining questions about how to defer Javascript with WordPress, leave a comment below.
