The True Cost of Adding Social Buttons

AddThis Button SelectorA cost, for adding social buttons to your website? Matt you’ve lost the plot…. or have I?

I wrote an article last year because I was horrified that the Facebook Like buttons are actually adding 84Kb, or in time 1.340 seconds to the page load time of this site. In this article, I look at the social sharing buttons again, but in more depth and identify the weight behind them.

By adding the Facebook, Twitter, Stumbleupon, Digg, Google +1, Facebook Like buttons and so on… you’re adding download weight to your pages and while they might look great and you might put a tick in your mind that you’ve got the social side licked, however… What is the true cost of adding the social buttons to your website?

It’s also worth noting that very shortly you should expect new Facebook buttons to be appearing, called “Want one” and “Own”, the Facebook Like button never really ported to well eCommerce and we’ll soon be seeing these plastered everywhere.


Tools Used

For this exercise, I am going to be using the following tools:

    I freely admit I’m a data freak and a website like this, really does it for me. For the purpose of this article I’ll be using it to identify the resources pulled on page loads. You’ll also find this site exceptionally useful for checking your page loading times as a whole.The data used for the majority of this article comes from this test: 
  • Excel
    The reports that the WebPageTest site creates can be copy/pasted to excel, this is what I’ll be using to filter the results.

Your mileage with these figures will vary upon many factors, such as location and server load. I’ve tried to keep as many aspects that I can consistent across the tests, but obviously things will vary. Felt I should point this out early on.

The use of the IFRAME tag for the majority of these sharing buttons does mean that your website page will continue to load while the external resources are being loaded, sometimes long after the website page has rendered. But my point is, they’re still being downloaded!

Let’s dig in and see what they’re like.

Facebook Social Button

In the previous article, I found that the Like button I was using was accounting for 84.4Kb to the page weight and taking over a second to the final page load time. A screen shot of this is below.

Facebook Download Data

Since then I swapped the button to a different one using a the ShareBar extension to WordPress and its this button set I’ll be looking at in this article and you’ll see them either on the left or at the top of this article (feel use them, if you’re finding this article helpful).

While the button itself is now in an IFRAME tag, which means it’ll load outside the main page and is not classed as page weight, the initial inclusion of the Facebook like button on the site is 6.9Kb and is loaded twice, for a total of 0.142 seconds.

So this is a vast improvement on the earlier article where I found it was pulling in a huge amount of overhead, however we must not forget that even though, this is in an IFRAME, it’s still being downloaded by the user.

So looking at this for the actual button in question in a separate test reveals that the browser is actually downloading a further 61Kb of data and takes around 1.229 seconds to fully load. This is shown in the screenshot below.

The full test results are here:

Interesting results so far as we’re getting close to the original 84Kb that I found last year. Lets see how the other buttons fair.

Twitter Social Button

The large twitter button is also not without a fair amount of page weight as well. Using the filters in excel from the previous test, we can see that its accounting for 52.5Kb of bytes downloaded and takes 0.431 seconds to load.


The Twitter sharing button also uses an iframe and we look at this as a separate resource at this page test  we can see that the iframe contents are 16Kb and take 0.720 seconds to load. So that’s an extra 16Kb for the browser to download, on top of the original 52.5Kb, yikes!

Still amazed that these buttons are so top heavy? Keep reading, it gets better!

Google Plus Social Buttons

The social buttons for Google Plus One are now becoming very popular and as they work on integrating businesses, we’ll start seeing a lot more of these. The bytes downloaded for the Google Plus button in the test is 22.3Kb and the time take is just 0.31 seconds.


Don’t get too excited just yet… Again the Google plus button is in an IFRAME, but the contents of the IFRAME still need to be downloaded and guess what… this one is at 69Kb and takes 1.607s seconds to load! Test results are in a screen shot and the test results are here

Google plus one button iFrame Test

Yea, that was deceptive, the Google Plus button has the lightest include so far, but looking at the total weight of Kb downloaded, 69Kb is monstrous and again I’d like to point out that the browser is having to download this content even after the main page has loaded.

Digg Social Buttons

Now it’s time to look at the very popular Digg social buttons for sharing. I might be techy, but I am frankly unsure why its being reported that it took 0.07 seconds to load just one file and the others have no time. If you know why, let me know in the comments box below!

However, this button is coming in at 9.9Kb to load the shell of the button and apparently 0.07 seconds to load it. Although I feel this value is incorrect.

Digg social button size

Not too bad so far, so let’s take a look at what it loads. This one was a little tricky to nail down, as unlike the other buttons so far they’re using iframes, this one is using a javascript include to bring the other elements in and to test this I have take the chunk of HTML & JavaScript that is used to load the button, put it on its own page and then page speed tested that by itself (I WILL find the weight of this button!).

Digg social button speed test

The page test & results are here and as this is a separate page, the results are slightly different as we need to remove the TTFB and the page from the sum of the components. The button resources come in at a total 9.4Kb of assets, with the png image taking up the majority of this weight at 5.3Kb.

Again I don’t know why the time taken to download the resources is not appearing in the test, but out of all the social buttons tested by far, at a total of 9.4Kb this is by far the lightest button!

Stumbleupon Social Button

This button is back to using a script file that weights just 0.7Kb, a fraction of a second to load and an IFRAME.

Stumbleupon share button File Size

Again lets look at the iframe weight by itself in its own test and we find that this button comes in at a very palatable 5Kb, however sucks at a load time of 0.812 seconds.

Stumbleupon Sharing Button speed test

