非同期 on qwerty.work

CSSを非同期で読み込むいろいろな方法

Mon, 13 Dec 2021 11:20:48 +0900

CSSを非同期で読み込んで高速化

Lighthouseのパフォーマンススコアの**「レンダリングをブロックするリソースを排除する」**に対応するための対策方法をメモ。

media=“print” onload=“this.media=‘all’“をつける方法

もっとも簡単な方法です。

<link rel="stylesheet" href="/path/to/my.css" />

これに、media="print" onload="this.media='all'"を加えて以下のようにします。

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

Preloadを併用する方法

Preloadは対応していないブラウザがあるので、併用が必要。

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

Javascriptを使用する方法

// make a stylesheet link
  var myCSS = document.createElement( "link" );
  myCSS.rel = "stylesheet";
  myCSS.href = "mystyles.css";
// insert it at the end of the head in a legacy-friendly manner
  document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

または、

<script type="text/javascript">
  var delaycss = document.createElement('link');
  delaycss.rel = 'stylesheet';
  delaycss.href = '/path/to/delaystyle.css';
  document.head.appendChild(delaycss);
</script>

loadCSS.jsを使う方法

大抵のブラウザで使えるらしい。

<link rel="preload" href="index.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="index.css”></noscript>
<script src="loadCSS.js"></script>
<script>
  loadCSS( "path/to/mystylesheet.css" );
</script>

以下を参考にする。

https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/#loadcss%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9 https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/#loadcss%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9

https://github.com/filamentgroup/loadCSS https://github.com/filamentgroup/loadCSS

jQueryでCSSを遅延読み込みする方法

<link id="lazyCss" href="lazy.css" rel="subresource">
<script>
$(function(){
  // CSS遅延読み込み
  $('#lazyCss').attr('rel', 'stylesheet');
});
</script>

以下では複数のCSSとJSをまとめて非同期で読み込むスクリプト例を掲載しています。

気になること

CSSを非同期で読み込んでも、そのCCSに実際には使用しないスタイルが含まれていることがあります。その場合、Lighthouseの「未使用のCSSを減らす」に警告が残ります。これを防ぐためには、不要なスタイルを削除したり、分割したりする必要がありますが、それに手間をかけれないので、これは放置するしかないでしょう。

参考サイト

https://www.filamentgroup.com/lab/async-css.html https://www.filamentgroup.com/lab/async-css.html

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

https://neco913.kirara.st/post-7832/ https://neco913.kirara.st/post-7832/

https://www.nishishi.com/css/css-file-delay-load.html https://www.nishishi.com/css/css-file-delay-load.html

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery?hl=ja

https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/ https://tech.airis0.com/blog/seo-measures5-css-asynchronous-loading/

http://www.02320.net/link-rel-subresource-and-lazy-load/ http://www.02320.net/link-rel-subresource-and-lazy-load/

PHPのincludeをLazy Includeで簡単に非同期化して高速化！

Wed, 17 Nov 2021 20:37:07 +0900

PHPのincludeを非同期で読込たい

WEBページの表示を高速化するために非同期でincludeできないかな？と思うことがありますが、その方法がありましたのでメモ。

参考サイト

https://qiita.com/miyanaga/items/5b81ca07aec54831a512 https://qiita.com/miyanaga/items/5b81ca07aec54831a512

Lazy Include

https://github.com/miyanaga/php-lazy-include https://github.com/miyanaga/php-lazy-include

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

PHPのcurl_multiを使って非同期でカウント数を取得するSNSのシェアボタンを自作してみた

Mon, 14 Jan 2019 13:14:21 +0900

先日、CURLというPHPの関数を使ってシェアカウント付のSNSボタンを自作しましたが、スピードがいまいちだったので、他に高速表示できる方法がないか探してみたところ、cURL関数に非同期で値を取得できるcurl_multiという関数があることを知りました。これを使えば複数のcURLハンドルを非同期で実行できるようです。

こんなSNSをボタンを作る

前回、CURLで自作したSNSボタンと同じボタンをcurl_multiを使って作ります。

これを表示するソース

<?php
//カウント数を取得したい対象URL
$targeturl = 'https://www.apple.com/jp/';
$targeturl = urlencode($targeturl);

