• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero® Blog

NameHero® Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories
  • Authors

How To Defer Javascript Properly In WordPress

Bhagwad Park

Published on: January 1, 2019

Categories: WordPress 0

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

  1. Doesn’t interfere with page rendering

  2. 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:

  1. Everything “defer”

  2. Everything “async”

  3. Everything “defer” except jQuery

  4. 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:

  1. Whether or not it displays on Admin pages

  2. Whether or not it’s enabled on checkout pages

  3. Global enabled/disable

Javascript Async Options

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

  1. Your checkout pages are the bread and butter of your site. This is the last place you want something to go wrong!

  2. 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:

Defer Javascript Properly in WordPress

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 Profile Picture
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!

Related Posts

The First CDN With Infinite Cache Retention?

Traditionally, CDNs have always ignored your cache retention policies for infrequently accessed content. Cloudflare is about to change that.

How To Fix “Sorry, this file type is not permitted for security reasons.”

Chances are pretty high that you landed here because you are having trouble trying to upload some files to your WordPress – Media Library. You likely have run into one of the following error messages when attempting the upload: "Sorry, this file type is not permitted for security reasons." OR "Sorry, you are not allowed […]

How To Lock WordPress Gutenberg Blocks From Editing

WordPress version 6.0 included features allowing us to lock blocks, prevent deletion, editing, and movement. Here's how it works.

Why Changing Your WordPress Theme Isn’t A Good Idea

It can be tempting to change your WordPress theme when you see advertisements for newer ones. But consider changing your CSS first.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

WordPress Hosting vs. Web Hosting – What’s The Difference?

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero® proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 Name Hero, LLC. All rights reserved.
NameHero® is a registered trademark.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA