Async or Defer JavaScript Files in WordPress

There are a lot of articles out there about how to async or defer scripts in WordPress, but they assume you’ll be writing all the code or using one of the bloated plugins to make it happen.

In my case, I just needed the ability to async or defer a few scripts in a custom plugin or theme. Sure, I could add all the filters every time to make that work, but I’m a programmer. Why should I have to constantly write the same code over and over again? Why not create a simple module to handle this for me and allow me to async and defer scripts in a truly WordPress way? So I did just that.

Introducing the WordPress Async/Defer Scripts Module

A Composer library for asynchronously loading or deferring scripts in WordPress. View on GitHub or Packagist.

Requirements

• PHP 5.3+
• WordPress 4.2+

Installation

Add the module to your code base via Composer:

composer require wpscholar/wp-async-defer-scripts

Be sure to require the Composer autoloader in your project:

<?php

require __DIR__ . '/vendor/autoload.php';

Usage

Asynchronously load a script using the wp_scripts()->add_data() method:

<?php

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'recaptcha', 'https://www.google.com/recaptcha/api.js' );
    wp_scripts()->add_data( 'recaptcha', 'async', true );
} );

Defer loading of a script using the wp_scripts()->add_data() method:

<?php

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'recaptcha', 'https://www.google.com/recaptcha/api.js' );
    wp_scripts()->add_data( 'recaptcha', 'defer', true );
} );

Initialization

In most cases, you can simply follow the installation instructions and things will just work. However, if you are including this library outside of a WordPress plugin or theme, you may have to manually initialize the class:

<?php

wpscholar\WordPress\AsyncDeferScripts::initialize();