//現在のページで取得したいとき
//$url = 'https://'.$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];

// 並列通信用マルチハンドルを用
$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)."\n";
var_dump($json_facebook)."\n"
var_dump($count_hatena)."\n";
var_dump($html_pocket)."\n";
*/

//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']))
?>

<!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"><br>  <meta http-equiv="x-dns-prefetch-control" content="on"><br>  <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<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>
<div>
<ul class="sns-counter" title="<?php echo $targeturl; ?>"><!--
  --><li class="btn-tw">
  <a href="//twitter.com/intent/tweet?url=<?php echo $targeturl; ?>" target="_blank">
  <i class="fab fa-twitter"></i><span><?php echo $count_twtter; ?></span>
  </a><br>  </li><!--
  --><li class="btn-fb">
  <a href="//www.facebook.com/sharer/sharer.php?u=<?php echo $targeturl; ?>" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=<?php echo $targeturl; ?>', 'new', 'width=500,height=300');return false;" target="_blank">
  <i class="fab fa-facebook-f"></i><span><?php echo $count_facebook; ?></span>
  </a>
  </li><!--
  --><li class="btn-hb">
  <a href="//b.hatena.ne.jp/entry/<?php echo $targeturl; ?>" target="_blank">
  <i class="fa fa-hatena"></i><span><?php echo $count_hatena; ?></span>
  </a>
  </li><!--
  --><li class="btn-pk">
  <a href="//getpocket.com/edit?url=<?php echo $targeturl; ?>" target="_blank">
  <i class="fab fa-get-pocket"></i><span><?php echo $count_pocket; ?></span>
  </a>
  </li><!--
  --><li class="btn-line">
  <a href="//social-plugins.line.me/lineit/share?url=<?php echo $targeturl; ?>" target="_blank">
  <i class="fab fa-line"></i><span>LINE</span>
  </a>
  </li>
</ul>
</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];
   html.async=true;document.head.appendChild(html);
  }
});
</script>
</body>
</html>

たった0.5秒だけど速い！

前回は平均2秒だったのが今回1.5秒になりました。

期待していたのは1秒以下だったのですが、curl_multiを使った効果はありました。非同期なのはAPIから結果を取得しに行く部分で、表示は非同期ではありません。よってブログのページにこのボタンを埋め込むとこの1.5秒分ほどページ全体の表示を遅くさせる可能性があります。それでも純正のシェアボタンを使うよりは速いと思います。

表示も非同期にしたいときはPHPでカウント数を呼び出す部分をJavascriptから実行させることができれば可能かもしれません。jQueryでできるらしいので今度試してみたいと思います。

2019/01/17追記

jQueryから非同期でPHPを実行する方法をやってみました。

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

参考サイト

http://php.net/manual/ja/ref.curl.php http://php.net/manual/ja/ref.curl.php

http://asklife.info/archives/3335 http://asklife.info/archives/3335

https://minory.org/php-curl_multi.html https://minory.org/php-curl_multi.html

https://techblog.yahoo.co.jp/architecture/api1_curl_multi/ https://techblog.yahoo.co.jp/architecture/api1_curl_multi/

非同期 on qwerty.work

CSSを非同期で読み込むいろいろな方法

CSSを非同期で読み込んで高速化

media=“print” onload=“this.media=‘all’“をつける方法

Preloadを併用する方法

Javascriptを使用する方法

loadCSS.jsを使う方法

jQueryでCSSを遅延読み込みする方法

気になること

参考サイト

PHPのincludeをLazy Includeで簡単に非同期化して高速化！

PHPのincludeを非同期で読込たい

参考サイト

Lazy Include

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

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

参考ページ

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

参考ページ

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

参考ページ

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

その他参考ページ

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

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

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

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

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

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

そして作ったソース

PHP

Javascript

ん？遅くなった？

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

やっぱり速かった！

参考ページ

PHPのcurl_multiを使って非同期でカウント数を取得するSNSのシェアボタンを自作してみた

こんなSNSをボタンを作る

これを表示するソース

たった0.5秒だけど速い！

2019/01/17追記

参考サイト