Add async and defer to Specific Scripts

By default, when a browser encounters a <script> tag it stops parsing the HTML document, fetches the script, executes it, and only then resumes parsing. This is render-blocking behaviour, it directly delays how quickly the page becomes visible. For third-party scripts like analytics, tag managers, chat widgets, and marketing tools that don’t need to execute before the page content is painted, this blocking behaviour is completely unnecessary and measurably harms performance.

The async and defer attributes tell the browser to download the script in parallel with HTML parsing, but with different execution timing. This snippet applies those attributes to specific scripts by their WordPress handle without touching how they’re enqueued.

The Code

Add this to your functions.php or a site-specific plugin. The script_loader_tag filter fires once per enqueued script and receives the full HTML script tag, the WordPress handle, and the source URL. The snippet checks whether the handle is in either list and adds the appropriate attribute if so.

async vs defer, The Difference

async downloads the script in parallel and executes it as soon as it’s downloaded, immediately interrupting HTML parsing if necessary. Scripts with async have no guaranteed execution order relative to each other or the DOM. Use async for fully independent scripts that don’t depend on the DOM or other scripts, standalone analytics pixels are the primary use case.

defer downloads the script in parallel but delays execution until after the HTML document has been fully parsed, just before the DOMContentLoaded event fires. Deferred scripts execute in the order they appear in the document. Use defer for scripts that need the DOM to be available but don’t need to block page rendering, tag managers, chat widgets, and marketing tools all qualify.

Finding the Right Handles

The handle is the first argument passed to wp_enqueue_script() when the script is registered. For scripts enqueued by plugins, you can find the handle by viewing source on a page and looking at the script tag’s id attribute, WordPress sets the ID to {handle}-js. For example, a script with ID google-tag-manager-js has the handle google-tag-manager.

jQuery and Dependent Scripts

Never add async or defer to jQuery or any script that other scripts depend on. If jQuery loads asynchronously and a dependent plugin script executes before jQuery is ready, you’ll get JavaScript errors. The async and defer attributes are appropriate only for scripts with no dependents, scripts at the end of the dependency chain. Check wp_scripts()->registered['handle']->deps to verify a script has no dependents before adding either attribute.

WordPress 6.3 Script Strategy

WordPress 6.3 introduced a native strategy argument to wp_enqueue_script() that handles async and defer without a filter. If you’re enqueuing your own scripts, use wp_enqueue_script( 'handle', $src, [], $ver, [ 'strategy' => 'defer' ] ) instead of this filter. The filter approach remains the best solution for modifying scripts enqueued by third-party plugins where you can’t modify the enqueue call itself.

functions.php

add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {
    // Scripts to load with defer
    $defer_handles = [
        'google-tag-manager',
        'hotjar',
        'intercom',
    ];

    // Scripts to load with async
    $async_handles = [
        'google-analytics',
    ];

    if ( in_array( $handle, $defer_handles, true ) ) {
        return str_replace( ' src=', ' defer src=', $tag );
    }

    if ( in_array( $handle, $async_handles, true ) ) {
        return str_replace( ' src=', ' async src=', $tag );
    }

    return $tag;
}, 10, 3 );