如何异步加载 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? 查看这篇文章,其中解释了如何在没有插件的情况下优化性能。 而且,如果您正在寻找不会减慢速度的社交媒体插件,那么我强烈推荐 诺华.
我相信您希望您的网页加载速度更快,希望这对您有所帮助。
喜欢阅读这篇文章吗? 与世界分享怎么样?