久しぶりのWordpress高速化記事です。@web_shufuです。今回はソーシャルボタンの１つであるface book likeboxを、なるべく高速化の足を引っ張らずに再設置しました。-3ポイントなら上出来と思っています。
facebook like boxとは
個別投稿や記事に対してではなく、ブログやサイトのfacebookページに対してダイレクトで「いいね」を送ってくれるウィジェットです。
「いいね」してくれた人の顔が並んでいるこんなタイプがおなじみではないでしょうか。
顔写真抜きのシンプルなタイプもあります。
これを設置すると以下のような利点があります。
- ブログ訪問者にFacebookページの存在を告知でき、スムーズな誘導ができる。
- Facebookページへの「イイね！」を促す格好のCall to action
- 「いいね」してくれた人のウォールにFacebookページの更新情報が流れるようになる
つまり、記事が人目に触れるための手段を、新たに１つ手に入れることになるのです。
しかしご多分に漏れず重いです。特に顔が並ぶほうが…。
高速化の観点からface book likeboxを外した
以前に「【WordPress高速化日記】ソーシャルボタン（SNS用シェアボタン）を自作・設置すると効果的」という記事を書きました。
このとき公式のソーシャルボタンを自作のものに置き換えて軽量化しました。
- 公式「いいね」ボタン⇒自作「シェア」ボタン
- 公式Tweetボタン⇒自作Tweetボタン
- 公式+1ボタン⇒自作+1ボタン
- 公式はてブボタン⇒自作はてブボタン
face book likeboxは自作できなかったのでどうしようか迷いました。
しかし高速化の観点から外してみました。
副作用：「いいね」の伸びがピタリと止まる。
外したらFacebookページへの「いいね」の伸びがピタリと止まりました。
当ブログでは、2013年の年頭にface book likeboxを設置し、2013年11月の頭には「いいね」数が180になりました。
単純計算で2日に1つのペースで「いいね」を獲得していたわけです。
ところが、2013年11月末時点における当サイトFacebookページへの「いいね」数は182。
30日間で2つという大失速。
Facebookページへの「いいね」は、記事下のface book likebox経由のものが最も多かったのでこれは当然です。
妥協策として顔写真無しのlikeboxを設置
そこでlikeboxを復活させることにしました。
しかし、以前使っていた顔が並んでいるタイプは、画像が多いためか激重です。
シンプルなタイプを使うことにしました。
Like Box – Facebook開発者に行って、FacebookページURLを入力して全てのチェックを外します。
Get codeを押すとコードが出てくるので指示通りにWordpressのテーマに貼り付けます。
私は、個別記事の直下と、再度バーの著者紹介のところに、likeboxを貼り付けました。
javascriptは非同期化
これで問題なくlikeboxが表示されるのですが、高速化をテーマにしているのでもう一工夫します。
それがjavascriptの非同期化。
Get codeで表示されたjavascriptのjs.id = id;の後ろに、js.async = true;を置いて非同期化します。
こんな感じです。
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async = true;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=148842531955215";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
理屈の上では多少とも高速化に資するはず。
結果PC、モバイルとも3ポイントダウン
このように無い知恵を絞って、サイトが遅くならないよう手を打ったうえでlikeboxを再設置しました。
いつも通り「Krad XinによるロリポップWordpressサイト大量ハッキングまとめ」のスピードをGoogleページスピードインサイトで測ったら、PC88、モバイル76となりました。
likebox再設置前のスコアはモバイル79、PC91でした。（以下の記事参照）
- 【WordPress高速化日記】ソーシャルボタン（SNS用シェアボタン）を自作・設置すると効果的
- 【Wordpress高速化日記】プラグインやテーマが読み込ませる.css,.jsファイル数を関数で減らしてみた
もっとやれることはあるのかもしれませんが、likebox再設置によるスピードダウンを3ポイントに抑えることが出来ました。
個人的にはまずまず満足です。