wp_enqueue_scrpts の読み込みをすべて defer にする

最近のブラウザで js を読み込む場合、 async defer を付与して、
dom パースを邪魔しない事が求められていますが、
WordPress の js 読み込み関数である、 wp_enqueue_scripts では、まだサポートされていません。
それを強制的につけるコードです。

なお、コード自体は、 WordCamp Osaka 2019 で講演された kite さんの、
以下スライドを元にしています。
若干の改変です。
WordPress でも大丈夫！実例で見るウェブパフォーマンス改善 65ページ目

functions.php

add_filter( ‘script_loader_tag’, function ($tag, $handle) {
     if( is_admin()) return $tag; 
     if( !preg_match( ‘/¥b(async|defer)¥b/‘, $tag ) ) {
         return str_replace( ‘ src’, ‘ defer src’, $tag );
     }
     return $tag;
} , 10, 2 );

remove_action を考慮しなくて良いので、無名関数にする方が利便性あるかなと思い、改変しています。

こんな感じで defer が付与されます。