更快地加载 Facebook 点赞和分享按钮

如何异步加载 Facebook 按钮?

几乎每个博客、网站都有 Facebook 点赞、分享或关注按钮。

您可能知道,默认的 Facebook 社交共享代码会与您的网页资源同步加载。

这将增加您的网站加载时间并损害 SEO 分数。 这不仅不是 SEO,而且还会破坏用户体验。

我确信 Facebook 社交分享按钮是必不可少的,但不能作为您首先显示的实际代码。 由于默认的 Facebook 代码,许多博客或网站的页面加载时间较长。

异步使用 Facebook 代码将帮助您将网页加载速度加快 0.5 – 1.5 秒。 这就是您必须更快地加载 Facebook 点赞、分享或关注按钮的原因。

这是我从中获得的代码 脸书开发者 喜欢并分享到 techblik.com.com

<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>

现在,我只需添加代码中的一行,这将有助于更快地加载按钮。

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 提供的新代码片段不需要上面的代码,因为它已经包含脚本异步,您可以在下面看到。

<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? 查看这篇文章,其中解释了如何在没有插件的情况下优化性能。 而且,如果您正在寻找不会减慢速度的社交媒体插件,那么我强烈推荐 诺华.

  了解 Facebook 好友列表和您的隐私

我相信您希望您的网页加载速度更快,希望这对您有所帮助。

喜欢阅读这篇文章吗? 与世界分享怎么样?