• 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
    • WordPress Hosting
    • WooCommerce Hosting
    • Enterprise Hosting
  • VPS
    • VPS Hosting
    • Flex VPS
  • Reseller
  • Email
  • Gaming
  • Domains
  • Website Builder
  • Account
  • Blog Home
  • Categories
  • Authors

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

Bhagwad Park

Published on: December 3, 2018

Categories: WordPress 3

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 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

What Is The WordPress .htaccess File?

In this post, we'll take a closer look at the .htaccess file. Then, we'll show you how to locate and edit the file.

How To Back Up Your WordPress Site (And Why You Should Do It Today)

In this post, we’ll take a closer look at why backups matter. We’ll also show you different ways to back up your WordPress website.

How To Change The WordPress Featured Image Size (3 Ways)

In this post, we'll take a closer look at featured images in WordPress. We'll show you how to set them in your posts and pages and more!

How to Edit the Footer in WordPress (5 Ways)

We’ll discuss key elements to feature in the WordPress footer. Then, we’ll look at five different ways to edit the footer in WordPress.

Reader Interactions

Comments

  1. VannDigital says

    January 15, 2020 at 12:08 am

    This is the best defer Javascript guide that we’ve come across so far. Thanks for this!!!

    Reply
    • Bhagwad Park says

      January 15, 2020 at 11:26 am

      You’re welcome! I use this myself on my website 🙂

      Reply
  2. Cesar Lopez says

    November 20, 2020 at 7:53 am

    What hook do you use to add the refer tag?

    Reply

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 (2024)

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
  • Flex VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Email Hosting
  • Game Hosting
  • Domains
  • Website Builder
Help & Support
  • NameHero Blog
  • NameHero Gaming Blog
  • Support
  • Help Center
  • Migrations
  • Affiliates
  • Gaming Affiliates
  • Call 1-855-984-6263
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

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

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