Async on qwerty.work

複数の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/

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

Thu, 17 Jan 2019 22:17:56 +0900

ソーシャルボタンを自作して表示スピードを高速化

Twitter、Facebook、はてな、Pocketなど公式のボタンを使用するとかなりページを表示するスピードが遅くなるため、先日からページ表示を高速化するためにソーシャルボタンの自作にチャレンジしています。

Wordpressであればプラグインで簡単に高速化できのですが、Wordpressではないページで使用するため、どうしても自作するしか高速化する方法がありません。そこで最近行っている自作チャレンジしているメモのブログが以下なんですが、いろいろな方法を試して徐々にページスピードを上げることができました。

上から、Pocketのストックカウントを取得するだけで約1.4～2秒かかり、公式ボタンより遅くなる。

↓

PHPの関数「cURL」を使用してTwitter、Facebook、はてな、Pocketのカウント数をAPIから同期で取得してボタンを自作して約2秒で表示できた。

↓

PHPのcURLを非同期で実行できるcurl_multiを使用すると同じことを約1.5秒で表示できるようになりました。

でも同期でPHPを読み込むから1.5秒遅くなるということ

自作のSNSボタンのみの表示を約1.5秒まで縮めることができたのですが、このSNSボタンを表示させたいページに埋め込むと、そのページの表示は1.5秒遅くなるということ。curl_multiでAPIの取得は非同期でやっているけど、そのPHPはページから同期で呼び出すためです。これを非同期で呼び出すことができればページ全体の表示を速くできるのではないかと思います。

そこでPHPをJavascriptから呼び出す！

jQueryのAjaxでPHPを非同期で呼び出すことができるそうです。これを使えば、PHP内で各SNSのAPIからカウント数を非同期で取得し、そのPHPをJavascriptから非同期で実行させることがきてダブル非同期。

サーバーサイドのPHPとクライアントサイドのJavascriptで負荷を分散してるので、これで更に**速くなるに違いない！**と想像しています。

そして作ったソース

PHP

PHPではjavascriptのページから$_GETでカウントを取得したいURLを受取り、そのURLを対象に各SNSのAPIからカウント数を取得します。そしてカウント数を組み込んだ自作シャーシャルボタンのHTMLを変数に入れます。ファイル名は仮にget_sns_button.phpとします。

<?php
function num_format($count) {
  //3桁区切りのカンマを削除
  $count = str_replace(',','',$count);
  //数値に変換
  $count = intval($count);
  // カウント数が取得できないときは0にする
  return isset($count) ? intval($count) : 0 ;
}

