ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【Webサイト高速化】ソーシャルボタンを1つにまとめるコードを共有するよ

いいね!する女性

記事の中に複数の同じソーシャルボタンを設置している場合、スクリプトをまとめることによりブログ表示を高速化できます。今回は各ソーシャルボタンをも1つのコードに集約したのでリクエスト回数も減りファイルもすっきりしました。

ゆめぴょん(@yume_pyon)です。こんちはっ!

ブログにソーシャルボタンを付けるのは当たり前になっています。私も今までソーシャルボタンについてはいくつか記事を書いています。興味のある方は参考にしてみてください。

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK68 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

私が現在このブログで利用しているソーシャルボタンは、自分でも利用している5種類です。ツイッター、Facebook、はてなブックマーク、Google+、Pocketです。

なおWordPressを利用している方は、次の高速化についてのまとめ記事も参考にしてみてください。

WordPressサイト高速化でSEO対策!17の表示速度アップ術WordPressサイト高速化でSEO対策!17の表示速度アップ術17 shares

ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとG…

ソーシャルボタンを3段階でまとめる

そもそも、ソーシャルボタンをまとめるとはどういう意味なのかを3段階で説明します。

  1. 同じソーシャルボタンのスクリプトを1つにまとめる
  2. 全てのソーシャルボタンのスクリプトを1箇所にまとめる
  3. 全てのソーシャルボタンを1つのスクリプトにまとめる

ただし同じボタン(例えばツイッターボタン)を1記事内に1箇所づつしか設置していない場合は、あまりまとめる意味はないかもしれません。

1.同じソーシャルボタンのスクリプトを1つにまとめる

同じSNS(ソーシャルネットワーク)のボタンを複数設置している場合は、「横型」「縦型」「押した人の数がでるタイプ」「顔のでるタイプ」のどれであっても基本的には同じスクリプト(プログラム)を利用しています。

ソーシャルボタンを作成した時に次のようなコードを設置したとします。これはツイッターの場合です。1行目がリンクを作るaタグ。2行目がJavaScriptのスクリプトのタグです。

このツイッターボタンを1箇所だけに付ける場合は、2行とも記述すればいいでしょう。しかし2箇所以上につける場合は1行目のaタグは全てのボタン箇所に記述する必要がありますが、2行目のスクリプトは同じページ内なら1箇所だけで充分です。

このことを理解していないと、何回も同じスクリプトを実行してしまうため表示速度がかなり低下してしまいます。

2.全てのソーシャルボタンのスクリプトを1箇所にまとめる

先ほどのツイッターボタンのスクリプト(2行目)は、同じページ内ならどこに記述しても動作します。だから私は一番下の</body>タグの直前あたりにおいています。

「CSSはheadタグ内の上の方で、JavaScriptは(可能なら)</body>の直前で」の原則に従っています。最近は非同期化(下で説明)に対応したスクリプトも増えてきてるのでひと昔前ほどは、こだわる必要はなくなりましたが。

スクリプトの非同期化を使うと、JavaScriptを完全に読み込む前でも次の動作に移れます。逆に言うと非同期化されていない場合、完全にスクリプトが読み込まれるまでは次の処理が行われません。

このことが原因で、表示速度がかなり遅くなってしまいます。

3.全てのソーシャルボタンを1つのスクリプトにまとめる

2段階目との違いがわかりにくいですね。例えば5種類のソーシャルボタンを利用しているとします。2段階目が完了した時点では、5つのスクリプトがページの一番下などに配置されている状態です。

一箇所にソーシャルボタンのスクリプトを集めるだけでも、今まで複数設置していた人にとってはかなりの表示速度アップにつながったと思います。しかしさらにこれらを1つにまとめてしまう!というのが今回の最終目標です。

ソーシャルボタン

ソーシャルボタンをまとめる理由

  1. リクエスト回数を減らせられるので、表示を高速化できる
  2. ボタンを複数設置する場合はスクリプトは1回だけ実行すればよい
  3. HTMLとJavaScriptをわけると保守性も増すし、Googleにも好かれるかも
  4. ファイルの行数も減るし、すっきり見やすくなる

全てのソーシャルボタンを1つにまとめる方法

作業は意外と簡単に終わってしまいます。ただこの作業をはじめる前に、まず上の2段階目まではクリアしておく必要があります。

すなわち、同じソーシャルボタンのスクリプトは必ず1つだけにしぼり、それぞれのスクリプトもどこか一箇所にまとめるところまでは各自で実行してください。

そして1箇所にまとめた5つのスクリプトを次の1つのスクリプトに置き換えます。くわしい中身の説明はしませんが、5つのスクリプトをまとめたものです。不要なソーシャルボタンは行ごと削除してください。

また可能なら自分で作成した外部スクリプトファイルに書きだすのが理想です。それ以外の人は</body>タグの直前などに置いてください。そして全てのソーシャルボタンが表示できるか確認してください。

なお上のスクリプトは次のブログ記事を参考にさせて頂きました。素晴らしいプログラムをありがとうございます。その記事内では「Google Analytics」のスクリプトもまとめているので興味ある人は確認してください。

私は「Google Analytics」は単独で設置したかったので、ソーシャルボタンのみをまとめました。

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

まとめ:今日のゆめぴょんの知恵

さて表示速度は速くなったでしょうか。本音をいうと全体的には速くなったのでしょうけど、ページが表示された後にソーシャルボタンの書き出しがはじまるため、少しもっさり感があるんですよね。更なる改善を考えてみます。

記事上でも書きましたが、ソーシャルボタン関連の他の記事も参考にしてください。

ゆめぴょん(@yume_pyon)でした。
では、ばいちゃお! こてっZzz

«前記事:【WordPress】Tweetilyプラグインで過去記事を自動で定期ツイート投稿WordPressサイト高速化でSEO対策!17の表示速度アップ術:次記事»
ページ
↑先頭
ホーム