1

I looked into adding the ability to:

  1. Like (Facebook)
  2. Share (Facebook)
  3. Tweet (Twitter)
  4. Share (Google+)

On the product page. To do so, I used the code snippets available directly from each of the social media platforms developer consoles, namely:

repsectively.

I believed that this would be the most minimalistic approach to adding support for social media (as opposed to installing an extension to do so). The result though was not pleasing. :-/

Before:

  • Page load time: 1.96s
  • Total page size: 233KB
  • Total number of requests: 34

After:

  • Page load time: 3.02s
  • Total page size: 783KB
  • Total number of requests: 50

Using http://gtmetrix.com/ to analyze performance. That's horrific! Am I approaching this badly? Would appreciate some input.

0

After doing quite a lot of research I came to the following conclusions:

Pitfalls of social share buttons

  • Dependent on Javascript
  • Downloads 3rd party resources
  • Adds additional http requests
  • Adds additional page weight

1. Directly from the developer

If you access any of the links I mentioned in the question (i.e the developer zone for Facebook/Twitter/Google+), these share buttons with the counter mechanism fall to all of the aforementioned pitfalls.

2. Custom lightweight buttons

I decided to go with custom buttons I designed for myself using simple CSS/HTML, no JS. I merged the buttons using splicing techniques and ended up adding about 3KB to my page size and a single request.

You can also add text, hashtags, mentions etc. Simple read the developer information from the social media suites directly & you'll be good to go.

The counter method (i.e seeing how many people share a page) unfortunately is not possible with static links like this, you will need some JS on the page & that's something I for one am willing to give up for sake of performance.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.