2019/01/20jQueryのAjaxからカウント数付のソーシャルボタンを出力するPHPを非同期で実行するJavascriptPHPSNSjQuery目次ソーシャルボタンを自作して表示スピードを高速化Twitter、Facebook、はてな、Pocketなど公式のボタンを使用するとかなりページを表示するスピードが遅くなるため、先日からページ表示を高速化するためにソーシャルボタンの自作にチャレンジしています。Wordpressであればプラグインで簡単に高速化できのですが、Wordpressではないページで使用するため、どうしても自作するしか高速化する方法がありません。そこで最近行っている自作チャレンジしているメモのブログが以下なんですが、いろいろな方法を試して徐々にページスピードを上げることができました。PHPでPocketの公式ボタンからストックされたカウント数だけを取得するPHPでカウント付のSNSシェアボタンを自作してみたPHPのcurl_multiを使って非同期でカウント数を取得するSNSのシェアボタンを自作してみた上から、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で負荷を分散してるので、これで更に速くなるに違いない!と想像しています。作ったソースPHPPHPではjavascriptのページから$_GETでカウントを取得したいURLを受取り、そのURLを対象に各SNSのAPIからカウント数を取得します。カウント数を組み込んだ自作シャーシャルボタンのHTMLを変数に入れます。ファイル名は仮にget_sns_button.phpとします。?>JavascriptjQueryのAjaxからPHP(get_sns_button.php)を呼び出し、PHPの変数に入ったソーシャルボタンのHTMLをページ内に展開するページのソースです。</script><!--↑↑ここが非同期でPHPを呼び出す部分↑↑--></body></html>ん?遅くなった?なぜか遅くなりました。組み込みたいWEBページに埋め込んでいない状態(ショーシャルボタンしかないページ)ですが平均2.2秒。GTmetrixのWaterfallを見ると、確かに非同期で動作は確認できました。実際のWEBページに組み込んでいろいろなパターンをベンチマークしてみないとわからなくなってきました。そこで仮のページに埋め込んでベンチマーク以下の3パターンであるページにソーシャルボタンを仮のダミーページ内に読み込んだ時のスピードをGTmetrixでベンチマークしてみました。4.64秒やっぱり速かった!AjaxからPHPを呼び出す場合、非同期なので他の読み込みをしている間に並行してPHPの実行結果を読み込んでいるので全体的にページの表示スピードが速くなりました。何度ベンチマークしても誤差の範囲が狭く表示時間が安定しています。ばらつきがあるのは多分Adsenseやその他のJavascriptやCDNの読込が原因っぽいです。AddThisも速いときは速いのですが、遅いときはめっちゃ遅いです。管理が楽なので各SNSのAPIが変更になっても修正に困ることがなさそうなので、メンテナンスのことを考えると多少遅い時があってもアリかなと思いました。GTmetrixのWaterfallのグラフをみるといろんなバックグラウンドでJavascriptが降ってきているので、そこが不安定な原因かもしれません。普通に同期でPHPを動かした場合は当然PHPの動作分遅いですね。安定してばらつき無く遅いです。いうことで、予想通りAjaxから非同期でPHPを読み込む方が速いという結論になりました。速くしようと思ったら、CRONジョブで定期的にカウント数を取得しデータベース化して、キャッシュしておくのがいいかもしれませんが、ちょっと大変そうです。いうプラグインがWordpressにはあるみたいですが、それはまたいつか試してみようと思います。(30)このサイトについてパソコンのことをいろいろメモしています。InsightsQwerty.Workについてこのブログは個人が運営しているサイトです。Qwerty.Work。