How To Defer Javascript Properly In WordPress

In an earlier article, I’d shown you how to defer Javascript properly so that it does two things:

Doesn’t interfere with page rendering
Doesn’t break stuff

However, that particular configuration doesn’t work for everyone. Despite taking precautions, there are some plugins and themes that won’t work even when the scripts are “deferred” with jQuery excluded. In addition, you could have problems with console errors, and weird messages like “Unexpected Identifier”, and so on.

To resolve these issues, we need to do more with Javascript in a way that doesn’t break our site. To do that, there’s one perfect plugin called “Async Javascript”. Here’s how it works.

Defer or Async?

I’d mentioned in the earlier article, that you have two choices when it comes to delaying the execution of Javascript – defer, and Async. In general, defer is better because it preserves the loading order of Javascript. But your site might have different requirements, which means that “async” might be a better choice.

Excluding jQuery

Another consideration is that the “jQuery” script is one of the most popular and ubiquitous scripts in WordPress. It even comes bundled with the core installation. As a result, touching it in any way can be very dangerous, and will almost surely break your site – if not now, then in the future.

All this, means that we have 4 basic combinations to deal with Javascript:

Everything “defer”
Everything “async”
Everything “defer” except jQuery
Everything “async” except jQuery

Finding out which one is right for you is more a question of experimenting, than logic. It’s quite difficult to figure out which option you need in advance, because it’s almost impossible to figure out everything beforehand. Just when you think your site is working fine, you suddenly realize that some functionality is broken!

Using Async Javascript

The Async Javascript plugin is the single best plugin on the market to do this. When you download and install it, you can go to the configuration screen under “Settings” on the WordPress dashboard. The first set of options allow you to control the operations of the plugin. Namely:

Whether or not it displays on Admin pages
Whether or not it’s enabled on checkout pages
Global enabled/disable

The reason why there’s a separate option for checkout pages is two fold:

Your checkout pages are the bread and butter of your site. This is the last place you want something to go wrong!
These pages usually require a lot of complex interactions like price and coupon entry, discount calculations, ajax scripts etc. It’s actually a good idea to disable all Javascript optimizations on these critical pages.

Choosing One of Four Options With a Click

Using Async Javascript, you can quickly switch between any of the four options of Javascript with a single click as shown here:

This allows you to experiment and see what’s working and what isn’t. Chances are that one of these is best for your site and you won’t need to do any additional configuration!

Disabling Javascript Optimization Based on Plugins/Themes

Another advanced option is specifically disabling Async Javascript for individual themes and plugins. Some of this software is very finicky and doesn’t play well with anyone messing around with their Javascript.

If you have such a plugin, simply enter the path to its folder in the options in the configuration screen, and Async Javascript will leave them alone. None of the JS files contained in that folder or its subfolder will be touched.

Of course, remember that the more plugins and themes you exempt for Javascript optimization, the more your site slows down. So it’s up to you to find a balance between performance and speed.

Plays well with Autoptimize

I recommend Autoptimize as one of the best “all in one” plugins for optimization. Async Javascript allows you to integrate with Autoptimize, so that there are no conflicts. I highly recommend you check it out – it’s the best solution I’ve found so far for perfect JS optimization.

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!