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

我正在创build一个简单而快速的网站，我正在尽可能地优化网站。我注意到社交媒体button正在减慢网站的速度。我包括Facebook Like Button，Twitter Button和Google+ Button。所以我跑了几个testing：

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

在这里输入图像说明

网站与社交媒体button，加载时间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>

所以我尝试了几件事情来加载这些社交button，而不会减慢网站加载时间。

通过JavaScript在一秒之后加载button：

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

这没有帮助，button没有正确加载，他们正在窃听。

文档准备就绪后加载button：

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

这也没有帮助。 button加载得很好，但网站加载时间仍然> 1.00秒。

我正在用尽想法。任何方式来加载他们没有减慢网站？

PS。在这些testing中使用了Chrome的页面加载时间插件

解：

感谢CodeMonkey的回答，我最终通过在加载整个页面之后加载社交button来解决这个问题。我将必要的JavaScript代码（用于社交媒体button）移动到一个单独的文件中，以使我的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：

加载时间

你可以试试

 $(window).load(function() {

代替

 $(document).ready(function() {

所以它会等待，直到你的图像和一切都已经加载。

如果这没有帮助，那么我build议让他们只出现在hover。有一堆静态图像/ CSS精灵，当用户hover在他们身上时被replace。

如果你不需要额外的步骤，并且你有服务器访问来安装模块，你可以尝试谷歌的mod pagespeed来推迟你的javascript https://developers.google.com/speed/pagespeed/module/filter-js-延缓;

如果您没有服务器访问权限，您可以尝试CDN路由，Cloudflare的火箭加载器非常有趣，我也在类似的原因testing它，看到〜33％的速度增加http://www.cloudflare.com/function的优化;

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

你可以尝试像这里更简单的oldschool替代schemehttp://zurb.com/article/883/small-painful-buttons-why-social-media-bu

或者看看像http://www.addthis.com/或http://www.sharethis.com/这样的服务是否能更快地为你工作;

当然，这个房间里的大象就是在页面上有3个主要的社交媒体button，并且只花费你一秒钟的时间 – 可悲的是，这似乎相当不错！他们是看似复杂的button，似乎并没有得到很好的优化，谷歌pagespeed的见解find了一些抱怨与他们所有的iirc。

由于您正在采取100％+的速度命中，我会build议一些A / Btesting，看看你是否真的需要他们，也就是说，你的网站是否减慢stream量？有分享button带来更多的stream量，以保证他们的存在？

插件（社交媒体button）加载时间取决于多种因素，包括（但不限于）：

您的服务器的响应时间（插件不会加载，直到您的代码也告诉他们。）
用户的互联网速度（在这种情况下，你的）
到社交媒体网站服务器的距离（例如，Facebook的服务器可能位于大陆的另一边，造成延迟）
社交媒体网站的加载时间

这意味着除了使代码尽可能优化之外，您可以做的不多。

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

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

如果这太多了，你想延迟SDK的下载或运行（一旦运行就加速），这里是我的build议：

首先，或者使用像jQuery这样的库，它提供了一种以跨平台方式挂接DOM的方式。这是一个实现。一旦你有了“DOM ready handler”，你应该做以下两件事之一：

将JS SDK加载代码移动到您的DOM就绪处理程序中。
从FB.init（…）中取出xfbml：true，如果有的话（在这种情况下，你不需要），从SDK URL中取出xfbml = 1。这可以防止社交小部件被立即parsing和初始化。然后，在您的DOM就绪处理程序中调用FB.XFBML.parse（）。请参阅此处的文档以了解该方法。性能最好的做法是专门调用FB.XFBML.parse(document.getElementById(''))这样SDK不会浪费时间去检查整个DOM。

虽然这个问题很老，而且询问的人可能不会看到我的回答，但是对于有同样问题的人来说，这是一个select – 只要你不介意牺牲显示喜欢/份额等的数量。

您可以简单地添加将访问者发送到实际社交networking的链接，并使用预先填写的url和说明打开共享窗口。

该代码非常简单，您可以使用任何图像或文本，这将使您更容易将button与网站的devise。

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

只需简单地用您的网站和文本的URLreplaceURL 。

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

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

在加载社交媒体的脚本里面，放置“推迟”。

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

尝试使用社交初始化脚本的asynchronous加载：

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

大多数主要的社交媒体button都提供了一个asynchronous版本的JavaScript。您只需在官方文档页面上进一步滚动即可。

尝试把你喜欢的button放入可重复使用的iframe中，并将URL传递给喜欢的。

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

如果你来这里find解决scheme如何更快地加载Facebook的社交插件 – 例如，如何呈现之前window.onload（）事件发生（由于networking上的WiFi /大图像在网页上/ / …），你可以尝试我的解决scheme：

 window.fbAsyncInit = function () { dispatchEvent(new Event('load')); }

fbAsyncInit会在facebook sdk js文件被加载（例如快速）之后立即被调用，并且您可以使用自定义加载事件派发来伪造社交button以在较早的时间（在加载其他资源（如图像）之前）进行渲染。根据您的其他JavaScript代码/库，在早期触发onload（）事件时要注意后果。

另一个解决scheme是将你的社交插件用sdk加载到iframe中。 FB API不会等待父窗口的window.onload，并且会提前显示社交插件。

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

如何在我的网站上添加Facebook分享button？

是否可以为Facebook的社交插件设置stream畅的宽度？

给定的URL不被应用程序configuration所允许

如何使Facebook的评论小部件stream畅的宽度？