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.
Pitfalls of social share buttons
- Dependent on Javascript
- Downloads 3rd party resources
- Adds additional http requests
- Adds additional page weight
- Privacy concerns
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.
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.
Results
As you can see, all three add quite a bit of requests and weight to your site. Sure, you can make it so each loads asynchronously and do other optimizations, but these services cost too much performance-wise for my comfort.
Also, with the rise in popularity of Ghostery and other ad blocking plugins, these 3rd party social buttons are getting blocked more every day.
But there’s a better way…
Creating lightweight social share buttons
You can easily create share buttons without adding hardly any weight or requests to your pages.
All that is required to create 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 about your site to each social media platform. You will need to add this information to your CMS and update the template to insert the proper titles and urls.
Style the links 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 (at the bottom of this post) and use them on your own site.
Lightweight Share Buttons Resources
How To Create Custom Share Buttons For All Popular Social Services
Simple Sharing Buttons Generator
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!