社交媒体按钮减慢网站加载时间

时间：2013-09-27 21:24:55

标签： javascript html facebook-social-plugins google-plus-one twitter-button

我正在创建一个简单快速的网站，我正在尝试尽可能地优化网站。我注意到社交媒体按钮正在减慢网站的速度。我包括Facebook Like Button，Twitter Button和Google+ Button。 所以我做了一些测试：

网站没有社交媒体按钮，加载时间0.24s：

enter image description here

网站带有社交媒体按钮，加载时间为1.38秒：

enter image description here

这是我的代码：

<div id="social">
    <!-- FB -->
    <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_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
    <!-- TWITTER -->
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    <!-- G+ -->
    <div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>
    <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>
</div>

所以我尝试了很少的东西来加载这些社交按钮而不会减慢网站加载时间。

通过JavaScript延迟一秒后加载按钮：

setInterval(function(){
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
},1000);

这没有任何帮助，按钮没有正确加载，而且它们都在窃听。

文档准备好后加载按钮：

$(document).ready(function() {
    $("#social").html("<!-- FB --><div id="fb-root"></div>.....");
});

这也无济于事。按钮加载得很好，但网站加载时间仍然是> 1.00秒。

我的想法已经不多了。任何方式加载它们而不会减慢网站的速度？

PS。在这些测试中使用了Page load time插件用于chrome

SOLUTION：

感谢CodeMonkey的回答，我最终通过在整个页面加载后加载社交按钮来解决这个问题。我将必要的JavaScript代码（用于社交媒体按钮）移到一个单独的文件中，以使我的HTML /标记更加清晰。

JS（在一个单独的文件中，social.js）：

