WordPressでJSを非同期読み込みするasync属性の追加方法
scriptタグにasync属性を追加することで、非同期で読み込みます。
これにより、WEBサイトのレンダリングブロックを防ぐことができ、表示スピードが速くなるんですね！
ここで紹介するのは、Wordpressで読み込むJSにもasync属性を追加する方法です。
具体例をいくつか調べてみた
フィルターフックで置換する
参考サイト１
【WordPress】スクリプトを読み込むときに自動で挿入される［type属性］を削除する
function remove_script_type($tag) {
return str_replace("type='text/javascript'", "async='async'", $tag);
}
add_filter('script_loader_tag','remove_script_type');
HTML5ではtype属性は省略可能になりました。
Wordpressには未だにデフォルトで「type=’text/javascript」が記述されています（いつかは標準でなくなってるかも）。
その為、この記事ではフィルターフックでの削除を試みています。
type属性とasync属性を置換していますね。
参考サイト２
WordPressのscript_loader_tagを使ってscriptタグをすっきりする
function replace_script_tag ( $tag ) {
return str_replace( "type='text/javascript'", 'async', $tag );
}
add_filter( 'script_loader_tag', 'replace_script_tag' );
ほぼ同じですが、async属性も省略形で記述しています。
jquery.min.jsは除外する？
参考サイト１，２では、読み込むjsは全部async属性を追加していますが、これはjquery本体のみ除外する方法を紹介しています。
参考サイト３
WordPressでscript要素をまるっとサクッと非同期化する方法
if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.min.js' ) ) return $url;
return "$url' async charset='UTF-8";
}
add_filter( 'clean_url', 'add_async_to_enqueue_script', 11, 1 );
}
4行目でjquery.min.jsを意図的に除外しています。
type属性の削除は行わず、URLの後ろにasync charset=’UTF-8″を付け足すやり方です。
何故、jquery.min.jsを外すのか、色々試してみたのですが多分こんな理由です（多分）。
CDNでjqueryを読み込んでいる場合、async属性を付けると正しく動かないから。
デフォルトのjQuery本体をCDNに変更するフックは下記のソース。
function add_scripts() {
wp_deregister_script('jquery'); // WordPress本体のjquery.jsを読み込まない
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', false, "2.1.4", true );
}
add_action('wp_enqueue_scripts', 'add_scripts');
WordPressのデフォルトjQueryが嫌いな人も多く（多分）、このフックでjQuery本体をCDNでの読み込みに変更しています。
僕もその一人ですｗ
CDNのjQuery本体にasync属性を追加すると、なぜか正しく動作しなくなりました。
それじゃあアカン！ということで、CDNのjQuery本体をわざわざ除外したんですね（多分）。
結局こうしてみました
試して見た結果、僕はこうアレンジしてみます。
type属性は消したいので参考サイト１，２を流用。
jQuery本体はCDNで読み込みたいので、async属性はつけません。
if(!is_admin()){
function replace_script_tag ( $tag ) {
if ( strpos( $tag, 'jquery.min.js' ) ) {
return str_replace( "type='text/javascript' ", '', $tag );
}
return str_replace( "type='text/javascript'", 'async', $tag );
}
add_filter( 'script_loader_tag', 'replace_script_tag' );
}
これで問題なく動きました。
JSのtype属性をasync属性に変換できました。
追記：if(!is_admin())を追加しました。
管理画面内までJSをasyncにすると不具合が出る可能性がある為。
