Async and Defer assets with PHP in WordPress.

So, you’d normally simply add ‘async’ to your script tag, but if you’re enqueuing your scripts correctly via your WordPress functions.php file, you’ll no doubt have realised that there is no parameter to add async when using the WordPress wp_enqueue_script() function.

This is a relatively easy fix.

How do we do it?

First off, you’re going to want to open your functions.php file in your favourite text editor, then we’re going to create our Async function.

Also, notice, we have prefixed our function name to prevent any conflicts with plugins or other functions.

<?php
if ( ! function_exists( 'uncoverwp_async_scripts' ) ) :
    /**
     * Async scripts to improve performance
     */
    function uncoverwp_async_scripts( $url )
    {
        if ( strpos( $url, '#asyncload') === false )
        {
            return $url;
        }
        else if ( is_admin() )
        {
            return str_replace( '?#asyncload', '', $url );
        }
        else
        {
    	    return str_replace( '?#asyncload', '', $url )."' async='async";
        }
    }
    add_filter( 'clean_url', 'uncoverwp_async_scripts', 11, 1 );
endif;

This function is simply looking for the #asyncload string, and, if found, appending async='async' to the URL.

We can use exactly the same code to create a version to Defer instead of Async simply by changing each occurrence of ‘async’ to ‘defer’.

<?php
if ( ! function_exists( 'uncoverwp_defer_scripts' ) ) :
    /**
     * Defer scripts to improve performance
     */
    function uncoverwp_defer_scripts( $url )
    {
        if ( strpos( $url, '#deferload') === false )
        {
            return $url;
        }
        else if ( is_admin() )
        {
            return str_replace( '?#deferload', '', $url );
        }
        else
        {
    	    return str_replace( '?#deferload', '', $url )."' defer='defer";
        }
    }
    add_filter( 'clean_url', 'uncoverwp_defer_scripts', 11, 1 );
endif;

Now you can enqueue your scripts as normal, and simply add the #asyncload, or #deferload string to any script you want to async or defer.

<?php
// Enqueue scripts
function uncoverwp_scripts()
{
    // async assets
    wp_enqueue_script( 'uncoverwp-plugins', get_template_directory_uri() . '/assets/js/plugins.min.js#asyncload', 'jquery', '', true );
    wp_enqueue_script( 'uncoverwp-application', get_template_directory_uri() . '/assets/js/application.min.js#asyncload', 'jquery', '', true );
    
    // defer assets
    wp_enqueue_script( 'uncoverwp-plugins', get_template_directory_uri() . '/assets/js/plugins.min.js#deferload', 'jquery', '', true );
    wp_enqueue_script( 'uncoverwp-application', get_template_directory_uri() . '/assets/js/application.min.js#deferload', 'jquery', '', true );
}
add_action( 'wp_enqueue_scripts', 'uncoverwp_scripts');

Conclusion.

So there you have it, a simple fix to correctly enqueue WordPress scripts with Async or Defer in order conform with Google PageSpeed Insights and improve your sites performance.