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

目次

jQueryの読込にDeferやAsync使ったら動かなくなった

サイトの高速化を行うために読み込むJSを遅延読み込みしようと、あらゆるJSにdeferasyncを付けていたら、jQueryDeferを付けた時点でエラーになりアコーデオンメニューとかが動かなくなりました。

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

参考サイト

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

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

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というスクリプトの紹介もありましたが、使ってみたところ、はっきりと見た目の表示は速くなりました。

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

その他参考サイト

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

scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…

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

前へ

jQueryのAjaxからカウント数付のソーシャルボタンを出力するPHPを非同期で実行する

次へ

サイト表示の高速化にDNS-Prefetch,Preconnect,Prefetch,Prerender,Preloadを試す