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

2018年3月30日 2019年1月30日 Wordpress

scriptタグにasync属性を追加することで、非同期で読み込みます。
これにより、WEBサイトのレンダリングブロックを防ぐことができ、表示スピードが速くなるんですね!

ここで紹介するのは、Wordpressで読み込むJSにもasync属性を追加する方法です。

具体例をいくつか調べてみた

フィルターフックで置換する

参考サイト1
【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属性を置換していますね。

 

参考サイト2
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は除外する?

参考サイト1,2では、読み込むjsは全部async属性を追加していますが、これはjquery本体のみ除外する方法を紹介しています。

参考サイト3
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での読み込みに変更しています。
僕もその一人ですw

CDNのjQuery本体にasync属性を追加すると、なぜか正しく動作しなくなりました。
それじゃあアカン!ということで、CDNのjQuery本体をわざわざ除外したんですね(多分)。

結局こうしてみました

試して見た結果、僕はこうアレンジしてみます。
type属性は消したいので参考サイト1,2を流用。
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にすると不具合が出る可能性がある為。

この記事へのコメント

    お気軽にコメントをどうぞ。

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    ウェルスナビで損失?