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. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  2. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  3. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  4. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  5. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

関連記事

  1. annotation-image_ec

    ワードプレス

    ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追加しよう

    注釈画像も、自由自在。前回までの記事では、Screenpres…

  2. screenpresso-capture_ec

    ワードプレス

    その瞬間をキャプチャー。Screenpressoでブログに必須のスクリーンショットを撮る方法

    ピクセル単位でキレイにキャプチャー。前回の記事ではScreenpr…

  3. insert-card-link_ecmg

    ワードプレス

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

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

  4. child-theme_ecmg

    ワードプレス

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

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

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

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

レク.サウンドラボ

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

特集記事

  1. adjust-the-button_ecmg
  2. todoist-extension_ecmg
  3. retina_ecmg
  4. business-books_ecmg
  5. tcd-mag_ecmg
  6. todoist-tips_ecmg
  7. tcd-theme-selection_ecmg
  8. display-speed_ec
  9. tcd-theme-user-review_ecmg
  10. improvement-flow_ecmg

ピックアップ記事

  1. widgetoon-js-count-jsoon_ecmg
  2. quicktag_ecmg
  3. todoist-class_ecrt
  4. media-setting_ec
  5. blog-contents_ecrt
  6. jpg-gif-png_ecmg
  7. todoist-basic_ec
  8. phrase-express_ecmg
  9. chrome-font_ecmg
  10. gif-animation_ec

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

business-books

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

todoist

おすすめ記事

  1. feedlyのフォロワー数が表示されないっ!?SNS Cou…
  2. 【Retinaディスプレイ対応2】スリムで美しいブログを実現…
  3. 自分のアクセス痕は残さない。アナリティクスのフィルタで自宅の…
  4. Screenpresso(スクリーンプレッソ)を使うなら、や…
  5. 基本的なSEOチェックに。DescriptionやOGPを確…

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

tcd-mag

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

retina-os-solution

最近の記事

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

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザ…
  2. 目指せ軽量化!今から始める、WordPressサイトの表示ス…
  3. いつでもどこでも即タスク化。Todoistの便利すぎる拡張機…
  4. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  5. 【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分…

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

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

Requ.log | おすすめ物語

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

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  2. tcd-mag_ecmg

    ワードプレス

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

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  4. display-speed_ec

    ワードプレス

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

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
PAGE TOP