A highly compressed responsive share floating bar

As web promotion revolves around advertising and social sharing, it’s essential to use the share buttons on your content. But there are many free offerings that just use too much resource for a simple button. Sharing services like AddtoAny and Sumo have huge overhead in terms of the content they need to load to show clickable 4-5 icons. They do provide more than just clickable icons with analytics and other features but is it a fair compromise to slow down your site for non-essential code. So we decided to code a minimal responsive sharing bar that is also responsive to changing orientation. Test it on an empty page here. Minimal-share-floating-bar

The AddtoAny share code builder is pretty easy to use and get going. However, the page.js file in itself is 23KB when downloaded without considering the images. The “load js” file for Sumo is 137KB without the images. Can you imagine downloading everything you don’t need for 1 or 2 features you do need?

Responsive Share.min on phone
Responsive Share.min on phone

Google has made it clear that speed optimizations are one of the ranking factors and more so why let your client download these over your content. You might say that’s not a pretty big deal, it’s just 137KB, we’ve moved past dial-up internet but the fact is they are javascript files. They are calculating everything from the device width, the options you’ve selected, the campaigns you are running and many more. This can put a toll on the browser which has to do this on the clients’ device. This is one of the reasons why some sites use more RAM and CPU than other lighter sites.

Our code is just 5KB with the default installation. The JavaScript and the CSS are compressed and we use super light SVG files from SuperTinyIcons. Also, the extra content needed for sites like Pinterest, “pinit_main.js“(17KB)  is only loaded after a user clicks on the button. The content doesn’t load the first time which saves requests and also saves size of your website.

And if you know just a little JavaScript/CSS/HTML you can create your own share icons in no time. There are a ton more icons stored in the “img” folder to get you going with many of the most popular sites.

I don’t consider this perfectly perfect as I’m still a novice in JavaScript but scraping off Sumo’s big file was a big improvement to sites overall speed and memory usage. If you have any suggestions then I will appreciate it.

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *