facebook-fast-display_ecmg

ワードプレス

瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読込み遅延を斬るっ!

えぇー今回の任務は「ぺいじ」の読込み遅延の改善でありましてぇー

えぇー察するに、一瞬で出来る奥義を伝承するものでありましてぇー

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

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

facebook-fast-display_04

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

facebook-fast-display_05

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

facebook-fast-display_06

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

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

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

facebook-fast-display_01

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でも同じような設定がデフォルトで行われている。

facebook-fast-display_03

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

js.async = true;

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

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

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

facebook-fast-display_07

facebook-fast-display_08

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

facebook-fast-display_09

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

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

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

facebook-fast-display_10

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

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

facebook-fast-display_16

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

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

facebook-fast-display_11

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

 ページプラグイン

facebook-fast-display_06

使用テーマによりスクリプトの記述場所、記述のされ方が異なる可能性は大いにあります。
TCDテーマであれば似たような記述である可能性は高いですが、子テーマを導入するなど、安全に、自己責任の上で作業してください。

 関連記事

では記述変更しよう。

Before | After

facebook-fast-display_11

facebook-fast-display_12

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

facebook-fast-display_13

facebook-fast-display_14

facebook-fast-display_15

まとめ

スクリプトに非同期コード【js.async = true;】を追記する

スクリプトの場所は</body>直前の方が望ましい

表示させたいページよって、スクリプトの数を最小限にする

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

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

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

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  2. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  3. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  4. Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャー…
  5. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて設定するUnroll…

関連記事

  1. like-button-card_ecmg-ps
  2. theme-manual-update-ecmg
  3. customized-theme-update_ecmg-1-ps
  4. child-theme_ecmg

    ワードプレス

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

    とりあえず作りきる!知識は後半!記事ページをカスタマイズしたい。え…

  5. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressテーマTCD「オリジナルウィジェット」の効果的な使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  6. facebook-app-id-app-secret-ecmg2

    マーケティング

    今すぐできる、開発者登録とFacebookアプリの作り方。App ID、App secretを取得し…

    こんなに簡単だったんですか。サイト運営をしていると、Faceboo…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. todoist_ec
  2. todoist-extension_ecmg
  3. adjust-the-button_ecmg
  4. theme-change_ecrt
  5. valuable-content-from-image_ec
  6. tcd-theme-user-review_ecmg

タスク管理で、自己管理。

todoist

ピックアップ記事

  1. spark-tutorial-ecmg
  2. customized-theme-update_ecmg-1-ps
  3. todoist-advanced_ec
  4. gif-animation_ec
  5. chrome-full-screen-capture-ecmg
  6. tcd-theme-options_ecmg

魅力的なブログを、今すぐ作る。

tcd-mag

掘り出し記事

  1. browzer-extension_ec
  2. LightShot-Screenpresso_ecmg
  3. meta-seo-inspector_ecmg
  4. retina-weight-saving_ecmg
  5. todoist-share_ec
  6. retina-text-widget-ecmg

ブログのRetina対応、始めませんか?

retina-os-solution

ピックアップ記事

  1. todoist-constitution_ec
  2. original-share-button_ecmg-ps
  3. unroll-me_ec
  4. gif-animation_ec
  5. blog-theme-mag_ecmg-ps
  6. like-button-card_ecmg-ps

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. enlarge-image-ecmg
  2. like-button-card_ecmg-ps
  3. todoist-class_ecrt
  4. todoist-constitution_ec
  5. simple-image-sizes_ec-ps
  6. tcd-css-customize_ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. display-speed_ec
  2. improvement-flow_ecmg
  3. tcd-theme-user-review_ecmg
  4. valuable-content-from-image_ec
  5. theme-change_ecrt
  6. todoist-extension_ecmg

ピックアップ記事

  1. quicktag_ecmg
  2. annotation-image-ecmg
  3. phrase-express_ecmg
  4. intuitive-custom-post-order_ec
  5. todoist-constitution_ec
  6. original-share-button_ecmg-ps

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  2. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  3. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  4. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  5. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
PAGE TOP