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:
- understand what all this bloated code is doing across all social networks?
- trust that all social networks have protocols to prevent indirect or deliberate attacks from internal employees and external crackers?
- test all code on all devices when it changes?
- 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…
Craig BucklerCraig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
