更新停止中のAsync JavaScriptは使わない方がいい

表示に不具合が起きる

Async JavaScriptとは？

Async JavaScriptはJSにAsyncやDeferを付加して非同期や遅延を行うWPプラグインです。LCP改善のためよく利用されますが、気付けばもう三年も更新されてません。今後も更新される事はなさそうです。

その間にWordPress本体は何度も更新されてるので、うまく動かない可能性があります。現状で問題なく動けばいいのですが、ウチではCocoonで指定したNO IMAGE画像が表示されないトラブルが起きました。

functions.phpをイジればこのプラグインと同じ事が出来ます。三年も放置されてるプラグインを使うより、この方がトラブルが少ないです。

Async/Deferを付加する方法

以下のコードをfunctions.phpに追加します。下はAsyncの場合ですが、Deferにしたい場合は赤字の部分をdeferに書き換えます。

引用元のコードは2024年のものですが、問題なく動くようです。WPプラグインでは表示されなかったNO IMAGE画像も問題なく表示されました。

function theme_enqueue_scripts() {
    wp_enqueue_script(
        'theme-script',
        get_template_directory_uri() . '/js/script.js',
        [],
        null,
        [
            'strategy' => 'async',
            'in_footer' => false,
        ]
    );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

AsyncとDeferの違い

AsyncとDefer、どちらがいいのか迷うと思いますが、Asyncの方が効果があります。Asyncで何か問題が生じるようならDeferにするといいです。

二つの違いですが、随時実行されるのがAsync、順番通りに実行するのがDeferと理解しておけばいいかと。Asyncは処理を待たないので速い。Deferは順次実行されるので不具合が少ないです。

参考