余計な読込み遅延を解消セヨ。

今日も家老は絶好調だ。前置きはやめよう。

通常の「いいね！」ボタンも・・

記事下に設置する「いいね！」ボタンも・・

ウィジェットに設置する「ページプラグイン」も・・

Facebookまわりのものは特に、ページ表示を遅くしがちだ。しかしこのWEB戦国時代においては、外すわけにはいかない装備でもある・・・ならば、Facebookのソーシャルプラグインたちの重たい負担を、少しでも軽減させよう。余計な読込み遅延をぶった斬るのだ。

数文字追記するだけの瞬間奥義

作業は一瞬。FacebookとWEBサイト連携をしているとよく見かける、このコードたち。

1つ目のコードが「スクリプトコード」だ。こいつが鍵を握る。この中に、数文字追記する。

Before

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8&appId=936520846456464";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

After

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async = true;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.8&appId=936520846456464";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

ハイライト部分を追記するのみ。それだけなのだ。
いまバカボンのパパっぽいっつったの誰だ。

知っていれば得する「非同期」という方法

実はGoogle AdSenseでも同じような設定がデフォルトで行われている。

手元のAdSenseコードを見てみれば「async」という文字が見つかるはず。仕組みは同じ。Facebookのスクリプトにもコレを付けておけばよいということだ。

js.async = true;

さらに高速表示を追求する貴方へ

WordPressテーマには、記事ページにデフォルトで、公式のいいね！ボタンやシェアボタンが設置されていることが多い。貴方のサイトもそうであれば、上にあげた1つ目のスクリプトコードは、どこかに、既に組み込まれているはずだ。

例えば私のテーマの場合、「footer.php」に記述され、記事ページが表示された時にだけ呼び出されるようにされていた。

さらには先の非同期設定「js.async = true;」も既に記述されていた。

恐るべしTCDテーマ。当然のように先回りされていた。まさにプロの手口だ。

フッターにスクリプトを記述するメリット

Facebookではヘッダーのbodyタグ直後に記述することを推奨しているのだが・・

実はその必要はない。むしろその重たーいスクリプトを先に読みこんでいる間、ページ表示は後回しにされてしまう。グルグルマークと真っ白画面状態。ということはつまり・・・

【Facebookのスクリプトを後回しにして読み込ませれば、ページの初期表示は速くなる】ということ。だから、ヘッダーの＜body＞直後ではなく、フッターの＜/body＞直前に記述されている、ということなのだ。 これで、ほぼ最後のほうに読み込ませることになる。

スクリプト一つで記事ページ以外にも有効化させる方法

繰り返すようだが、私の使用テーマでは、デフォルトで記事ページにだけいいね！ボタンが用意されている。だから上であげたように、トップページやアーカイブページ、固定ページなどでは余計な表示遅延を起こさないよう、記事ページだけで読み込むように記述されていた。

つまり、その他のページでも読み込ませるように記述変更すれば、そのスクリプト一つで、どのページでも「ページプラグイン」などを設置することができる。いいね！ボタンも同様。いくつも同じ記述を追加する必要はなくなるのだ。

 ページプラグイン

 関連記事

2016.10.13

「10分で終わらせてくるっ！」WordPress子テーマの作り方を2ステップで簡単解説！

とりあえず作りきる！知識は後半！ 記事ページをカスタマイズしたい。え？記事下にこんな「いいね！ボタン」も設置したいし。 こんなオリジナルシェアボタンだって作りたい。 せやでぇ？カスタイズしたいねんけど、直接テーマファイル触わるんコワ...

では記述変更しよう。

Before | After

たったこれだけで、このスクリプトは全てのページに有効化される。今回の場合、スクリプトを挟んでいるPHPタグが分かれば、ともに取り除いてしまうという手もある。とにかくこれで後は好きなページのウィジェットに、2つ目のコードを貼り付けるだけで済むようになるのだ。

まとめ

これだけでFacebookまわりの重たーい呪縛から少しは解放される。試してみてほしい。

 取り入れると有効な関連記事

2016.12.03

「私の名前はページプラグイン。」Facebookページのいいね！ボタンをWordPressウィジェットに設置しよう

サイドバーでよく見る「アレ」。 どん！ ね・・あれ、見たことない？ あ！知ってる！毎日見る！露出度ハンパないよねー ・・名前なんやったっけ？ くォラァっ！！！・・・あ、「ページプラグイン」ってゆーんすけど・・知りません？ ご...

2016.09.27

サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね！ボタン」をセンスよく設置する方法

初心者でも、コピペで簡単。 「バイラルメディア風」と呼ばれる、Facebookの「カード型いいね！ボタン」。よく見かけますよね。そう、記事下にシュピッ！とたたずむ、こんなステキなかたです。 いーですねぇ。カッコいいですねぇ。記事に設定したアイキャッチ画...

 有効なカスタマイズまとめ

2016.12.24

魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカスタマイズまとめ

ブログの魅力を最大限に引き出す！ ワードプレスのTCDテーマ【MAG】。インストールするだけで、デザイン性の高いブログサイトに変身させてくれるキラーテンプレートです。キラーと言ってもスゴいスゴぉいのほうです。 【MAG】デモサイト 参考記事 ...