The RIGHT Way To Load  Javascript In WordPress (Without A Plugin)

Continuing on with our series on how to make your site faster, this article will show you how to load all Javascript in WordPress until after the page has finished parsing. In an earlier tutorial, I’d shown you how to correctly load jQuery from a CDN – usually Google. If you’ve read that, then you know that it’s not a good idea to defer jQuery. So we’ll take that into consideration in this tutorial.

“Over Optimization” Is a Thing!

You have to be very careful while optimizing your site. Many pages make use of Javascript in ways that you won’t even notice until it stops working. For example, I use a Table of Contents (TOC) plugin on my site that uses Javascript to parse the headings and display the table. I didn’t even know until I messed something up! Similarly, if you run a script to parse your affiliate links or choose which version of a table to show depending on the screen size, you’re using Javascript.

Normally, all external Javascript files are render-blocking. This means that the browser waits for them to download and execute before the page runs. This slows the page load speed, and the Google gods will frown upon you. That’s why we use the “defer” tag.

But we have to do it carefully.

Why Defer? Why not Async?

You’ve probably heard of “async”, as well as “defer”, and the differences between them can indeed be confusing. But to simplify things, we don’t use “async” for two reasons:

First, contrary to perception, “async” is render-blocking during execution! It’s just that the script is downloaded in parallel. “Async” tells the browser to load the script in parallel, and then execute it whenever it can. And if this execution happens in the middle of parsing, the browser will pause the parsing to execute the Javascript. We don’t want that!

Second, “async” shows no preference as to the order in which the Javascript snippets are executed. This might well break your site (as it did for me). Some pages need the scripts to be executed in a particular order, and async doesn’t respect that.

That’s why we use defer and not async.

Why Not Just Load Javascript in the Footer?

So if “defer” simply waits till the page has rendered before executing Javascript, why not simply move all Javascript files to the footer and be done with it? The reason is that “defer” allows the browser to start downloading the Javascript files as and when it encounters them. So that when page rendering is complete, it can begin execution at once.

Loading all Javascript in the footer alone isn’t smart because the browser will start the download of these files when the page has finished rendering. And if you have a lot of Javascript, this will slow down your site considerably!

So How Do We “Defer” Javascript without Problems?

Open up your functions.php file, or wherever you place your custom PHP code and paste in the following:

Note: If you don’t know how to add PHP code to WordPress, see this tutorial.

function add_defer_to_jquery( $tag, $handle, $src ) {

    if (is_admin())
      return $tag;

    if ( strpos($handle, 'jquery-core') === false ) {
        return str_replace( ' src=', ' defer="defer" src=', $tag );
    }

    return $tag;
}

This code does three things:

1. It does nothing if we’re in an admin page
2. It does nothing for the jQuery tag
3. It defers all other Javascript

And that’s it! As mentioned earlier, it’s best to let jQuery remain render-blocking for your site to function properly. We can defer all other Javascript. That’s why it’s important to load jQuery from a fast CDN.

The solution above is reasonably comprehensive. Which means that it will produce the least number of unexpected results. Of course, your installation might be different, but that’s a special case. In general, this is the solution you want to use.

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!