Tell HN: Your social widgets are losing you visitors right now

If you see a substring <script src="http:// or <script src="https:// in your HTML source - you are killing your site slowly.

Using Twitter's official ReTweet button? You've slowed your site down by 60 seconds per each page (I don't know how many people are affected by this hiccup that lasts more than 5 days now for me, but you can easily fix it for everybody, see below)

Just to be clear. I'm on 35Mbps line in Russia near Moscow (4.3MBytes/s - very fast! 4ms ping to national traffic exchange point in Russia).

Yet some sites load up to 2-5 minutes for me? Why?

According to Chrome Dev Tools I receive main blog content, including all images within 1-2 seconds. (It's a 35Mbps!), but I don't see anything from your site on screen (even though it has finished loading), because...

"platform.twitter.com" responds in 49-62 seconds! Uses <script src="http://... for their "retweet" button. Your site is STUCK until "platform.twitter.com" loads (1 minute).

Facebook's CDN responds within 30-50 seconds. The site doesn't load until it's loaded.

"www.stumbleupon.com"'s button loads in 20 seconds.

I'm not sure what the problem is, but I can tell you for sure - it takes minutes to load some sites with those buttons, it takes less than a blink after I add "127.0.0.1 platform.twitter.com" and others to /etc/hosts (that's not a way to solve it, it's a way to diagnose the problem, see below for solution).

Many of you use a lot of those buttons in hope that they will bring you visitors. But while they load - they lose you visitors that have to wait 2 minutes for your page to load.

WordPress' social submit plugins are often have the same effect on your site.

The solution? Use async code and ask your plugin developer to move to async code.

It's not some futuristic HTML5 goodie that works only in modern browsers. It works everywhere.

Facebook has async code - use it! Google Analytics has async - use it!

Twitter doesn't give out async, but it's easy to do it, based on FaceBook and Google Analytics code:

  <a href="http://twitter.com/share" 
  class="twitter-share-button" data-count="horizontal" 
  data-via="WhitePostsCom">Tweet</a> 
  
  <script> 
    (function() {
    var src = document.createElement('script'); 
    src.async = true;
    src.src = document.location.protocol + '//platform.twitter.com/widgets.js';
    document.getElementsByTagName('head')[0].appendChild(src);
    }());                        
  </script> 

StatCounter doesn't give async, adapt it from the code StatCounter gives you: (There was a day when StatCounter didn't load in 2 minutes! Your site is stuck again if you don't do async)

  <!-- Start of StatCounter Code -->
  <script type="text/javascript">
  var sc_project=[YOUR CODE HERE]; 
  var sc_invisible=[YOUR CODE HERE]; 
  var sc_security="[YOUR CODE HERE]"; 
  (function() {
      var ga = document.createElement('script'); 
      ga.type = 'text/javascript'; ga.async = true;
      ga.src = document.location.protocol + '//www.statcounter.com/counter/counter.js';
      var s = document.getElementsByTagName('script')[0]; 
      s.parentNode.insertBefore(ga, s);
  })();
  </script>
  <noscript><div
  class="statcounter"><a title="web analytics"
  href="http://statcounter.com/" target="_blank"><img
  class="statcounter"
  src="[YOUR CODE HERE]"
  alt="web analytics" ></a></div></noscript>
  <!-- End of StatCounter Code -->

Seeing someone asking you to insert '<script src="http://' into your code? Tell them to do better engineering and stop slowing down your site.

P.S. The reasons for hiccups of Twitter and FB's CDN might be poor peering, bad servers, anything real...