社交媒体按钮减慢网站加载时间 [英] Social media buttons slow down website load time
问题描述
我正在创建一个简单而快速的网站，我正在尽可能地优化网站。我注意到社交媒体按钮正在减慢网站的速度。我包括Facebook Like Button，Twitter Button和Google+ Button。
所以我跑了一些测试：
$ b
网站没有社交媒体按钮，加载时间0.24s：
网站带有社交媒体按钮，加载时间为1.38秒： 以下是我的代码： 因此，我尝试了几件事情来加载这些社交按钮，而不会减慢网站加载时间。 通过JavaScript在一秒钟延迟后加载按钮：
pre> < 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）;}（文档，'script'，'facebook-jssdk'））;< / script>
< div class =fb-likedata-href =http://facebook.com/textsearcherdata-width =150data-layout =button_countdata-show-faces = falsedata-send =false>< / div>
<！ - TWITTER - >
< a href =https://twitter.com/shareclass =twitter-share-buttondata-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 '时，如果是{js = d.createElement（一个或多个）; js.id = ID; js.src = p +（d.getElementById（ID）！）'：//platform.twitter.com/widgets.js '; fjs.parentNode.insertBefore（js，fjs）;}}（document，'script'，'twitter-wjs'）;< / script>
<！ - G + - >
< div class =g-plusonedata-size =mediumdata-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）;}）（）; < /脚本>
< / div>
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。使用
如果你没有服务器访问权限，你可以尝试CDN路由，Cloudflare的火箭加载器非常有趣，我正在测试它在类似的原因在分钟，并看到约33％的速度增加 http://www.cloudflare.com/features-optimizer b
$ b
如果这样做没有帮助，你可以尝试使用粘贴页面底部按钮和使用CSS重新定位的旧习惯，以使它们看起来更高;这样你可以让他们在你想要的地方，但他们似乎并没有干扰页面加载时间。
你可以尝试更简单的oldschool替代方法，如 http://zurb.com/article/883/small-painful-buttons-why-social -media-bu
或查看 http：// www .addthis.com / 或 http://www.sharethis.com/ 为您工作更快
当然，在这个房间里的大象是在页面上有3个主要的社交媒体按钮，并且仅仅花费你一秒钟的时间 - 很遗憾，看起来相当不错！他们是看似复杂的按钮，似乎并未得到很好的优化，谷歌页面速度见解找到了一些可以抱怨的东西他们的iirc。
由于您的速度达到100％，我会建议进行一些A / B测试，看看您是否真的需要它们，即针对您的网站是减慢流量减少？是否有分享按钮带来更多的流量来保证他们的存在？
I'm creating a simple and fast website, and I'm trying to optimize the site as much as I can. I noticed that social media buttons are slowing down the website by quite a lot. I'm including the Facebook Like Button, Twitter Button and Google+ Button. So I ran a few tests:
Website without social media buttons, loading time 0.24s:
Website with social media buttons, loading time 1.38s:
Here is my code:
<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>
So I tried few things to load these social buttons without them slowing website load time.
Loading buttons after one second delay via JavaScript:
setInterval(function(){
$("#social").html("<!-- FB --><div id="fb-root"></div>.....");
},1000);
This did not help, buttons didn't load up properly and they were bugging.
Loading buttons after document is ready:
$(document).ready(function() {
$("#social").html("<!-- FB --><div id="fb-root"></div>.....");
});
This did not help either. Buttons loaded just fine but website load time was still >1.00 seconds.
I'm running out of ideas. Any way to load them without slowing down website?
PS. Used Page load time plugin for chrome in those tests
SOLUTION:
Thanks to CodeMonkey for his answer, I eventually solved this problem by loading social buttons after entire page is loaded. I moved the necessary JavaScript code (for social media buttons) in a separate file to make my HTML/markup little bit cleaner.
JS (in a seperate file, 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>
So after this load timings were normal again, 0.24s:
You could try
$(window).load(function() {
instead of
$(document).ready(function() {
so it will wait until after your images and everything has loaded.
If that doesn't help, then I would suggest having them only appear on hover. Have a bunch of static images / CSS sprites, that get replaced when the user hovers over them.
If you don't want that extra step, and you have server access to install modules you can try google's mod pagespeed to defer the javascript for you https://developers.google.com/speed/pagespeed/module/filter-js-defer
If you don't have server access you can try the CDN route, Cloudflare's rocket loader is very interesting, I am testing it at the minute for similar reasons, and see ~ 33% speed increase http://www.cloudflare.com/features-optimizer
If that doesn't help you could try the old favourite of sticking the buttons at the bottom of the page and repositioning with CSS so they look higher up; that way you can have them where you want them but they don't seem to interfere with the page load time.
You could try simpler oldschool alternatives like here http://zurb.com/article/883/small-painful-buttons-why-social-media-bu
or see if service like http://www.addthis.com/ or http://www.sharethis.com/ work any faster for you
Of course the elephant in the room at this point is that to have the 3 main social media buttons on the page, and for it to only cost you a second - sadly seems quite good! They are deceptively complicated buttons that don't seem well optimised, google pagespeed insights finds something to complain about with all of them iirc.
Since you are taking a 100%+ speed hit, I would suggest some A/B testing to see if you really need them, i.e. for your site does being slower decrease traffic? Does having the share buttons bring in more traffic to warrant their presence?
这篇关于社交媒体按钮减慢网站加载时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
