The Hidden Cost of Social Sharing

I recently worked on a small RWD site which was intended as a replacement for a multi-megabyte monstrosity. The original site had reached almost 3.5Mb in size, crashed certain browsers and was unusable on mobiles. I squeezed every byte out of the new site…

  • minimal, clean HTML5 was adopted
  • the only shim added was for HTML5 on oldIEs
  • the trend for clean, flat, square design reduced the quantity of CSS code and graphics
  • CSS3 transitions and animations were used in favor of JavaScript alternatives
  • CSS3 effects and a small set of webfonts replaced many images
  • JavaScript wasn’t necessary, but a little progressive enhancement was implemented without relying on a large library.

The result: a home page total of less than 300Kb and all other pages were less than 90Kb — that included all images and no code compression or minification. The site loaded quickly on all devices irrespective of connectivity.

The client loved it … but there was one thing missing: social network sharing buttons. I was indulged with several monologues from media marketing managers to the importance of these key elements on the modern web.

The Social Swindle

Social media gurus neglect to mention that very few pages go viral. For every internet phenomenon, there are billions of people and companies who have never achieved cult status. Adding social buttons to all pages seems a good idea, but no one is going to ‘Like’ your company’s ethical statement or ‘Share’ photographs of the CEO.

“Ahh”, claim the media masters, “but what’s the harm in making it easy to share content?”. I’ll give you a few reasons…

Bandwidth-Busting Buttons

Search for “Facebook like button” and you’ll soon find their useful Get the code tool. Fill in the details, copy ten lines of script, paste it into your page and it’s job done.

While it may look like a few insignificant lines, it’s loading various resources in the background. That tiny Facebook ‘Like’ button requires an excessive 270Kb of compressed code and several HTTP requests. Why? And let’s not forget the other popular social networks…

Facebook ‘Like’ button: 270Kb
Google+ Share button: 135Kb
Twitter Share button: 95Kb
LinkedIn Share button: 80Kb

Want all four? That’ll be 580Kb, please — or more than 10 seconds on a good mobile connection. Those tiny buttons were almost seven times larger than the pages I required them on.

Admittedly, some of the scripts will be cached in the browser because the user has visited another site using similar buttons. But that doesn’t equate to zero cost; the scripts must still be parsed and executed by the browser before it can download or render other content. Facebook even suggests adding their code immediately after the opening body tag — before any of your content is shown.

Who’s going to ‘Like’ a page which has become less responsive?

Testing Times

Several of the social buttons fail if they’re not added to a publicly-available web page. In other words, they won’t appear when you’re testing a site on your local PC or intranet. To ensure the buttons don’t break your layout, you must upload the pages to a live server — probably your real website. Do you put other code live before it’s tested?

Social Security

Would you permit any developer to access your site and do what they like? No? Social buttons insert JavaScript into your page and that code has the same rights as yours. It can do anything: replace content, deface images, hijack links, show advertising, redirect elsewhere, etc.

While none of the social networks would engage in such activity, do you:

  1. understand what all this bloated code is doing across all social networks?
  2. trust that all social networks have protocols to prevent indirect or deliberate attacks from internal employees and external crackers?
  3. test all code on all devices when it changes?
  4. know that all code will work on all browsers at all times? A single error raised by one of these buttons could prevent subsequent JavaScript execution and break your pages.

You Can Have Social Cake and Eat it!

Social networks only survive if they’re being used. They provide simple-to-use share buttons in order to become a more valuable resource and entice people to join. Your site may enjoy parasitic benefits, but don’t forget it’s the networks which have most to gain.

