Lazy Load Social Buttons with Socialite.js

69 Flares
69 Flares Twitter 38 Facebook 13 StumbleUpon 0 Google+ 0 LinkedIn 6 Buffer 12 Reddit 0 Pin It Share 0 Email -- 69 Flares ×

Today I had a fantastic day with the web team at Angie’s List. Angie’s List has been developing their site into an incredible resource library… and all the while they’ve continued to speed up their site. Their pages load at blinding speed. If you don’t believe me, pop up this page on Garage Doors.

The page incorporates images, video, and social buttons… and still loads in milliseconds. Comparing their site to mine is like racing a Prius with an F-16. They’re not done yet, either, always looking for ways to improve the customer experience and get the content found and shared.

We don’t have a full-time development team nor the resources of a public company, so our progress is a bit slower than Angie’s List. We do have an incredible host with WPEngine – utilizing their advanced caching and CDN, but we know there are still some things hurting us. For example, our images aren’t optimized. There are services out there that you can convert your images to a fraction of their size while maintaining their clarity… we’re looking at them.

As I was showing them our site, I cringed and hung my head as the page froze upon loading a social button. I think it was Facebook. Argh… a second or two later the button appeared and the rest of the page loaded. Ugh.

When I described the issue, their engineer immediately had a solution, socialite.js. Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event! Since socialite loads the buttons asynchronously, the document won’t hang while waiting for 50kb of social media.

Thankfully, there’s already a WordPress plugin that incorporates Socialite, called WPSocialite. Tonight I ripped out all my customized code for loading up buttons and implemented WPSocialite. I was able to customize the CSS and modify the buttons I wanted. I’m looking forward to some additional buttons being added in the future – like Buffer or Reddit… but this is perfect for now!

Related