WordPressでJSを非同期読み込みするasync属性の追加方法

WEBサイトの表示速度を改善するために、JavaScriptの読み込みを最適化することは非常に重要です。scriptタグにasync属性を追加することで、ファイルを非同期で読み込み、レンダリングをブロックせずに実行することが可能になります。

WordPressでの実装方法

WordPressでは wp_enqueue_script 関数を使用しますが、デフォルトでは async 属性を付与する引数がありません。そのため、script_loader_tag フィルターを使用するのが一般的です。

function add_async_attribute($tag, $handle) {
    if ('your-script-handle' !== $handle) {
        return $tag;
    }
    return str_replace(' src', ' async="async" src', $tag);
}
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);
        

上記のコードを functions.php に追加することで、特定のスクリプトに async 属性を付与することができます。