複数のJSとCSSをまとめて非同期で読み込むJavascriptのメモ

Sat, 09 Feb 2019 20:38:57 +0900

WEBページの表示スピードを高速化させるために、複数のJSやCSSを非同期のAsyncで読み込んだり、Deferで読み込んだりするためのソースをメモ。

JSとCSSを遅延読み込みするスクリプト

jQueryに依存するスクリプトなので、実行するには事前にjQueryを読み込んでおく必要があります。JSとCSSを混在させてURLを指定すればOK。これを～の間に書いて使うものっぽいですが、私は``の直前に書いて使っています。どちらがいいかは好みです。

非同期で使用するなら、jQueryと読み込み順がバラバラになるasyncを使うとうまくいかなくなります。jQueryの後に順番通りに読み込むdeferを使う方がよいです。

<script src="//cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" defer></script>
<script defer>
jQuery(function(){
   //var r=Math.ceil((new Date()*1)*Math.random()); //Zenback用デフォルト
   var r = new Date(); //Zenback用
   var r = ''+r.getFullYear()+('0'+r.getMonth()).slice(-2) ;  //randの値を年月（例 201901）にする
   require_onload( [
       '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css',
       '//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css',
       '//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css',
       '//cdn.jsdelivr.net/npm/purecss@1.0.0/build/tables-min.css',
       '//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/css/slimbox2.css',
       '//cdn.jsdelivr.net/npm/@gerhobbelt/keyscss@1.1.3-6/keys.css',
       '//w.zenback.jp/v1/?base_uri=https%3A//qwerty.work&nsid=1234561665775123456%3A%3A123456466455123456&rand='+r,
       '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
       '//jsoon.digitiminimi.com/js/widgetoon.js'
   ] );
});

function require_onload( arg ) {
   if (is_array(arg)){
       var element = [];
   for(var i=0; i<arg.length; i++){
       if ( arg[i].match(/\.css/) ){ //末尾だけ確認したいときは/\.css$/
           add_child_css(arg[i]);
       }
       else if ( arg[i].match(/\.js|w\.zenback.\jp/) ){ //末尾だけ確認したいときは/\.js$/
           add_child_js(arg[i]);
       }
       else{ alert('check url : ' + arg[i]) }
       }
   }
   else{
       if ( arg.match(/\.css/) ){ //末尾だけ確認したいときは/\.css$/
       add_child_css(arg);
   }
       else if ( arg.match(/\.js|w\.zenback.\jp/) ){//末尾だけ確認したいときは/\.js$/
       add_child_js(arg);
   }
       else{ alert('check url : ' + arg[i]) }
   }
}

function add_child_js(src){
   var element = document.createElement("script");
   element.src = src;
   document.body.appendChild(element);
}

function add_child_css(src){
   var css_element = document.createElement('link');
   css_element.type = 'text/css';
   css_element.rel  = 'stylesheet';
   css_element.href = src;
   document.body.appendChild(css_element);
}

function is_array(obj) {
   return Object.prototype.toString.call(obj) === '[object Array]';
}

参考ページ

https://pgmemo.tokyo/data/archives/517.html https://pgmemo.tokyo/data/archives/517.html

CSSを非同期で読み込むスクリプト例

jQueryに依存していないので、単体で使用できます。下の方のエレメントをいじくればJSやDNS-Prefetchなどに転用可能です。これも～の間に書くか、``の直近や後ろに書くかは好みです。これはjQueryに依存しないので、非同期読込はasync、deferのどちらでも大丈夫です。

<script async>
   window.addEventListener("load",function(){
    const css = [
         "//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css",	
         "//cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreRDark.min.css",
         "//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css",
         "//cdn.jsdelivr.net/npm/purecss@1.0.0/build/tables-min.css",
         "//cdn.jsdelivr.net/npm/@tehnoskarb/slimbox2@2.0.5/css/slimbox2.css",
         "//cdn.jsdelivr.net/npm/@gerhobbelt/keyscss@1.1.3-6/keys.css"
 ];
<br>
 for(i in css){
   let html = document.createElement("link");
   html.rel = "stylesheet";
   html.href = css[i];
   html.async = true;
   document.head.appendChild(html);
   }
});
</script>

DNS-Prefetchを非同期で行うスクリプト例

JSやCSSから横道逸れますが、半角スペースで接続先を指定する例。DNS-Prefetchを非同期で実行するスクリプトですが、エレメントの部分を入れ替えれば、CSSやJSにも使えそうです。jQueryなしで使えます。

<script>
(function(c){var d="//jsoon.digitiminimi.com/js/widgetoon.js //w.zenback.jp/_p/js/jquery.min.js //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js /include/GoogleAnalytics.js".split(" "),a,b,e=c.createDocumentFragment();for(a=d.length-1;0<=a;a--)b=c.createElement("link"),b.setAttribute("rel","prefetch"),b.setAttribute("href",d[a]),b.setAttribute("as","script"),e.appendChild(b);c.getElementsByTagName("head")[0].appendChild(e)
})(document);
</script>

その他参考ページ

https://webkaru.net/jquery-plugin/lazy-script/ https://webkaru.net/jquery-plugin/lazy-script/

https://firstlayout.net/load-css-asynchronously-with-loadcss/ https://firstlayout.net/load-css-asynchronously-with-loadcss/

CSS限定！もっとシンプルな方法

スタイルシート（CSS）限定ですが、Javascript無しのもっとシンプルな方法で非同期読み込みできる方法を見つけましたので参考にメモ。（2020/05/18追記）

https://curio-shiki.com/blog/webpage/what-we-do-for-speed https://curio-shiki.com/blog/webpage/what-we-do-for-speed

https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657 https://qiita.com/rana_kualu/items/95a7adf8420ea2b9f657

上記の参考ページにあったソース例

<link rel="preload" href="/path/to/my.css" as="style">
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

なぜコレが非同期なのかわかりませんし、効果があるのかも謎ですが、今度ためしてみようと思います。

以下にもCSS非同期読み込みについてまとめています。( 2021/12/13追記）

CSSを非同期で読み込むいろいろな方法 - QWERTY.WORK

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

Mon, 28 Jan 2019 23:58:24 +0900

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で読み込んでもスクリプトが動くようになります。詳しくは以下のサイトに詳しく例が書いてありましたので参考にしてみてください。

それでも動かない場合、を、****にする必要なときがあります。

参考サイト

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

https://sakura.monte-verita.biz/3981 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>

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

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

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

その他参考サイト

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

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

Defer on qwerty.work

複数のJSとCSSをまとめて非同期で読み込むJavascriptのメモ

JSとCSSを遅延読み込みするスクリプト

参考ページ

CSSを非同期で読み込むスクリプト例

参考ページ

DeferとAsyncを指定して非同期で読み込むスクリプト

参考ページ

DNS-Prefetchを非同期で行うスクリプト例

その他参考ページ

CSS限定！もっとシンプルな方法

上記の参考ページにあったソース例

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

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

そんなときの対処法

参考サイト

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

その他参考サイト