QR Code Business Card

Facebookなど表示が遅いSNSボタンを高速化する方法

Facebookなど表示が遅いSNSボタンを高速化する
 ブログを運営していると、たくさんの方にシェアしてもらうために、FacobookやTwitter、Google+などのSNSボタンは必須です。しかし表示するのが遅く、ページ全体の表示速度を落としている原因の一つになっています。今回はこのSNSボタンを高速化して、ついでにボタン自体を自作してきれいに揃えます。


SNSボタン画像を準備する


 ボタンを自作するにあたり、素材となる画像を準備します。


【epsパスデータ】ソーシャル系ウェブサービスのロゴアイコン 一覧まとめ

【epsパスデータ】ソーシャル系ウェブサービスのロゴアイコン 一覧まとめ

 各ソーシャルアイコンのベクターデータ(eps)を配布しています。これさえあればどのようなボタンでも作成できます。ありがたく使わせていただきましょう。【商用利用可】



フラットなフリーの日本向けソーシャルアイコンセットを作りました。

フラットなフリーの日本向けソーシャルアイコンセットを作りました。 | バニデザノート

 pngファイルで配布されています。FacebookやTwitterのアイコン素材は海外の素材サイトにもありますが、はてなとか国内のアイコンはあまりないので助かります。【商用利用可】



ミニ・ソーシャル・アイコン

ミニ・ソーシャル・アイコン

 きれいなミニアイコンを配布されています。ヘッダー/フッターに設置したい場合や、あまりボタンを大きく表示したくないときにピッタリです。【商用利用可】



WordPressプラグイン「SNS Count Cache」


インストール


 表示が遅い1番の原因は「いいね!」「ツイート数」など数値を取得する際に、一つ一つFacebookやTwitterから読み込むのに時間がかかっているためです。WordPressの場合、この数値を自動的にサーバーにキャッシュ(保存)して、そのキャッシュした数字を利用することによって、表示を高速化してくれるプラグインがあります。

WordPressプラグイン 新規追加

SNS Count Cacheを検索

 管理画面左メニュー 「プラグイン」 > 「新規追加」から「SNS Count Cache」を検索してください。



SNS Count Cacheをインストール

 表示された「SNS Count Cache」をインストール → 有効化します。



SNS Count Cache シェア数

SNS Count Cache シェア数 詳細

 インストールが終わると、各記事の「いいね!」や「ツイート」の数値のキャッシュが自動的に始まります。(このキャッシュは今後定期的に自動更新されるようになります)


使い方




 使い方はWordPressのテンプレートに追加します。例えば「scc_get_share_facebook();」が「いいね!」の数になります。あとは文字の大きさや色などをcssで整えると出来上がりになります。



SNSボタンを作成する


SNSボタン

 このようなタイトルの下に設置している感じになります。ボタンの大きさは40x40pxです。


HTML




 このように、「.bal」部分に数をCSSで吹き出しに、「.sns-icn .facebook」部分にアイコン画像をCSSで表示させています。あとはliタグで並べるようにしています。



CSS




 アイコン画像をCSSで表示することによって、画面幅によってPC用、スマホ用などアイコン画像の切り替えが簡単にできるようになります。

 今回のアイコンは幅40pxを7個並べますので、画面幅が320pxなどのスマホでは多少窮屈ですので「@media screen and (max-width: 320px) {}」によって、ボタンの間隔を小さくするようにしました。このように画面幅によってCSSでデザインを変えることができますので、便利に使えると思います。



吹き出しジェネレータ


cssarrowplease

cssarrowplease

 吹き出しのCSSはこちらのジェネレータが有名です。吹き出しの三角形の飛び出した部分のCSSを生成します。吹き出し自体の幅や文字のサイズは自分で設定する必要がありますので、注意して下さい。



表示速度を測定


測定するサイト


 高速化の前後で、どの程度表示速度に差が出るのかを測定します。ページの測定に使用するのは、有名な「GTmetrix」と「pingdom」の2つで比較します。


GTmetrix

GTmetrix | Website Speed and Performance Optimization


pingdom

pindom | Website speed test



GTmetrix


 数回測定してバラツキはありましたが概ね以下のような感じで、0.7〜1s程度の短縮ができました。


高速化前


GTmetrix


高速化後


GTmetrix 高速化後



pingdom


 こちらも数回測定して、1〜1.5s程度短縮されました。


高速化前


pingdom 高速化前


高速化後


pingdom 高速化後



まとめ


 さすがに読み込んでいたものをキャッシュするだけあって、体感でも表示速度が早くなっているのがわかります。実際に「GTmetrix」や「pingdom」で測定してみても違いがわかりました。やっぱりSNSボタンは思っている以上にページ表示速度の足かせになっているようです。

 しかし、WordPressでは「SNS Count Cache」を導入するだけで、この問題を簡単にクリアすることができます。SNSボタンがブログに必須である以上は、絶対入れておくべきおすすめプラグインです。

SNSでもご購読できます。

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)