work.log

元エンジニアの備忘録的ブログ

WordPressのソーシャルボタン用スクリプトを最適化

投稿:

WordPress のチューニングに関する記事です。

TwentyTwelve のカスタマイズが大方終了したので、チューニングも兼ねて書いたコードを見直し中です。

その中で、「TwentyTwelveにソーシャルボタンをプラグインなしで追加する」で書いた、ソーシャルボタンを表示させる java スクリプトがあまりにも適当だったため、修正の意味も込めて最適化をしてみました。

ソーシャルボタン用スクリプトを最適化

今回は、以下の “ソーシャルボタン” を表示する各スクリプトをコンパクトにまとめます。

  • Facebook
  • Twitter
  • Google+
  • はてなブックマーク
  • Pocekt

コードはこんな感じです。

(function (w, d) {
    w.___gcfg = {lang: "ja"};
    var s, e = d.getElementsByTagName("script")[0],
        a = function (u, i) {
            if (!d.getElementById(i)) {
                s = d.createElement("script");
                s.src = u;
                if (i) {s.id = i;}
                e.parentNode.insertBefore(s, e);
            }
        };
    a("https://apis.google.com/js/plusone.js");
    a("//b.st-hatena.com/js/bookmark_button.js");
    a("//platform.twitter.com/widgets.js", "twitter-wjs");
    a("//widgets.getpocket.com/v1/j/btn.js?v=1", "pocket-btn-js");
    a("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
})(this, document);

参考元のコードには Google Analytics も含まれていましたが、今回は個別ページ以外でソーシャルボタンを表示する必要がなかったため別ファイルに分けました。

Google Analytics も含めたい場合は以下のようになります。

(function (w, d) {
    w._gaq = [["_setAccount", "UA-********-*"],["_trackPageview"]];
    w.___gcfg = {lang: "ja"};
    var s, e = d.getElementsByTagName("script")[0],
        a = function (u, i) {
            if (!d.getElementById(i)) {
                s = d.createElement("script");
                s.src = u;
                if (i) {s.id = i;}
                e.parentNode.insertBefore(s, e);
            }
        };
    a(("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js", "ga");
    a("https://apis.google.com/js/plusone.js");
    a("//b.st-hatena.com/js/bookmark_button.js");
    a("//platform.twitter.com/widgets.js", "twitter-wjs");
    a("//widgets.getpocket.com/v1/j/btn.js?v=1", "pocket-btn-js");
    a("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
})(this, document);

2行目の “UA-********-*” にはトラッキング ID を適時設定すれば OK です。

後は以下のサービス等を使ってスクリプトを minify 化して、コンテンツのフッダあたりで読み込ませればなお良いと思います。

Online JavaScript/CSS Compression Using YUI Compressor

今回のチューニングだけで表示速度が飛躍的に向上するとかはないと思いますが、細かいチューニングを重ねていくと結構違ってくるので気付いた点があればまた書きたいと思います。

参考にしたページ

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

おすすめのVPSサーバ

  • OSが選べる
  • VPS同士でLANが組める
  • 複数台構成向き

このブログで使っています。

  • 転送量が多いサービスに
  • 借りてるのは3年間一度もdown無し!

よく見られている記事

  • 本日
  • 週間
  • 月間