function fetch_sns_count($targeturl) {
   // 並列通信用マルチハンドルを用意
   $mh = curl_multi_init();

// APIごとにCurl Handleを作る
// Twitter
   $ch_twitter = curl_init("http://jsoon.digitiminimi.com/twitter/count.json?url=$targeturl");
   curl_setopt($ch_twitter, CURLOPT_RETURNTRANSFER, TRUE);
   curl_multi_add_handle($mh, $ch_twitter);
  
// Facebook
   $ch_facebook = curl_init("https://graph.facebook.com/?id=$targeturl");
   curl_setopt($ch_facebook, CURLOPT_RETURNTRANSFER, TRUE);
   curl_multi_add_handle($mh, $ch_facebook);

// Hatena
   $ch_hatena = curl_init("https://b.hatena.ne.jp/entry.count?url=$targeturl");
   curl_setopt($ch_hatena, CURLOPT_RETURNTRANSFER, TRUE);
   curl_multi_add_handle($mh, $ch_hatena);

// Pocket
   $ch_pocket = curl_init("https://widgets.getpocket.com/v1/button?v=1&count=horizontal&url=$targeturl&src=$targeturl");
   curl_setopt($ch_pocket, CURLOPT_RETURNTRANSFER, TRUE);
   curl_multi_add_handle($mh, $ch_pocket);

// 複数の通信を非同期で同時実行
   do { curl_multi_exec($mh, $running); } while ( $running );

// APIから戻ってきた値を変数に入れる
   $json_twitter  = curl_multi_getcontent($ch_twitter);
   $json_facebook = curl_multi_getcontent($ch_facebook);
   $count_hatena = curl_multi_getcontent($ch_hatena);
   $html_pocket = curl_multi_getcontent($ch_pocket);

// cURLハンドルセットを閉じる
   curl_multi_remove_handle($mh, $ch_twitter);
   curl_close($ch_twitter);
   curl_multi_remove_handle($mh, $ch_facebook);
   curl_close($ch_facebook);
   curl_multi_remove_handle($mh, $ch_hatena);
   curl_close($ch_hatena);
   curl_multi_remove_handle($mh, $ch_pocket);
   curl_close($ch_pocket);
   curl_multi_close($mh);

/*デバッグ用
   var_dump($json_twitter);
   var_dump($json_facebook);
   var_dump($count_hatena);
   var_dump($html_pocket);
   */

//Twitterのカウント数を取り出す
   $count_twtter = json_decode($json_twitter, true );
   $count_twtter = num_format(strval($count_twtter['count']));

//facebookのカウント数を取り出す
   $count_facebook = json_decode($json_facebook, true );
   $count_facebook = num_format($count_facebook['share']['share_count']);

//Hatenaのカウント数を取り出す
   $count_hatena = num_format($count_hatena);

//Pocketのカウント数を取り出す
   //HTML→DOM→XML→JSON→配列に変換
   $dom_pocket = new DOMDocument('1.0', 'UTF-8');
   $dom_pocket->preserveWhiteSpace = false;
   $dom_pocket->loadHTML($html_pocket);
   $xmlString_pocket = $dom_pocket->saveXML();
   $xmlObject_pocket = simplexml_load_string($xmlString_pocket);
   $count_pocket = json_decode(json_encode($xmlObject_pocket), true);
   $count_pocket = num_format(strval($count_pocket['body']['div']['a']['span']['em']));

//カウント付ソーシャルボタンのHTML
$res = '<ul class="sns-counter" title="'.$targeturl.'"><!--';
   $res .= '--><li class="btn-tw">';
   $res .= '<a href="//twitter.com/intent/tweet?url='.$targeturl.'" target="_blank">';
   $res .= '<i class="fab fa-twitter"></i><span>'.$count_twtter.'</span>';
   $res .= '</a>';
   $res .= '</li><!--';
   $res .= '--><li class="btn-fb">';
   $res .= '<a href="//www.facebook.com/sharer/sharer.php?u='.$targeturl.'" onclick="window.open(\'https://www.facebook.com/sharer/sharer.php?u='.$targeturl.'\', \'new\', \'width=500,height=300\');return false;" target="_blank">';
   $res .= '<i class="fab fa-facebook-f"></i><span>'.$count_facebook.'</span>';
   $res .= '</a>';
   $res .= '</li><!--';
   $res .= '--><li class="btn-hb">';
   $res .= '<a href="//b.hatena.ne.jp/entry/'.$targeturl.'" target="_blank">';
   $res .= '<i class="fa fa-hatena"></i><span>'.$count_hatena.'</span>';
   $res .= '</a>';
   $res .= '</li><!--';
   $res .= '--><li class="btn-pk">';
   $res .= '<a href="//getpocket.com/edit?url='.$targeturl.'" target="_blank">';
   $res .= '<i class="fab fa-get-pocket"></i><span>'.$count_pocket.'</span>';
   $res .= '</a>';
   $res .= '</li><!--';
   $res .= '--><li class="btn-line">';
   $res .= '<a href="//social-plugins.line.me/lineit/share?url='.$targeturl.'" target="_blank">';
   $res .= '<i class="fab fa-line"></i><span>LINE</span>';
   $res .= '</a>';
   $res .= '</li>';
   $res .= '</ul>';
   return $res;
}

$targeturl = $_GET['targeturl'];
echo fetch_sns_count($targeturl);
?>

Javascript

jQueryのAjaxからPHP（get_sns_button.php）を呼び出し、PHPの変数に入ったソーシャルボタンのHTMLをページ内に展開するページのソースです。

<!DOCTYPE html>
<html lang="ja" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://ajax.cloudflare.com">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<title>無題ドキュメント</title>
<style>
.sns-counter {
 width: 100%;
 }
.sns-counter li {
 display: inline-block;
 border-radius: 2px;
 width: 80px;
 padding: 3px;
 margin-left: 3px;
 }
.sns-counter li span {
 display: inline-block;
 text-align: center;
 width: 70%;
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 }
.sns-counter li i {
 display: inline-block;
   text-align: center;
   width: 30%;
   color: #fff;
   font-size: 14px;
   position: relative;
   top: 1px;
   }
   .sns-counter .btn-tw {
   background-color: #55ACEE;
   }
   .sns-counter .btn-fb {
   background-color: #3A5795;
   }
   .sns-counter .btn-hb {
   background-color: #008CE1;
   }
   .sns-counter .btn-pk {
   background-color: #ef4357;
   }
   .sns-counter .btn-line {
   background-color: #1dcd00;
   }
   .sns-counter .btn-total {
   background-color: #000;
   }
   .btn-hb:hover,.btn-tw:hover,.btn-fb:hover,.btn-pk:hover,.btn-line:hover,.btn-total:hover {
   background-color: #ccc;
   }
   i.fa-hatena:before {
   content: "B!";
   font-family: Verdana;
   font-weight: bold;
   }
   </style>
