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 | レク.ログ

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

ピックアップ記事

  1. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  2. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  4. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  5. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…

関連記事

  1. facebook-app-id-app-secret_ecmg

    マーケティング

    サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp secretの取得方…

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

  2. mergely-ecmg

    ワードプレス

    「違い」を調べる神ツール。テキストファイルの差分比較、合併ができるMergelyの使い方

    神のツールを手に入れた男。遠い昔の話。正直者の男の目の前に、ある2…

  3. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  4. description-video_ec
  5. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー

    TCDテーマの、実際の使用感。幅広いユーザーニーズに応える『TCD…

  6. sns-count-cache_ecmg

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス!「ページを表示するたびに、今のシェア数…

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

特集記事

  1. adjust-the-button_ecmg
  2. tcd-theme-selection_ecmg-ps
  3. valuable-content-from-image_ec
  4. business-books_ecmg
  5. todoist_ec
  6. todoist-tips_ecmg
  7. theme-change_ecrt
  8. todoist-extension_ecmg

ピックアップ記事

  1. child-theme_ecmg
  2. dash_ecmg
  3. jpg-gif-png_ecmg
  4. like-button-card_ecmg-ps
  5. gif-animation_ec
  6. blog-theme-mag_ecmg-ps
  7. customized-theme-update_ecmg-1-ps
  8. tcd-css-customize_ecmg

強みを見つけて、活かしていこう。

business-books

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

todoist

掘り出し記事

  1. backup-all-in-auto_ec
  2. todoist-re-schedule_ec
  3. pushbullet_ec

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. quicktag_ecmg
  2. tcd-theme-options_ecmg
  3. sns-count-cache_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | おすすめ書籍

「言葉にできる」は武器になる。 プロフェッショナルは「ストーリー」で伝える

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. restriction_ecmg-ps
  2. reset-button_ecrt
  3. blog-contents_ecrt
  1. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  2. todoist-extension_ecmg

    マネジメント

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

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  4. valuable-content-from-image_ec

    ワードプレス

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

    マーケティング

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