NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

WordPressプラグイン版Facebookのソーシャルプラグインを非同期読み込みにする

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1187日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

ページの読み込みが遅い原因の一つに、いいねボタンのようなソーシャルボタンの読み込みが非同期であることが挙げられるそうですね。

自分のブログもPageSpeedとかで見ると、そこを指摘されることが多いです。

何故か公式から取得したコードは同期読み込みになるうえに読み込みが遅いもんですから、どうしてもページのロードも遅くなります。

しかし、Facebookは取得したコードをちょこっと修正するだけで簡単に非同期読み込みにできるんだそうで、今回はそれを試してみることにしました。

やり方は非常に簡単です。

Facebookのソーシャルプラグイン読み込みコードの途中、

[js = d.createElement(s); js.id = id;]と[js.src = “//connect.…]の間に、

「 js.async = true;」

を書くだけでいいそうです。

つまり、

js=d.createElement(s); js.id=id; js.async=true;js.src = “//connect.…

とすればOKなんだそうです。

参考:たった一言で「いいね!」ボタンが爆速に!全ブロガーに必須の呪文。

ということで、やってみましょう。

と思ったのですが…!

実は自分はFacebookのJSは公式プラグインである「Facebook for WordPress」を使用しています。

つまり、ヘッダーなりフッターなりに自分が増やしたコードを修正すればいいという訳ではありません。

仕方ないのでプラグインのソースを順に追っていきますと、

facebook/facebook.php

のなかに問題の部分がありました。

「プラグインの編集」から「Facebook」を選び、「facebook/facebook.php 」を開けばOKです。

そして、修正すべき箇所は、直前にある「<div id=”fb-root”></div>」をページ内検索で探すのがよいかと。

Cmd+Fで「fb-root」と打てば1発で見つかるはずです。

この作業は、プラグイン本体のファイルを直接操作しますので自己責任で慎重に行ってください。また、プラグインを構成するファイルは、プラグインのアップデートにより巻き戻る可能性があります。

ということで早速やってみました。

その結果……。

うーん。早くなった…のか?よくわからんw

 因みにTwitterのボタンとかも同じ方法で非同期化できるらしいです。

っと、前回からここまでいろいろと高速化の方法を試してきましたが、ようやくGTMetrixの YSlow 側の結果がCからBまでアップしました。

gtmetrix_130909

しかしBということは、まだまだ改善は出来そうです。もうちょっと調べてみようかな?

TAGS