Social media share buttons can be easily added to any website. The buttons make it simple for users to share the page, and display the number of times people have shared that page. This might make it seem like a no-brainer to include on every website you design, but these buttons come at a cost to performance.
Potential pitfalls of social share buttons
- Dependent on Javascript
- Downloads 3rd party resources
- Adds additional http requests
- Adds additional page weight
Putting social share buttons to the test
I did some testing to find out just how much social share buttons impact performance. I created a blank HTML page and added social media buttons, and then measured the amount of http requests and page weight using Pingdom Website Speed Test.
The reason I am testing http requests is because every resource on your website must be downloaded from the server, so every resource comes at a cost to performance.
To put this in real-world terms, say you visit a web page and that page contains 100 objects — things like images, CSS files, etc. Your browser has to make 100 individual requests to the site’s host server(s) in order to retrieve those objects. Each of those requests experiences at least 20-30ms of latency. (More typically, latency is in the 75-140ms range, even for sites that use a CDN.) This adds up to 2 or 3 seconds, which is pretty significant when you consider it as just one factor that can slow your pages down.
Google Developers on minimizing http requests:
Therefore, an important strategy for speeding up web page performance is to minimize the number of round trips that need to be made. Since the majority of those round trips consist of HTTP requests and responses, it’s especially important to minimize the number of requests that the client needs to make and to parallelize them as much as possible.
The waterfall diagram above demonstrates that every resource on a website has a cost.
Test Parameters
Each test was done on a blank page with only the essential HTML. I used the Twitter, Facebook, and Google+ buttons for each test. I included counters on each button.
I only did three tests, there are many ways to implement social media share buttons, and I encourage you to test to evaluate the method you are using.
Test #1: Official share buttons
I created social share buttons by going to each social media platform and acquiring the code for their buttons.
A blank page with the official buttons resulted in 24 requests and 314.4kb weight.
Test #2: Addthis.com
A blank page with buttons from addthis.com resulted in 32 requests and 502.8kb weight, performing the worst out of the three tests. Note: this one was interesting because the results were not consistent, it tested as low as 32 requests but as high as 42.
Test #3: Sharethis.com
A blank page with buttons from sharethis.com resulted in 20 requests and 89.3kb weight, performing the best out of the three tests.
Bonus Test: Custom lightweight buttons
I tested the share buttons that I designed for my blog (seen at the bottom of this post). This test resulted in 2 requests and 5.8kb.
Creating lightweight social share buttons
You can create share buttons without adding hardly any weight to your pages at all.
This method adds zero requests and very little additional page weight. This method does not include a counter or any of the bells and whistles that share buttons usually come with; that is the trade off you will have to consider.
All that is required to create custom share buttons is a bit of HTML:
<a href="https://twitter.com/intent/tweet?text=[Page Title]&url=[Page URL]">Twitter</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=[Page URL]">Facebook</a>
<a href="https://plus.google.com/share?url=[Page URL]">Google+</a>
Each of the anchor tags above use querystrings in the href, this sends data to each social media platform about the page to be shared. You will need to add this information to your CMS and update the template to insert the proper titles and urls.
Using the HTML and querystrings that you see above is all that is required to create share buttons. Style them using CSS and you have yourself some lightweight share buttons.
Feel free to take a peek at the code for the buttons that I designed for my blog and use them on your own site.
Here is a list of how to create custom buttons using querystrings for each social media platform.
Key takeaways
- Third party share buttons can be costly to performance
- Out of the three methods for adding third party share buttons that I tested, sharethis.com performed the best
- It’s up to you to weigh the performance cost against the benefits of counters
- Creating lightweight share buttons is easy and can have very little cost to performance
You may be able to find advanced share buttons with counters that have minimal impact on performance, but my goal with this post is to get you to think about the performance cost these buttons may have. Test out your favorite method, and let me know how it performs in the comments below!
Links to each page so you can do your own tests: Official share buttons, Addthis buttons, Sharethis.com buttons, custom lightweight buttons
Our you use ghostery / Adblock and do not give a shit about sharing buttons entirely…
Interesting that share buttons would be suppressed by Adblock.
You didn’t even address the privacy issues either. I think it’s borderline unethical for web developers to include conventional share buttons (or any other social feature) when building a webiste, whether supplied directly by the social networks or through a third-party service (which no doubt add tracking of their own), because it creates a record of every page touched by every visitor to your site, and every other site which uses these. So Facebook et al can track you everywhere you go on the Internet (and associate that with your name/Facebook profile, if you’re logged into Facebook), so long as their Javascript is being loaded by the websites you visit.
500kb for AddThis? Just not worth it, especially when you compare to the amount of sharing that comes from the buttons.
And, even more importantly, is what Matthew says. You ever wonder why Facebook’s targeting and remarketing can be so eerily accurate? Because of the widespread adoption of any of their buttons or plugins that track you. Doesn’t matter whether you are logged in as they may still place cookies in the browser, or track by IP or who knows what else.
I’m a bit surprised that some people decided to shift this article’s topic to tracking and privacy. It got clearly nothing to do with this post. But let me address couple of things mentioned above quickly: 1) It takes only one request to gather all the information necessary about the user, so clearly this is not the reason for that many requests. In fact, social networks can identify the referrer website simply by having you click a link on it that leads to their website. 2) AdBlock never blocks social sharing buttons, unless you teach it to.
The reason people still use those heavy social buttons is because what they can do. If you have a like button and you are signed into Facebook, all you have to do to actually share this article is to click it without going to another page. However, this seems to be a very heavy feature. If you still want those official buttons, you can trigger loading them after the page is done – for example, when the user starts scrolling to the bottom of the page. But this might impact your page’s rendering speed.
Have you ever looked at the Gigya share buttons, or share bar?
http://developers.gigya.com/040_Demos/020_Social_Plugins/033_Share_Bar_Plugin
I’d be curious to know how it compares.
The other interesting factor to consider would be to try and evaluate reliability of the options. Some of the native buttons have had significant outages; and there are frequently problems with accuracy/resetting of counters.
Saw this on r/bigseo – great post. Have you done any testing with a JS total share counter to see how that impacts performance vs. PHP?
I have not. There are probably tons of methods out there that should be put to the test!
@Matthew Vaughan Ad networks have been doing this to all of us for 15 years. Any two or more websites owned by the same company (like all AOL brands, for example) have been doing this forever as well.
Hi
An interesting test to add would be comparison of number of shares between different widgets and your own.
Take care
Emil
I agree.
Custom buttons seems to be the way to go. How do you make sure the share buttons pick up the current url though?