Social widgets on websites that don’t harm performance?

[croydon86]

Hi guys

I am about to implement a website for a client who is active on social websites, and would like to display some social activity on his website, however I know that social API’s can cause slow loading times.

Main ones to to include…

1) Facebook ‘like box’

2) Recent twitter tweets

3) Recent Instagram photos

What would be the best way to implement these, so that the performance is not affected?

Are there alternatives to these widgets so that they only load once they’re interacted with?

Or are these just best avoided and use simple social buttons instead to link to the sites?

Any advice appreciated.

[TreeRoot]

Implement the social icons asynchronously so that it doesn’t affect load times.

INDEPENDENT JAVASCRIPT:

http://socialitejs.com/
https://github.com/dbushell/Socialite/
– This loads the stuff async, and if you visit the page you’ll see it probably accomplishes what you’re looking for. It even has lazy loading capabilities. Note: be mindful of its lack of updates (3 months since the last one).

http://addthis.com
– I’m sure you’ve heard of AddThis. It provides a bunch of share networks and analytics, so you can see what’s being shared, when. Downside, is that it doesn’t load async by default. For async, you’ll have to implement this optimized version:
http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance

WORDPRESS PLUGINS:

http://wordpress.org/extend/plugins/wpsocialite/
– Same as the Socialite javascript above, but wrapped in a WordPress plugin. This plugin doesn’t appear to be wholly dependent on the slow updates of the official Socialite JavaScript it’s based on. It seems to attempt corrections on its own–sort of like a forked version.

http://wordpress.org/extend/plugins/rtsocial/
– rtsocial is different in that it uses a giant sprite for its images and doesn’t download any images from the social networks (ie, facebook, twitter). It just grabs the share stats and rebuilds the the structure from scratch. It’s a pretty sophisticated way of doing things. You’ll want to check out how it deals with facebook likes vs shares. I think they’ve implemented one over the other, so be mindful of that.

http://wordpress.org/extend/plugins/async-social-sharing/
– This is a run-of-the-mill social loader. It loads the official javascript from the networks, and downloads the graphics from the networks. It’s async, but still more header calls after the fact.

I’ve used all of them, but prefer async AddThis. I like having analytics share data. If you’re using WordPress, rtSocial may be the fastest as it downloads far less resources and uses an image sprite which cuts down on header requests considerably.

They all work pretty well.

NOTABLE MENTION:

http://wordpress.org/extend/plugins/flare/
– I don’t know if this is async or not. It doesn’t mention it, as far I remember when I tested it out. But it’s a very slick social sharing plugin. One of the nicest I’ve seen on the WordPress Plugin site.

[croydon86]

wow @treeroot thanks for that in-depth answer. There is plenty of resources to choose from.

I like the idea of socialitejs, this is mainly what I was after. Although I am using wordpress so may consider rtsocial.

This has given me a lot of food for thought, so thanks again for your input, I am very grateful ;)

[Author]

Posts