Facebookの「いいね！」ボタンと共有ボタンをより速く読み込みます

Facebook ボタンを非同期的に ロードするにはどうすればよいですか?

ほぼすべてのブログや Web サイトには、Facebook の「いいね！」、「共有」、または「フォロー」ボタンがあります。

ご存知のとおり、デフォルトの Facebook ソーシャル共有コードは、Web ページのリソースとともに同期的に読み込まれます。

これにより、Web サイトの読み込み時間が増加し、SEO スコアが低下します。それはSEOだけでなく、ユーザーエクスペリエンスも損ないます。

Facebook のソーシャル共有ボタンは必須であると確信していますが、最初に表示する実際のコードとしては重要ではありません。多くのブログや Web サイトでは、デフォルトの Facebook コードが原因でページの読み込み時間が長くなります。

Facebook コードを非同期的に使用すると、Web ページの読み込みが 0.5 ～ 1.5 秒速く なります。これは、Facebook の「いいね！」、「共有」、または「フォロー」ボタンをより速く読み込むために必要なものです。

これは、 .com への「いいね！」と共有のために Facebook 開発者 から取得したコードです

<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/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";    
fjs.parentNode.insertBefore(js, fjs);  
}(document, 'script', 'facebook-jssdk'));</script>

ここで追加する必要があるのは、コード内の 1 行に従うだけです。これにより、ボタンをより速く読み込むことができます。

 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/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";    
fjs.parentNode.insertBefore(js, fjs);  
}(document, 'script', 'facebook-jssdk'));</script>

簡単じゃないですか？

更新 : Facebook が提供する新しいコード スニペットには、以下に示すように、 script async すでに含まれているため、上記は必要ありません。

 <div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>

WordPress を使用していますか? プラグインを使用せずにパフォーマンスを最適化する方法を説明したこの投稿をご覧ください。速度が低下しないソーシャル メディア プラグインをお探しの場合は、Novashare を強くお勧めします。

Web ページの読み込みを速くしたいと思っていると思います。これがお役に立てば幸いです。