lyteShare.js high-performance social widget for your sharing pleasure

Based on last week’s performance analysis of popular sharing-services (AddThis, ShareThis and Lockerz/AddToAny) I decided to continue working on my high-performance & privacy-respecting but rather ad-hoc lyteShare alternative. The result is a 1.6Kb JavaScript file (or the non-minimized version here) that, upon being included in a HTML-file, looks for a div like this one:
<div class="lyteShare twitter googleplus facebook"></div>
and adds sharing-buttons for Twitter, Google+ and Facebook to that div (Linkedin, Yammer and Tumblr are also supported). You can see lyteShare.js in action on this test-page. The test result is great when compared to that of the big boys;

ShareThisAddThisLockerz/ AddToAnylyteShare.js
Document Complete0.677s0.487s1.352s0.364s
Start Render0.715s0.279s0.304s0.275s
Fully Loaded1.507s3.718s1.407s0.596s
Full Download size70 KB384 KB 111 KB9 KB
WebPageTest URLsharethis resultaddthis result lockerz/ addtoany resultlyteshare result
3rd party tracking?yes yes yesno

Now the question is; does the world really need yet another social sharing widget solution, even if it is easy, fast & not a vehicle for 3rd party behavioral web tracking? Does the world (and this blog) even need social sharing widgets at all?

Sharing widgets harm your website’s performance

[UPDATE: I reworked lyteShare into a standalone javascript-thingie]
Doing Web Performance can be so easy, really! I was asked to do a performance analysis of a new website and one of the things I didn’t like was the fact that the footer contained social media sharing buttons using the ShareThis widget. I’m not a fan of sharing widgets in general, as they tend to slow webpage loading and rendering down and as they almost invariably come with “3rd party tracking” for behavioral marketing purposes.
So why not do a quick comparison between a simple page with ShareThis, AddThis, AddToAny/ Lockerz share and one which uses inline javascript to render the buttons? For that purpose I quickly created lyteShare, an inline JavaScript thingie that dynamically adds the Facebook, Twitter and Google Plus sharing buttons after the load event has been fired. I’m not going to bother you with code (but you can look at the page’s source here if you want)  it’s probably far from perfect and it sure isn’t pretty, but it works and the tell it all.

ShareThisAddThisLockerz/ AddToAnyinline JS (“lyteShare”)
Document Complete0.677s0.487s1.352s0.283s
Start Render0.715s0.279s0.304s0.298s
Fully Loaded1.507s3.718s1.407s0.500s
Full Download size70 KB384 KB 111 KB7 KB
Test Reportsharethis resultaddthis result lockerz/ addtoany resultlyteshare result
3rd party tracking?yes yes yesno

So yep, ShareThis, AddThis  and AddToAny/ Lockerz (and all sharing widgets really) are performance-hogs that also track your visitors’ every move while offering little or no added value to what anyone could do with some simple JavaScript (or server-side code, for that matter).
Conclusion: if performance is of any importance for your website (and it should be), you really have to avoid using 3rd party widgetery!

Bug and feedback driven development

I’m not a developer, I’m just a random guy who was lucky enough to be around when the web started to happen, back in the nineties. And over the years I might have learned a bit about web development, but still I’m not a real developer. And yet, there I am with two WordPress plugins, fiddling with PHP and JavaScript. I’ll let you in on what’s not really a secret; I’ve made some ridiculous mistakes while coding those plugins. Trial and error, you know. Testing, fixing, releasing and getting feedback. Especially getting feedback!

Real users telling me it doesn’t work, asking for extra features or making proposals to make it better overall, that what I thrive on. The latest example; JavaScript namespaces. Not being a developer means that I know as much about coding patterns as I know about cows. I just hit the keyboard real hard and hope the browser understands what I throw at it. Until a good friend told me to use JavaScript namespaces, to avoid conflicts with other people’s JavaScript. And a week later someone wrote my software just didn’t work any more and I had to start digging and found a JavaScript conflict that was introduced with a new version of AddThis

And those are the moments one grows, as a developer; you start searching for information about scope, anonymous functions and namespaces. You try, it doesn’t work and you dig some deeper, until you stumble on a great question and answer on Stack Overflow with a link to a very detailed article about JavaScript coding patterns. So you go back into ‘vi’ and start changing the code once again and than all of a sudden you have a working version, which your Polish user confirms fixes the problem and you learned a lot while bugfixing.
So kudo’s to all you guys & girls for the great feedback, you rock! Here’s WP YouTube Lyte version 1.1.3 to thank you.