jQueryの読込にDeferやAsync使ったら動かなくなった
サイトの高速化を行うために読み込むJSを遅延読み込みしようと、あらゆるJSにdeferやasyncを付けていたら、jQueryにDeferを付けた時点でエラーになりアコーデオンメニューとかが動かなくなりました。
<script src='/js/jquery.min.js' defer></script>
そんなときの対処法
jQueryに依存するスクリプトをwindow.onload = function() {...}で囲ってみてください。
<script defer>
window.onload = function() {
スクリプト
}
</script defer>
または、window.addEventListener( 'load', function(){...}, false);で囲ってみてください。
特にChromeは動くけど、EdgeやInternet Explorer(IE)で動かないときはこちらが有効でした。
<script defer>
window.addEventListener( 'load', function(){
スクリプト
}, false);
<script>
のようにスクリプトを囲ってやれば、Deferで読み込んでもスクリプトが動くようになります。詳しくは以下のサイトに詳しく例が書いてありましたので参考にしてみてください。
それでも動かない場合、<script>を<script defer>、<script async>にする必要なときがあります。
参考サイト
Onloadを使って回避する方法もある
以下のページには上記と違う方法で回避する方法もありました。私も使ってみたところうまく回避できました。
<script defer src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" onload="
$(function() {
$('form').submit(function() {
$('form').find(':submit').attr('disabled', 'disabled');
});
});
"></script>
また、指定したJSとCSSをDeferとAsyncを使い分けて読み込むPrefetchLoader.jsというスクリプトの紹介もありましたが、使ってみたところ、はっきりと見た目の表示は速くなりました。
ですが、GTmetrixやPagespeed Insightsなどで測定すると表示の時間は遅くなりました。見た目は速い感じがするんですが不思議です。今回は適用を見送りましたが、気になるのでまた試してみたいと思います。
その他参考サイト
JSをどこで読み込むかで表示スピードが変わる実験結果が書いてありました。ともて興味深いのでメモ。