はてなブログには標準で「はてなブックマーク」、「Facebook」、「Twitter」のソーシャルボタンが表示されており、各SNSへのシェアが簡単に行えます。
ところが、標準のソーシャルボタン（ソーシャルパーツ）は「表示速度が遅い」という意見をよく見かけます。
遅いページは読者の方にとってストレスですし、Googleの検索順位にも多少の影響があるそうです。
はてな標準のボタンを使わずにソーシャルボタンを設置する方法は、他のユーザーさんが公開されています。デザインの改善と共に表示時間も短縮できるなら一石二鳥です。
今回は当ブログのソーシャルボタンをカスタマイズし、変更前後で記事の表示速度を確認しましたので、結果をお伝えします。
ソーシャルボタンのカスタマイズ方法
当ブログでは、ゆきひーさん（id:ftmaccho）の記事を参考にソーシャルボタンをカスタマイズしました。
レスポンシブデザイン使用時の設定方法も詳しく解説されていて、スムーズに導入することができました。
カスタマイズ後のソーシャルボタン
シンプルでありながら、各SNSの特徴をしっかりと強調した素敵なデザインです。 「はてなブックマーク」と「Facebook」はシェア件数も表示されます。
はてな標準ボタンでは表示していなかった「Google+」、「Pocket」、「LINE」を追加しているので、その点については標準ボタンが有利な速度比較となります。
※LINEはスマホでのみ表示されます。
今回、「はてなスター」はそのまま残しています。（こちらも表示速度の評判はあまり良くありません）
はてな標準ボタンの非表示
ブログ管理画面より[デザイン]→[カスタマイズ]を開き、[記事]→[ソーシャルパーツ]内の各チェックボックスを外します。 [変更を保存する]で標準のソーシャルボタンが非表示となります。
表示速度の測定方法
測定サイト
以下のサイトにて、ソーシャルボタン変更前後の表示速度を測定しました。
GTmetrix
GTmetrix | Website Speed and Performance Optimization
Google PageSpeed Insights
どちらのサイトも、対象ページ（記事）のURLを入力してボタンを押すだけで簡単に測定できます。
ページ全体の表示時間だけでなく、遅い部分・改善案も掲示してくれるので、とても参考になります。
※はてなブログでは全ての設定を自由に行えるわけではないので、必ずしも改善できるとは限りません。
測定サンプル記事
前回の記事で測定を行いました。
当ブログとしては文字数が少なく、画像も未使用のため、ソーシャルボタンの変更による影響が顕著に現れることを期待して選びました。
ブログの設定内容については、次の記事にまとめています。
GTmetrixの測定結果
ソーシャルボタンの変更後、すべての評価項目が改善されました。
| 項目 | 変更前 | 変更後 | 内容 |
|---|---|---|---|
| PageSpeed Score | B(82%) | B(87%) | Google「PageSpeed」の評価 |
| YSlow Score | D(63%) | D(67%) | Yahoo「YSlow」の評価 |
| Page Load Time | 13.1s | 12.9s | ページのロード時間（短い方が良い） |
| Total Page Size | 3.56MB | 2.93MB | ページの合計サイズ（小さい方が良い） |
| Requests | 221 | 177 | サーバーへの要求回数（少ない方が良い） |
変更前（はてな標準）
変更後（カスタマイズ）
Google PageSpeed Insightsの測定結果
デバイス（モバイル・パソコン）ごとに測定結果が表示されます。
どちらもソーシャルボタン変更後の方が高スコアとなっています。
- モバイル: 59 → 61
- パソコン: 75 → 77
変更前（はてな標準）
変更後（カスタマイズ）
まとめ
はてなブログ標準のソーシャルボタンは、やはり遅いという結果になりました。
ブログの表示速度を改善したい方や、ソーシャルボタンのカスタマイズを検討されている方の参考になれば幸いです。