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

Question

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

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

网站有社交媒体按钮,加载时间1.38s:

这是我的代码:

<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.二手页面加载时间在这些测试中铬插件

---

解:

感谢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:

Answer 1

你可以试试

$(window).load(function() {

代替

$(document).ready(function() {

所以它会等到你的图像和所有东西都加载完毕之后.

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

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

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

如果这没有帮助,你可以尝试粘贴页面底部按钮并使用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见解找到了一些与他们所有人抱怨的东西.

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

Answer 2

虽然这个问题很老，问的人可能不会看到我的回答，但对于有同样问题的人来说，这里有一个替代方案——只要你不介意牺牲点赞/分享/等的数量。

您可以简单地添加将访问者发送到实际社交网络的链接，并打开一个带有预填充 URL 和描述的共享窗口。

代码非常简单，您可以使用任何您想要的图像或文本，这将使按钮更容易适应您网站的设计。

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

只需将URL替换为您网站的 URL，并将TEXT替换为简短的描述。

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

我还写了一篇涵盖许多其他社交网络的博客文章。