眠すぎ日記 > パズドラ攻略rtWiki > SNSボタン軽量化

SNSボタン軽量化

SNSボタンは昨今では非常に重要とされていますが、SNSボタンによってページの重さが数倍になってしまっているサイトも少なくありません。以前から多少機能が落ちたとしても計量化したいと思っていました。
先日のページのUTF-8化によって、自作のSNSボタンが使えるようになったため本日反映しました。

※UTF-8化によってトップページ以外のカウント数はほぼ全てリセットになっています

カウント数を表示する上で、ソーシャルカウントの取得方法まとめ - Syncerは非常に参考になりました。

以下は変更したことによってどれぐらい軽くなったかの比較です。

この結果は「超絶軽くなりました!」と言っていいと思います。もちろんTwitterやFacebook側の仕様変更が起きると面倒という手間はありますが、ページの重さをどうにかするならまずSNSボタンの見直しが一番効果が大きいです。(それだけ、通常版は重過ぎ......)

通常版(before)

snscount_01.png

62 requests , 725KB transferred , Finish:1.25s , DOMContentLoaded:615ms , Load:1.27s

軽量化(after)

snscount_02.png

37 requests , 277KB transferred , Finish:850ms , DOMContentLoaded:592ms , Load:868ms

※表示速度はChromeのネットワークパネルを使用(PC版・キャッシュなし・広告なし)

履歴

残った課題は、Facebookがlike数を表示しているのにボタンを押してできることはシェア。ということぐらいですね。aタグでlikeがしたいのですが......。

2015年8月2日
TwitterとGoogle+で日本語が含まれているURLがうまく認識されない問題があったので、下記のようにurlencodeを使って解決しました。

urlencode($_SERVER["REQUEST_URI"])

リンクとして認識されない例

url=http://pad.rtwiki.net/index.php?%E3%83%AA%E3%83%B3%E3%82%AF

リンクとして認識される例

url=http://pad.rtwiki.net/index.php?%25E3%2583%25AA%25E3%2583%25B3%25E3%2582%25AF

%25(%)が無いとだめみたいです。

snscount_03.png

Comments:0

Comment Form

眠すぎ日記 > パズドラ攻略rtWiki > SNSボタン軽量化

Return to page top