AddThis Social Buttons

AddThis Button SelectorThe last button that I am going to test as part of this article is the “AddThis” button. I’ve chosen this button on top of the other ones I use because this tool can be seen as a quick fix for websites.

I’ve chosen the middle set of 3 options for icon size and also the generic code for “A Website”, obviously if you’re using smaller or larger buttons and for a different platform, your actual results will differ, but for a ball park figure this will be adequate.

On the first page load for the test file I made, I can already tell this one is going to lag badly. I’m on 50Mb broadband and the page lagged for ~1 second, thats not a good sign!

And… I was right. Again I need to remove the TTFB (Time To First Byte) from the equation, but on first impressions 124Kb is a whopping amount of data to be downloading.

AddThis Social Buttons Test

I’ve pulled the results out into excel as shown in the screen shot below:

AddThis Social Buttons Speed Test

The time take is incorrect again, however its interesting to see that when we sum the bytes downloaded, that we’re coming in over the original page weight at 125.2Kb. Eitherway this social set of buttons is the largest so far.


I’ve delved into the truer weights of loading these social buttons to help you understand that adding these buttons do come with a cost attached to them. While many of these use iframes to pull in the data from the external sites and don’t count towards to page load time to get the page loaded in the clients browser, they are still being downloaded and add to the true total weight of the page.

I feel its also worth pointing out that with the majority of the buttons tested, they are using content delivery networks, which will help with the delivery speed of the data across the globe. Also the scores from the testing sites were indicating clearly that the providers of these buttons have highly optimised systems to deliver the content, with most of them scoring A’s for each mark and of course, browsers do cache these data files, so if a user has been to another site and downloaded the sharing buttons, the weight is much less as the browser as the files in its cache.

The AddThis set of social sharing buttons might be the largest of them all in this test, however to be fair here, you’re unlikely to have both the AddThis buttons AND the other buttons separated on your pages.

So looking at the results as a whole, an aggregated tool such as AddThis (which is free) could offer a huge benefit to your website visitors when compared to loading each social sharing button separately.

Questions for You

For me personally, I’m dropping the stumble upon sharing button, but keeping the others on this site until I have the spare time to look at adding an aggregated option in combination with the ShareBar features as I’d need to style it heavily to get it to appear how I would like it to appear (vertically and horizontally).

So my questions for you are:

  • Did you know these buttons add considerable page weight to your website pages?
  • How many sharing buttons do you use?

Facebook Like Button = 84Kb or 1.340 Seconds?

First off, I’ll openly admit I’m pretty anally-retentive when it comes to page load times and tweaking WordPress to get the most out of it. So the following, who just want a ‘button’, have your button. For me, 84Kb is crazy.

I’ve since delved into the this topic of the social buttons and you’ll find the deeper analysis of The True Cost of Adding Social Buttons insightful, as a very common one is over 120kb! You can read the full article here.


Yes, thats right, to include the Facebook like button on the right of the site, its downloading 83.4Kb of data just to show this single button. To me that’s just crazy-ness!

Facebook Download Data

From the sheet above you’ll see the breakdown of assets that are being pulled from facebook domains. The first object is the FB icon and can be ignored and is not included in the sums.

The red sum of 1340, is in milliseconds, or in English, 1.34 seconds. So already you must be think, holy mother of god, an extra 1.34 seconds to load this little button? But then we realise why, by summing the actual weight of these objects, we take a whopping 83.4 KB (kilobytes or one thousands of a megabyte) hit and this explains why it takes so long.

I’ll save the full explanation of why I’m doing in this spreadsheet and how I get the data for a later article, for now I have more pressing articles & videos that need to be churned.

Good Bye Button!

Yep, after that, the button is off, I’ll swap it with a png or gif image that links directly to the facebook page (which is here by the way).

Or Maybe…

I’m just feeling guilty for including 32Kb for the JQuery file to make the scrolling banner on the homepage and are looking for stuff to trim to warrant its inclusion, lol!

My Goal

Currently this site runs on about 75 item requests for the homepage, my target for the next few days is to get this to 50. This should take a cool 50 extra requests off the site (as one request to the server and one to send it back again) and I have the mental goal of getting in under the 4second mark consistently.

Why Am I So Crazy for Shaving KB and Milliseconds?

The facts speak for themselves, here is a quote from (full article here)

According to the findings of the surveys conducted by Lightner, Bose and Salvendy (1996) and the GVU (Graphic, Visualization and Usability) Centre at Georgia Institute of Technology (GVU, 1998), long download times have always been a major problem experienced by Web users. The survey by Pitkow and Kehoe (1996) also indicates that the most widely cited problem with using the world wide web was that it took too long to download web pages (i.e. 69% of respondents cited this problem).
For e-commerce sites, web loading times are even more crucial than other sites. It has been found that a delay of microseconds can potentially cause a significant loss of revenue. Tests at Amazon revealed similar results: every 100 ms increase in load time of decreased sales by 1% (Kohavi and Longbotham 2007). Google discovered that a change in a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006).

Then take a watch of this interview “Why CIOs need to care about web speed” which I tweeted this morning.

Final Thoughts

Speed Limit InfinityHow can I even dare suggest to a client that they need to clear and optimise their website up if mine is not up to scratch?

Dropping 84Kb and a whopping 1.34 seconds to page load time is a massive score in any ones book. Yes, as with everything its a fine balance between functionality, usability, novelty and speed, but sometimes, I drawing the line is needed and I’m drawing it here!