javascript - Automatically Add Defer or ASYNC to all JS files (no matter where they are located)

admin管理员组

文章数量:1291138

I'm looking for a way to automatically add defer to all JS files on my server. While I found a way that seem to be working, I am not sure if this is the best way / best practice 2021 for WordPress?

I am running a test environment on XAMPP with PHP 7.4.x and the latest WordPress (5.7.2). I have debug turned on in wp-config and while I am not receiving any errors or notices, I am again, not sure this is the best way / best practice to do this.

Can someone please review and advise?

I am using this code:

add_filter( 'clean_url', 'auto_defer_all_js_and_jquery', 11, 1 );
function auto_defer_all_js_and_jquery( $url ) {

    if ( false === strpos($url, '.js') ) {

        return $url;
    }

    if ( !false === strpos($url, '.js') ) {

        return "$url' defer='defer";
    }
}

I'm looking for a way to automatically add defer to all JS files on my server. While I found a way that seem to be working, I am not sure if this is the best way / best practice 2021 for WordPress?

I am running a test environment on XAMPP with PHP 7.4.x and the latest WordPress (5.7.2). I have debug turned on in wp-config and while I am not receiving any errors or notices, I am again, not sure this is the best way / best practice to do this.

Can someone please review and advise?

I am using this code:

add_filter( 'clean_url', 'auto_defer_all_js_and_jquery', 11, 1 );
function auto_defer_all_js_and_jquery( $url ) {

    if ( false === strpos($url, '.js') ) {

        return $url;
    }

    if ( !false === strpos($url, '.js') ) {

        return "$url' defer='defer";
    }
}

• javascript

Share Improve this question edited Jun 12, 2021 at 9:58 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Jun 12, 2021 at 7:28 Harold AldersenHarold Aldersen 2788 bronze badges 2

• 1 If you have scripts that depend on other scripts, like jQuery, and they’re not built to handle loading asynchronously, you’re likely going to break a lot of things. If adding async was a magic bullet for solving performance without breaking anything then the browser would do it automatically. – Jacob Peattie Commented Jun 12, 2021 at 7:49
• Okay, good point. So you're saying that adding an array of exceptions would be the best way forward? Could you please elaborate on the hook used and if that's the way to go? – Harold Aldersen Commented Jun 12, 2021 at 8:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Here's a solution to your question. This doesn't take into account the merit of whether or not you should add async or defer to certain assets, it just gives you the tools to do it yourself, or not.

Points to note:

• this is only for use with Javascript includes (obviously)
• It's not 100% accurate because of the method of replacing the tag text, but for 99.9% of the javascript includes you'll have, it'll do the job the fine.
• there is the option to specify which includes should have the async and defer tags, simply add the handles of the assets you want to apply it to. I've included JQuery for starters.
• this code add both defer="defer" and async. Simply delete either of the appropriate if blocks if that's not what you want.

function add_async_to_js( $includeTag, $handle ) {

    $handlesToChange = [
        'jquery'
    ];

    if ( in_array( $handle, $handlesToChange ) ) {
        if ( strpos( $includeTag, ' defer=' ) === false ) {
            $includeTag = str_replace( ' src=', ' defer="defer" src=', $includeTag );
        }
        if ( strpos( $includeTag, ' async' ) === false ) {
            $includeTag = str_replace( ' src=', ' async src=', $includeTag );
        }
    }
    return $includeTag;
}

add_filter( 'script_loader_tag', 'add_async_to_js', 10, 2 );

本文标签： javascriptAutomatically Add Defer or ASYNC to all JS files (no matter where they are located)