</head>
<body>
<br>
<br>
<!--↓↓ここにソーシャルボタンが表示される↓↓-->
<div id="sns-counter"></div>

<script>
   window.addEventListener("load",function(){ const css=[ "//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css" ];for(i in css){ let html=document.createElement("link");html.rel="stylesheet";html.href=css[i];async=true;document.head.appendChild(html);}});</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

<!--↓↓ここが非同期でPHPを呼び出す部分↓↓-->
<script type="text/javascript">
   //ポケットのストック数を取得
   function fetch_sns_count(url, selector) {
     var defer = jQuery.Deferred();
   jQuery.ajax({
     url: 'get_sns_button.php?targeturl=<?php echo urlencode("https://".$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>',
     dataType:'text',
   timeout: 10000, //10sec
     }).done(function(res){
       jQuery( selector ).html( res || 0 );
     }).fail(function(){
       jQuery( selector ).html('error;');
   });
}

fetch_sns_count('<?php echo urlencode("https://".$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);?>', '#sns-counter');
</script>
<!--↑↑ここが非同期でPHPを呼び出す部分↑↑-->

</body>
</html>

ん？遅くなった？

なぜか遅くなりました。まだ組み込みたいWEBページに埋め込んでいない状態（ショーシャルボタンしかないページ）ですが平均2.2秒。GTmetrixのWaterfallを見ると、確かに非同期で動作は確認できました。

ちょっと実際のWEBページに組み込んでいろいろなパターンをベンチマークしてみないとわからなくなってきました。

そこで仮のページに埋め込んでベンチマーク

以下の３パターンであるページにソーシャルボタンを仮のダミーページ内に読み込んだ時のスピードをGTmetrixでベンチマークしてみました。

   
  今回のAjaxから非同期でPHPを呼び出した場合
  共有ボタン配信サービスの[AddThis](https://www.addthis.com/jp/)を使った場合
  普通に同期でPHPを実行させた場合




  １回目
  ３．９秒
  ４．９秒
  ５．７秒


  ２回目
  ３．６秒
  ３．７秒
  ４．３秒


  ３回目
  ３．５秒
  ４．３秒
  ４．５秒


  ４回目
  ３．３秒
  ６．１秒
  ４．２秒


  ５回目
  ４．０秒
  ４．４秒
  ４．５秒


  平均
  ３．６６秒
  ４．６８秒
  ４．６４秒

やっぱり速かった！

AjaxからPHPを呼び出す場合、非同期なので他の読み込みをしている間に並行してPHPの実行結果を読み込んでいるので全体的にページの表示スピードが速くなりました。しかも何度ベンチマークしても誤差の範囲が狭く表示時間が安定しています。ばらつきがあるのは多分Adsenseやその他のJavascriptやCDNの読込が原因っぽいです。

AddThisも速いときは速いのですが、遅いときはめっちゃ遅いです。管理が楽なので各SNSのAPIが変更になっても修正に困ることがなさそうなので、メンテナンスのことを考えると多少遅い時があってもアリかなと思いました。GTmetrixのWaterfallのグラフをみるといろんなバックグラウンドでJavascripｔが降ってきているので、そこが不安定な原因かもしれません。

普通に同期でPHPを動かした場合は当然PHPの動作分遅いですね。しかも安定してばらつき無く遅いです。

ということで、予想通りAjaxから非同期でPHPを読み込む方が速いという結論になりました。

もっと速くしようと思ったら、CRONジョブで定期的にカウント数を取得しデータベース化して、キャッシュしておくのがいいかもしれませんが、ちょっと大変そうです。そういうプラグインがWordpressにはあるみたいですが、それはまたいつか試してみようと思います。

参考ページ

https://nelog.jp/fetch-pocket-count-by-ajax https://nelog.jp/fetch-pocket-count-by-ajax

https://php-archive.net/php/ajax-json/ https://php-archive.net/php/ajax-json/

http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/ http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/

https://www.addthis.com/ https://www.addthis.com/

Async on qwerty.work

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

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

参考ページ

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

参考ページ

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

参考ページ

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

その他参考ページ

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

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

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

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

そんなときの対処法

参考サイト

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

その他参考サイト

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

ソーシャルボタンを自作して表示スピードを高速化

でも同期でPHPを読み込むから1.5秒遅くなるということ

そこでPHPをJavascriptから呼び出す！

そして作ったソース

PHP

Javascript

ん？遅くなった？

そこで仮のページに埋め込んでベンチマーク

やっぱり速かった！

参考ページ