The cost of sharing your website on social media

I built a webpage recently. It was mostly just SVGs and text, so I checked the total page size with developer tools and was pleased to discover it came in under half a megabyte. Efficiency and small page size! The Holy Grail of all frontend developers (it should be, anyway).

Then I remembered I had to add some social media sharing buttons. For historical reasons with the client, I chose Shareaholic's sharing buttons. Then I checked the page size again.

  • Initial size of page: 445 KB
  • Size of page after adding Shareaholic share buttons: 1504 KB

What. The. What.

What's going on?

Looking at the page size it's clear that Shareaholic is pulling in more than an extra 1MB of JavaScript, including jQuery 2.1.3, Angular 1.3.5, their own script to generate the share buttons and a mysterious script that after a bit of investigation turns out to be RequireJS. If you look at the DOM, much of this is pulled in inside a hidden iframe that gets appended to the end of your page.

Angular and jQuery together take up slightly more than 200KB and I'm surprised to see them both here - if you're using Angular every tutorial I've read tells me I shouldn't need jQuery as well. Shareaholic's own script takes up 264KB (ouch) and RequireJS is a whopping 531KB - and yes, all of these scripts are minified already.

How bad is this really?

Before we grab pitchforks and torches lets look at what impact this actually has on the page load time. After all, you can load scripts asynchronously these days, so it might not be too bad. For the following tests I ran the page with Chrome's download throttler set to 'Regular 3G' (750kb/s) to make the numbers clearer.

  • Without Shareaholic, the page loads in 6.04s.
  • With Shareaholic, it takes 7.29s.

That's an increase of around 20%, which isn't horrendous considering the reported page size has increased by around 200%, so there's definitely some sensible stuff going on, even if it doesn't look that way. Having said that, it's still a significant speed increase.

Hmmm

Let's summarise the problem - massive increase in page size, significant increase in page load time. All so someone can share your site on Facebook. Not sure I'm entirely happy with that.

I don't know why Shareaholic would need so much code to add some sharing buttons to a website. Writing custom sharing buttons takes up a minuscule of space but presumably they're including some kind of tracking and I don't know how much code that would take.

I've sent messages to Shareaholic twice asking for an explanation and have had no response. Their site is even full of sales jargon about how important site speed is to them (including this one where an employee even uses the word 'obsessed' to describe how important site speed is to them).

Poking around in the Shareaholics settings I have found that if you turn off 'Use trusted third party data services' in the analytics settings, the volume of scripts added to your page drops by 9KB. It's not much, but it's something. Maybe there's some other settings in there that could reduce it further, but I haven't found them yet.

Other people have noticed this problem. A lot of them are talking about the Wordpress plugin version (I'm using the regular 'add this line to your code' version). This guy mentions there being a problem but apparently had some joy in getting it fixed.

Conclusion

I'm trying hard not to blast Shareaholic for this behaviour because I assume/hope there's a reasonable explanation for all this. However, having had no response from them to my (entirely polite) inquiries, I'm not able to tell their side of the story. I assume that if I were to use more of their service the extra code would come in handy, but loading all of that stuff regardless of the extent to which I'm using their services seems like bad practice.

I'm therefore just going to build my own sharing buttons. Here's a handy site for generating the (single line of) code you'll need - Share link Generator.

Related

This article is tagged with