Fortunately, it’s possible to implement sharing buttons without the ludicrous bandwidth or security overheads. The techniques aren’t always well publicized, but I’ll illustrate how to do it my next SitePoint article…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Anonymous

    Craig, this article gives us a lot to think about. I build WordPress sites, and I use ShareThis. I wonder if they add all of that bloated code or if they have somehow trimmed it? On my design blog, the ShareThis buttons actually load last. The only thing that I make sure of is to disable their new tracking, because it adds a bunch of junk to the end of your Url and it makes your site load super slow. If you make sure to disable tracking, then it seems to load pretty fast.

    • Craig

      I did investigate some options such as ShareThis. They’re all different, but several appear to load a smaller widget then dynamically load social network scripts on demand. That may be a better option but you’re still at their mercy and they’re far more likely to add buttons (or advertising) you don’t want.

  • Anonymous

    A SMART article! I eagerly await your next post and your tips on how to deal with sharing buttons.

  • Paul

    You can easily-add Social Links without JavaScript.

    • Hendra

      If you just link it to Facebook/Twitter share URL, you can save those kilobytes, but yeah, I know what you mean. Opening to new tab to share isn’t fancy, and clients LOVE, LOVE popup social sharing :)

    • Craig

      Yes you can – and it will be covered in my follow-up article.

      However, few of them push the alternatives; probably because a JavaScript snippet gives them far more control and options.

  • brothercake

    And you know what — social media became big BEFORE the existence of share buttons. And would still be big without them. If I want to share something, I don’t need a button to do it.

    My personal tip is don’t have them at all. So maybe that adds inertia — maybe somebody is less likely to share something if they have to open a tab and go to Facebook manually, than just click a button — but maybe that’s not a bad thing. It won’t deter people who are genuinely engaged with your content, and maybe the rest is just noise anyway.

    • Craig

      I agree … although this particular client didn’t.
      That’s part of the problem: people expect to see the buttons even if they never use them.

  • vidya prakash murdan

    Gives lots of food for thought. How do you calculate the size of your homepage? Do you take the figure shown in the browser when the page downloads? Thnx

    • Craig

      Hi Vidya. There are plenty of tools; if I recall correctly I used “View Document Size” in Firefox’s Web Developer Toolbar.

  • Anonymous

    Craig, I share your thoughts on these totally bloated buttons. I saw page load time of 53s in analytics, and the average load time of one of my pages is 10 seconds… I am eager to wait for the next article on how to optimize these buttons.

  • Mourad

    I’m waiting for you next article :-)

  • Dave

    Thanks for bringing this to my attention, I’d never really thought about it before. I guess one way to trim the cruft would be to have a ‘fake’ social button that when clicked generates the real button and clicks it, but I suspect you have a better solution.

  • Anthony

    With new social APIs in browsers, and the fact that you can share directly from mobile browsers (with more flexibility in Android due to the loose coupling nature of the OS, than in iOS, admittedly), do you see that the need for actual “like/share” buttons in the page will reduce?

  • Jules Webb

    #1 page speed

    #2 social security—and not the kind you get when you grow up!

    #3 – read number 1 again

    Great Post! I love it when you write about things no one else is taking about.

  • Adam

    I’d love to push this idea even more about the benefit of the share buttons.

    I’ve noticed a trend that a lot of sites / companies seem to advertise Facebook and Twitter nearly as much as they do themselves. Which honestly i’ve never understood. Well actually I think I do understand that I think the addition of share buttons magically turns sites hip to most site owners (yeah, it doesn’t). Even sitepoint has so many share buttons you’d think it was a Facebook site. I select copy from the article i see a facebook icon, i hover over a comment here and i see a facebook icon, I’m in the textbox now and i see a facebook icon to the left of the reply button, i look at the footer and see a facebook icon. I don’t see any sitepoint branding as I’m typing this, nothing.

    That’s a problem folks! I’ve worked on sites that have the same issue. Giant Facebook or share buttons plastered all over the place. In the main nav and on the footer and in the content and on the product pages and on and on it goes. Now I’m not going to tell any client that this doesn’t make sense to me because I’d get the blank stare of “but that’s what everyone else is doing”. And when I was a younger developer I’d fight that battle, but I’ve be around the block now and the time isn’t right for that topic when talking to clients. If someone wants to pay to have another companies branding placed all over the page, so be it. I’ve even been asked to make them bigger… much, much, bigger.

    I’ve also heard the arguments that this adds a social element to X site/page. People love this! We have X amount of likes! I’ve asked how much money do you make from the likes? Little if anything is generally the response followed by the “people love it” and “you need social” comment. I’ve also almost never seen a local company market with social media in a compelling way if we’re being honest. It’s like the events/news section that is years out of date, or the blog that has nothing but fluff if it’s even current at all… and now the social, which is more fluff at best. Having seen this for over a decade I love the idea behind these concepts but it just never really works. I’m sure plenty of people will argue this and I’m sure some small businesses do a good job. But most (90% ?) don’t. Plus having a low number of likes just looks, sad. Something you shouldn’t have in a brand.

    Well what about the mid sized company that has a social/email employee on staff? Basically the same thing. Social keeps that person busy when not sending emails. Hopefully the revenue they bring in from social pays for them being there and sometimes it does. So it’s not horrible but if it wasn’t for the email revenue I’m sure they’d be gone. Yay email!

    Maybe I’m being too pragmatic here but I’m just not seeing social as the best thing to ever happen to the net. At least not enough to have several icons plastered all over the site.

    Ok internet, let me have it and tell me how i’m wrong. Flame On :)

  • D.

    I won’t use them for my personal site, but I’ve had people ask me about that first and actually want me to set up a facebook page for their company. I get the blank stare too when I tell them to promote their own instead of a SM net work that has over half a billion users. “But the don’t hear me though”…

  • José T. Guerra

    You can direct people to your Facebook page by just adding the url of that page with the FB icon and not using their code.

    • Craig

      Hi José. You can provide a Facebook link page, but that’s not the same as sharing. Sharing means the visitor will store a link to your webpage and publicize it to all their friends and followers.

      • brothercake

        Isn’t it the same? If you click the “Tweet” button on this page, for example, it links to a page on twitter.com with the content pre-filled in a textbox. So why not just define that href and put it in a static image link — what’s the difference?

  • Anonymous

    maybe you should give this a try:
    http://filamentgroup.com/lab/socialcount

    • Craig

      I did find that one and it’s certainly an option although it will load the social networking code in the background. It also depends on jQuery, a plugin, CSS and some backend PHP so it’s not as lightweight as it could be.

  • k

    Just link to an endpoint like facebook sharer.php if you’re that concerned…. i believe most social networks have social sharer endpoints… but what the analytics platforms like addthis offer, integrated with a tool like omniture you can see the various successes your campaigns may or may not be having on the various communication channels on the web.

    • Craig

      Thanks K. That’s exactly what I’ll be providing in my article this Wednesday.

      Are you really missing out on Analytics? After all, if a link comes in from Facebook, you’ll know it’s from there and your traffic will increase accordingly. You won’t necessarily know how many people shared that page, but sharing counters are vanity, link-throughs are sanity and increased revenues are reality!

      • k

        @Craig I’m a firm believer in analytics, they are the ‘written in stone’ facts of how your campaigns are doing, and if you are meeting conversion goals. I integrated social sharing as part of the communication channels that a region in our company is leveraging for promotions. The widgets were placed on micro sites, and the end points were used in e-mails, the end points were also placed on sliders on the main website. Using nifty campaign codes in omniture, and plugging into the addthis account, I was able to see shares and clicks each link was getting and if information was going viral or not. I believe that insight helps marketers to strategize more effectively and really perform multi-variant testing. News is being shared so fast on social networks nowadays, it seems to be the only way people are passing information around, so best to track it!! My 2 cents.. this report has interesting analytics by the way

        http://www.ritholtz.com/blog/2013/08/2013-social-mobile-statistics/

        • Craig

          Thanks K. I totally agree with you about analytics and, if necessary, you can add custom event handlers to your code to determine when a social link is clicked. My main point is: do your users and competitors need to see your sharing statistics?

  • Craig

    I think José was referring to a direct link to the company’s Facebook page or Twitter feed rather than implementing a share button which works as you describe.

  • José T. Guerra

    Yes, I don’t want to clutter my website with foreign JavaScript and other codes that may make my site vulnerable. So, I think a direct link to my Facebook page is all I need. I am looking forward to your article, Craig. These days it’s better safe than sorry.