/* Facebook*/
(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_EN/all.js#xfbml=1&status=0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
/* Twitter */
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
/* G+ */
(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

HTML：

<script>
    $(window).bind("load", function() {
       $.getScript('js/social.js', function() {});
    });
</script>
<!-- FB -->
<div id="fb-root"></div>
<div class="fb-like" data-href="http://facebook.com/textsearcher" data-width="150" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<!-- TWITTER -->
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.textsearcher.com/" data-hashtags="TextSearcher">Tweet</a>
<!-- G+ -->
<div class="g-plusone" data-size="medium" data-href="http://www.textsearcher.com/"></div>

因此在此负载时间再次正常后，0.24s：

Load timings

9 个答案:

答案 0 :(得分：39)

你可以尝试

$(window).load(function() {

而不是

$(document).ready(function() {

所以它会等到你的图像和所有内容都加载完毕之后。

如果这没有帮助，那么我建议让它们只出现在悬停状态。有一堆静态图像/ CSS精灵，当用户将鼠标悬停在它们上面时会被替换。

如果您不想要额外的步骤，并且您有服务器访问权限来安装模块，您可以尝试google的mod pagespeed为您推迟javascript https://developers.google.com/speed/pagespeed/module/filter-js-defer

如果您没有服务器访问权限，可以尝试CDN路由，Cloudflare的火箭加载器非常有趣，我出于类似的原因在分钟测试它，并且看到〜33％的速度增加http://www.cloudflare.com/features-optimizer

如果这没有帮助，你可以尝试粘贴页面底部按钮并使用CSS重新定位的旧版本，以便它们看起来更高;这样你可以将它们放在你想要的地方，但它们似乎不会干扰页面加载时间。

您可以尝试更简单的oldschool替代方案，例如http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

或查看http://www.addthis.com/或http://www.sharethis.com/等服务是否能更快地为您服务

当然，此时房间里的大象是在页面上有3个主要的社交媒体按钮，而且它只花费你一秒钟 - 遗憾地看起来相当不错！它们是看似复杂的按钮，看起来似乎没有得到很好的优化，google pagespeed insights找到了一些可以抱怨的东西。

由于您的速度达到了100％以上，我建议进行一些A / B测试，看看您是否真的需要它们，即您的网站是否会减慢流量？拥有共享按钮是否会带来更多流量以保证其存在？

答案 1 :(得分：3)

社交窗口小部件不应该过多地减慢加载时间，除非它们阻止等待页面完成加载的更重要的脚本。您使用的代码是异步的，这有帮助，但在大多数浏览器中，这仍然会阻止window.onload事件。有关如何使用iframe以非阻塞方式加载JS SDK的信息，请参阅Stoyan's post here。

如果这太多了，你想延迟SDK下载或运行（并在运行后加快速度），这是我的建议：

首先，使用像jQuery这样的库，它提供了一种以跨平台方式挂钩到DOM的方法。 Here is one implementation。获得“DOM ready handler”后，您应该执行以下两项操作之一：

  1. 将JS SDK加载代码移动到DOM就绪处理程序中。

  2. 从FB.init（...）中取出xfbml：true，如果有的话（在这种情况下，你没有），并从SDK URL中取出xfbml = 1。这可以防止社交窗口小部件立即被解析和初始化。然后，在DOM就绪处理程序中调用FB.XFBML.parse（）。 See the documentation here for that method。为性能做的最好的事情就是专门调用FB.XFBML.parse(document.getElementById(''))，这样SDK就不会浪费时间覆盖整个DOM。

答案 2 :(得分：3)

虽然这个问题很老，而且问的人可能没有看到我的回答，但对于有同样问题的人来说，这是另一种选择 - 只要你不介意牺牲显示喜欢的数量/共享/等

您只需添加将访问者发送到实际社交网络的链接，然后打开包含预先填写的网址和说明的共享窗口。

代码非常简单，您可以使用您想要的任何图像或文字，这样可以更轻松地将按钮放入您网站的设计中。

<a href="https://www.facebook.com/sharer/sharer.php?u=URL" target="_blank">Share on Facebook</a>
<a href="https://twitter.com/intent/tweet?url=URL&text=TEXT&via=YOURTWITTERACCOUNTNAME" target="_blank">Tweet</a>
<a href="https://plus.google.com/share?url=URL" target="_blank">Share on Google+</a>

只需将网址替换为您网站的网址，将 TEXT 替换为简短说明。

此解决方案不需要JavaScript，因此非常轻量级。您可以使用徽标，图标字体，简单文本（＆＃34;在Facebook上共享＆＃34;）。

我还撰写了一篇covers many other social networks。

的博客文章

答案 3 :(得分：2)

插件（社交媒体按钮）的加载时间会因许多因素而异，包括（但不限于）：

  • 您的服务器的响应时间（插件在您的代码也告知之前不会加载。）
  • 用户的互联网速度（在本例中为您的网速）
  • 与社交媒体网站服务器的距离（例如，Facebook的服务器可能位于非洲大陆的另一边，造成延迟）
  • 社交媒体网站的加载时间

这意味着除了尽可能优化代码之外，您无能为力。

此外，最好在文档准备好后运行Javascript插件，除非插件文档另有说明。 setInterval不是一个好方法，因为它不知道是否所有页面都可以修改。因此，请务必使用$(document).ready()方法执行修改页面内容的任何操作。

答案 4 :(得分：1)

在加载社交媒体的脚本中，将“延迟”放入其中。

<script defer src="http://api.facebook.com/....."></script>

答案 5 :(得分：1)

尝试对Social init脚本使用异步加载：

<script async="async">...</script>

答案 6 :(得分：0)

大多数主要社交媒体按钮都提供了JavaScript的异步版本。您只需在官方文档页面上进一步向下滚动。

答案 7 :(得分：0)

尝试将您的喜欢按钮放入可重复使用的iframe中并将网址传递给喜欢。

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fphys.org" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>

答案 8 :(得分：0)

如果您来这里找到解决方案如何更快地加载Facebook社交插件 - 例如如何在window.onload（）事件发生之前渲染它们（因为wifi上的网络速度慢/页面上的大图像...）你可以尝试我的解决方案：

window.fbAsyncInit = function () {
    dispatchEvent(new Event('load'));
}
一旦加载了facebook sdk js文件（例如快速），就会调用fbAsyncInit，并且您可以使用自定义加载事件调度伪装社交按钮以更早地（在加载图像之类的其他资源之前）进行渲染。当你根据你的其他javascript代码/库触发onload（）事件时，请注意后果。

另一个解决方案是将带有sdk加载的社交插件包装到iframe中。 FB API不会等待父窗口的window.onload，并且会提前渲染社交插件。

相关问题
最新问题