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

公開日: 2018年3月30日 最終更新日: 2018年4月4日

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

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

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

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

参考サイト1
【WordPress】スクリプトを読み込むときに自動で挿入される[type属性]を削除する

HTML5ではtype属性は省略可能になりました。
Wordpressには未だにデフォルトで「type=’text/javascript」が記述されています(いつかは標準でなくなってるかも)。
その為、この記事ではフィルターフックでの削除を試みています。

type属性とasync属性を置換していますね。

 

参考サイト2
WordPressのscript_loader_tagを使ってscriptタグをすっきりする

ほぼ同じですが、async属性も省略形で記述しています。

jquery.min.jsは除外する?

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

参考サイト3
WordPressでscript要素をまるっとサクッと非同期化する方法

4行目でjquery.min.jsを意図的に除外しています。
type属性の削除は行わず、URLの後ろにasync charset=’UTF-8″を付け足すやり方です。

 

何故、jquery.min.jsを外すのか、色々試してみたのですが多分こんな理由です(多分)。

CDNでjqueryを読み込んでいる場合、async属性を付けると正しく動かないから。

デフォルトのjQuery本体をCDNに変更するフックは下記のソース。

WordpressのデフォルトjQueryが嫌いな人も多く(多分)、このフックでjQuery本体をCDNでの読み込みに変更しています。
僕もその一人ですw

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

結局こうしてみました

試して見た結果、僕はこうアレンジしてみます。
type属性は消したいので参考サイト1,2を流用。
jQuery本体はCDNで読み込みたいので、async属性はつけません。

これで問題なく動きました。
JSのtype属性をasync属性に変換できました。

追記if(!is_admin())を追加しました。
管理画面内までJSをasyncにすると不具合が出る可能性がある為。