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. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  2. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  3. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法
  4. 子テーマ使用者必見!カスタマイズしたWordPressテーマのアップデート方法と…
  5. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…

関連記事

  1. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方

    記事を見栄えよく、伝わりやすく。ブログ記事を書き始めると、分からな…

  2. tcd-css-customize_ecmg

    ワードプレス

    実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

    初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けた…

  3. media-setting_ec

    ワードプレス

    知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケンな関係

    意外と知らない、WordPressの”お気づかい”ひとつの画像をW…

  4. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  5. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

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

特集記事

  1. retina_ecmg
  2. extension-tools-for-bloggers_ec
  3. todoist-tips_ecmg
  4. todoist-extension_ecmg
  5. valuable-content-from-image_ec
  6. improvement-flow_ecmg

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

todoist

ピックアップ記事

  1. todoist-routine_ecrt
  2. firefox-full-screen-capture-ecmg
  3. chrome-full-screen-capture-ecmg
  4. todoist-basic_ec-ps
  5. original-share-button_ecmg-ps
  6. gif-animation_ec

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

tcd-mag

掘り出し記事

  1. insert-card-link_ecmg
  2. facebook-app-id-app-secret-ecmg2
  3. retina-text-widget-ecmg
  4. LightShot-Screenpresso_ecmg
  5. pushbullet_ec
  6. theme-manual-update-ecmg

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

retina-os-solution

ピックアップ記事

  1. jpg-gif-png_ecmg
  2. blog-theme-mag_ecmg-ps
  3. child-theme-mechanism_ecmg-ps
  4. gif-animation_ec
  5. customized-theme-update_ecmg-1-ps
  6. facebook-fast-display_ecmg

ゆっくり、フシギな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. chrome-full-screen-capture-ecmg
  2. lightshot_ecmg
  3. annotation-image-ecmg
  4. like-button-card_ecmg-ps
  5. sns-count-cache_ecmg2
  6. todoist-constitution_ec

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. adjust-the-button_ecmg
  2. tcd-theme-selection_ecmg-ps
  3. todoist-tips_ecmg
  4. display-speed_ec
  5. extension-tools-for-bloggers_ec
  6. tcd-theme-user-review_ecmg

ピックアップ記事

  1. todoist-advanced_ec
  2. phrase-express_ecmg
  3. todoist-basic_ec-ps
  4. quicktag_ecmg
  5. like-button-card_ecmg-ps
  6. annotation-image-ecmg

最近の記事

  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. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  3. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  4. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  5. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
PAGE TOP