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テーマであれば似たような記述である可能性は高いですが、子テーマを導入するなど、安全に、自己責任の上で作業してください。
「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

では記述変更しよう。

 Before | After

facebook-fast-display_11

facebook-fast-display_12

たったこれだけで、このスクリプトは全てのページに有効化される。後は好きなページのウィジェットに、2つ目のコードを貼り付けるだけで済むようになるのだ。

facebook-fast-display_13

facebook-fast-display_14

facebook-fast-display_15

まとめ

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

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

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

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

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

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

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

 カスタマイズまとめ

魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MAG】の有効的な活用方法とカスタマイズまとめ

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

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  2. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  3. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  4. “知っているつもり”の拡張子、jpg gif png。画…
  5. 簡単で効果的なストレス解消方法。「リセットボタン」で本当のリラックスを呼びだそう…

関連記事

  1. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画

    あなたの●●●、ちょっと重すぎない? いえ、すみません。あなた…

  2. original-share-button_ecmg
  3. media-setting_ec
  4. retina_ecmg
  5. browzer-extension_ec

    ワードプレス

    ”WEBサイズマスター”へ。Chrome拡張「Page Ruler」「View Image Info…

    自分のWEBサイトの幅、知ってますか?今自分が見ているページの「あ…

  6. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. tcd-theme-user-review_ecmg
  2. tcd-theme-selection_ecmg
  3. todoist_ec
  4. adjust-the-button_ecmg
  5. tcd-mag_ecmg
  6. extension-tools-for-bloggers_ec
  7. todoist-tips_ecmg
  8. todoist-extension_ecmg
  9. display-speed_ec
  10. improvement-flow_ecmg

ピックアップ記事

  1. facebook-page-plugin_ecmg
  2. tcd-theme-options_ecmg
  3. todoist-advanced_ec
  4. chrome-font_ecmg
  5. tcd-css-customize_ecmg
  6. todoist-routine_ecrt
  7. tcd-theme-widget_ecmg
  8. gif-animation_ec
  9. sns-count-cache_ecmg
  10. restriction_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. Screenpresso(スクリーンプレッソ)を使うなら、や…
  2. ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追…
  3. 成長に欠かせない大切な秘訣。真面目な人ほど陥りやすい、”モヤ…
  4. 小規模チーム、家族間の疎通に。Todoistで始める気軽なタ…
  5. 簡単に予定変更。Todoistで実現する、カレンダーだけでは…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  3. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  4. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…
  5. 移動したいデスカ?TCDテーマMAGでダブルレクタングル広告…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分…
  2. 【徹底検証】乗り換えたいでしょ?WordPressTCDテー…
  3. 【フリーランス必見】確実に納期を守るために。タスク管理ツール…
  4. 目指せ軽量化!今から始める、WordPressサイトの表示ス…
  5. 『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテ…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  2. tcd-mag_ecmg

    ワードプレス

    魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MAG】の有効的な活用方…
  3. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  4. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
  5. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
PAGE TOP