Better Social Icons

I don’t know if you’ve ever noticed the Social Share box on a standard osCommerce, it looks like this:

2.3.4

2.3.4 Responsive

With the ability in Admin to turn on and off share links, which I’ll call “widgets”. So far so good.

What you probably don’t realise is that these “widgets” also load a lot of javascript. Which is OK, except for shoppers who are on a slow connection. Loading all that javascript does make an impact on site speed.

With zero widgets (tested on Samsung Galaxy product on a standard install of Responsive):

And with all widgets loaded (same product page):

Obviously that’s not a *massive* difference, but every single speed point matters in my opinion and so I set out to change things…first a little bit of history. Back in Feb 2015 I made this post at the osCommerce Forum in the hope it would kickstart a little project to make an alternative (better?) system for Social Sharing. Nothing came out of it – no surprise really as there are very few people who are pro-active left in that community – the only one who was a bit interested was user “Mort Lemur” who steered the conversation away from its intended target and onto “add this” which then toyicebear got involved in the discussion…

Back from history and into the present day…I revisited the idea…

Introducing the all new Social Sharing system…

It’s just like the existing system, but loads no crap. This means it has a downside “potentially less user friendly” but an upside “should be faster to load”. Let’s see – prior to writing this post I have not tested the speed – here is the result, compare this to the first speed test of 100/65/76 …

What can we learn from the speed results?

Mobile Friendliness drops from 100 to 97
This is due to the “tap targets” being too close to each other. Not a big deal and could easily be solved by spacing the widgets out using .css

Mobile Speed stays static at 65 and Desktop Speed stays static at 76
This is really really good, it means the new system is not sucking speed away from any users no matter which device they use to browse.

Conclusion

I’m very pleased that I was able to build up a system that saves a few points on speed compared to the official system of Social Bookmarking. In my opinion, the new system is far better looking than the official system and has as much usability. In addition, shop-owner can choose to have these links as a side-box as shown above, or as a product_info module…

And the best bit of all this: the whole system has no Core Changes! Just upload, and turn on!

So just what did it take to code all this?

1 new Box Module, can be put into the left or right column
1 new Product_Info Module obviously goes onto the product_info page
10 new Widget Modules; Digg, Email, Facebook, G+, LinkedIn, Pinterest, Reddit, StumbleUpon, Tumblr, Twitter

BOOM!

To back this up, I also tested via GT Metrix, which is a tool that is far from perfect but gives an indication of how the page is with regards to speed and loading…

With No Widgets loaded:

With the old Widgets system:

With the new Widgets system:

Look at the similarity between “none” and “new”.
Then look at the difference between “none” and “old”…

The widgets (old style with javascript etc) loads two whole seconds slower and costs an extra 0.5 megabytes of code!

Hold on a moment, let’s get a sense of perspective…

Most shops won’t load all the Widget modules. I suspect that if shops use the system, they use the following; Facebook, Pinterest, Twitter.

Even so, by changing to the new system…you can easily shave off a second per page load and a few hundred bytes…it is worth it, isn’t it?