Facebook ソーシャルプラグインを非同期読み込みにする方法

スポンサーリンク

このドキュメントの内容は、以下の通りです。

ロードが遅くなる


ソーシャル系プラグインは、 JavaScript で提供されているものがいくつもあります。
そういった、スクリプトをページに追加していくと、ページが重くなっていく、という現象を体感されている方が多いのではないでしょうか。

ページロードを高速化する方法として、Facebook のソーシャルプラグインを非同期読み込みにする方法があります。
JavaScript の読み込みを非同期にすることにより、JavaScriptの読み込みが終わらなくても、ページの他の部分の読み込みを実行してくれます。

ソースコード


やり方は、とても簡単です。JavaScript の読み込みを非同期実行にするには、 async を true にします。

js.async = true;

ソースコード全体で示すと以下の通りです。

<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/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
//--> </script>

以上で、ページのロードの体感速度に変化が得られたでしょうか？
スポンサーリンク
スポンサーリンク
 
いつもシェア、ありがとうございます！
Twitter
Facebook
LINE
Pocket
はてぶ
RSS

もっと情報を探しませんか？

関連記事

最近の記事

人気のページ

スポンサーリンク
 

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12

サイト

Vim入門

C言語入門

C++入門

JavaScript/Node.js入門

Python入門

FreeBSD入門

Ubuntu入門

セキュリティ入門

パソコン自作入門

ブログ

トップ

プライバシーポリシー