WordPress のチューニングに関する記事です。
TwentyTwelve のカスタマイズが大方終了したので、チューニングも兼ねて書いたコードを見直し中です。
その中で、「TwentyTwelveにソーシャルボタンをプラグインなしで追加する」で書いた、ソーシャルボタンを表示させる java スクリプトがあまりにも適当だったため、修正の意味も込めて最適化をしてみました。
スポンサーリンク
ソーシャルボタン用スクリプトを最適化
今回は、以下の “ソーシャルボタン” を表示する各スクリプトをコンパクトにまとめます。
- 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 化して、コンテンツのフッダあたりで読み込ませればなお良いと思います。
今回のチューニングだけで表示速度が飛躍的に向上するとかはないと思いますが、細かいチューニングを重ねていくと結構違ってくるので気付いた点があればまた書きたいと思います。
参考にしたページ
最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた