[WordPress]jQueryにdefer属性を追加する

　WordPressでjQueryにdefer属性を追加しましたので、その防備録です。

defer属性を追加した理由

「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」の解決です。
PageSpeed Insightsで、それをまだ解決できていなかったので、解決のために調べた結果、そうすることに決めました。

bodyの終了タグ付近に書くという解決法もあったんですが、deferは仕様的にscriptタグで記述した順番での読み込みをしてくれるらしいので、ヘッダー部分でdeferで読み込みを明記することにしました。
asyncは読み込みの順番が保障されないようなので却下。

jQueryにdefer属性を追加する方法

トライしてみた結果、私の環境では方法が2通りありましたので、書いておきます。

functions.phpにコードを書く

jqueryにdefer属性を加えるために、functions.phpに書くコードは以下の通りです。

add_filter('script_loader_tag', 'defer_jquery', 10, 2);
function defer_jquery($tag, $handle){
    if('jquery' === $handle){
        return str_replace("type='text/javascript'", 'defer', $tag);
    }
}

　一行目でscript_loader_tagフィルターにdefer_jqueryを追加します。
　これにより、scriptの記述の際に2行目から記述しているdefer_jqueryが実行されるようになりました。
　add_filter関数によって渡される引数を2つにすることで、スクリプトとして記述されるタグに加え、それをWordPressの関数として登録するときに用いられるhandleも取得できるように。
　あとは、$handleが’jquery’であるとき、つまり$tag内にjqueryに対応するタグが入っているときに、str_replace関数を使い、その文字列を置き換えるだけです。

　これでもよかったのですが、なんだかインラインのJavaScriptさんにエラーが出たので、次の方法をためしてみました。

LiteSpeed CacheでjQueryにdeferを適用する

　私の使用しているサーバはLiteSpeedで、LiteSpeed Cacheがこのサイトには入っています。
　jQuery以外のJavaScriptやCSSはこれで最適化していたのですが、jQueryは除外していました。というかjQueryの除外オプションがあったのでそれをオンにしていました。
　しかしまあ、js結合の優先度もONにしているしで、特に読み込む順番が変わるとも思えませんでしたし、ついでにCDNのオプションでjQueryをGoogleのCDNからの配信にしていたので、もしかしたらうまく最適化が適応されるかと思い、オフにしました。
　オフにしたのはダッシュボードからだと、「設定」→「LiteSpeed Cache」もしくは「LiteSpeed Cache」→「設定」で開いた設定画面で、「[5]最適化」のタブを押して一番下辺りを見れば参照できる、「JQueryを除外する」オプションです。
　念のために結合からjQueryのアドレスは除外するようにチューニングタブで設定しておきました。
　これにより、結果的にはうまいことdeferを挿入できました。エラーは相変わらずでますが、普通にjQueryをdeferせずに入れたときと同じエラーだったので、これでよしとしています。

　まとめますと、

• LiteSpeed CacheでJavaScriptの最適化を設定するときに「JQueryを除外する」オプションをはずす

　でどうやらdeferができるみたいです。
　うまくdeferがかからない場合は、CDNタブから、「JQueryをリモート読み込み」オプションを使って、jQueryのCDN配信を利用してみてください。

その他コメントなど

　今回はjQueryにdeferオプションをつける方法を書きました。
　なんとなくですが、PageSpeed Insightsの点数が少しだけ安定したように思います。GtMetrixさんにはまだ叱られるけど…。
　あとついでにscript系のWordPressでの細かい扱いも分かってきたように思います。がんばる。