8 ms·
Tell HN: Your social widgets are losing you visitors right now
Recently a lot of sites are getting slow for me. The reason? They add a lot of social submit widgets that use non-async scripts.
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>
Replace the first part with your own code instead of WhitePostsCom one.
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 -->
StumbleUpon? Adapt it from the above codes.
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 really. You can't fix Twitter's and Facebook's software and servers, but you can let your visitors see your site without depending on how good do engineers at those companies do their job.
P.P.S. There is a good question in comments about how to diagnose your own site's problems: http://news.ycombinator.com/item?id=1771755
Problematic hosts list (the srcs that cause sometimes huge slowdowns for me) - just in case you need it:
widgets.digg.com
platform.twitter.com
static.ak.fbcdn.net
www.stumbleupon.com
i.ixnp.com
- anthony_franco 16y agoThis is really good advice. I'm surprised these big sites aren't using something like CloudFront to serve their files.
- rarestblog 16y agoWell, they kind of do. It's just that sometimes their CDNs have serious hiccups and ALL sites that use non-async code are affected (when they shouldn't be). I'm really surprised at Twitter. They have good engineers, why are they giving you non-async code, when the above code does the same thing exactly?
- naner 16y agoIn general I find these buttons obnoxious as hell (they are tasteful on some sites like the NYTimes). This just adds insult to injury.
- carbocation 16y agoOr perhaps this adds injury to insult.
- donw 16y agoI wonder if injuries and insults commute...
- marcuswestin 16y agoMeebo made a presentation at Velocity this year about truly asynchronous loading, among other performance secrets of the meebo bar. (FF can still block using the suggested technique) Well worth the watch: http://www.youtube.com/watch?v=b7SUFLFu3HI http://www.youtube.com/watch?v=b7SUFLFu3HI
- duncanj 16y agoAre the delays in Russia due to a satellite? Those seem like very long delays. I am usually annoyed by 5-15 second delays in the US.