jQuery.jsの読み込みにDeferやAsyncを使ったらエラーでスクリプトが動かないとき

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>にする必要なときがあります。

参考サイト

Link

Defer属性で読み込んだjqueryプラグインの関数をインラインで呼び出す際の注意点 | 野良人（のらんど）

https://norando.net/jqueryplugin-and-defer/

Link

【javascript】jquery本体をdeferで読み込みつつ、インラインのjQueryを、本体の読み込み後に処理実行する方法【js】 | Sakura*sakura

https://sakura.monte-verita.biz/3981

Onloadを使って回避する方法もある

以下のページには上記と違う方法で回避する方法もありました。私も使ってみたところうまく回避できました。

<script defer src="//cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" onload="
        $(function() {
            $('form').submit(function() {
                $('form').find(':submit').attr('disabled', 'disabled');
            });
        });
    "></script>

Link

Pagespeed Insightsで100点を取るためにやったこと #javascript - Qiita

https://qiita.com/suzunone/items/55277b99893b2a6cf353

また、指定したJSとCSSをDeferとAsyncを使い分けて読み込むPrefetchLoader.jsというスクリプトの紹介もありましたが、使ってみたところ、はっきりと見た目の表示は速くなりました。

ですが、GTmetrixやPagespeed Insightsなどで測定すると表示の時間は遅くなりました。見た目は速い感じがするんですが不思議です。今回は適用を見送りましたが、気になるのでまた試してみたいと思います。

その他参考サイト

JSをどこで読み込むかで表示スピードが変わる実験結果が書いてありました。ともて興味深いのでメモ。

Link

500 エラー : @niftyホームページサービス

http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/