Question

The task sounds trivial but bear with me.

These are the buttons I’m working with:

• Google (+1)
• Facebook (Like)
• Twitter (Tweet)
• LinkedIn (Share)

With a little testing on webpagetest.org I found that it’s incredibly inefficient if you grab the snippet from each of these services to place these buttons on your page. In addition to the images themselves you’re also effectively downloading several JavaScript files (in some cases multiple JavaScript files for just one button). The total load time for the Facebook Like button and its associated resources can be as long as 2.5 seconds on a DSL connection.

Now it’s somewhat better to use a service like ShareThis as you can get multiple buttons from one source. However, they don’t have proper support for Google +1. If you get the code from them for the Google +1 button, it’s still pulling all those resources from Google.

I have one idea which involves loading all the buttons when a generic looking “Share” button is clicked. That way it’s not adding to the page load time. I think this can be accomplished using the code described here as a starting point. This would probably be a good solution but I figured I’d ask here before going down that road.

Answer 1

I wouldn’t worry about it, and here’s why: if the websites in question have managed their resources properly – and, come on, it’s Google and Facebook, etc… – the browser should cache them after the first request. You may see the effect in a service where the cache is small or disabled, but, in all likelihood, all of your clients will already have those resources in their cache before they ever reach your page.

And, just because I was curious, here’s another way:

Here’s the snippet of relevant code from StackOverflow’s facebook share javascript:

facebook:function(c,k,j){k=a(k,"sfb=1");c.click(function(){e("http://www.facebook.com/sharer.php?u="+k+"&ref=fbshare&t="+j,"sharefacebook","toolbar=1,status=1,resizable=1,scrollbars=1,width=626,height=436")})}}}();

Minified, because, hey, I didn’t bother to rework the code.

It looks like the StackOverflow engineers are simply calling up the page on click. That means that it’s just text until you click it, which dynamically pulls everything in lazily.