These Social Sharing Buttons will Easily Boost Your Website Speed

Dec 29, 2020   |   7 minutes  

If you're running a blog, odds are that you embed an assortment of social sharing buttons on your site. Why wouldn't you? Anyone who decides that your content is worth sharing on social media can generate free, extra traffic for you.

However, conventional sharing buttons have a pretty serious downside: they can substantially degrade your website performance.

According to WP Rocket, some of the most popular Wordpress plugins for sharing content on social media can add over 6/10 of a second to your page speed. (They suggest to avoid plugins like AddThis, ShareThis, and Jetpack. Click the link for the full list of what to avoid.)

That's one widget taking over half a second to load. Yikes!

At 0.6 seconds for a single widget, it doesn't matter how much time you spend optimizing everything else. It's going to be hard to make your page fast.

Let's look at why speed matters and how we can completely eliminate delays related to sharing buttons.

Why Load Time Matters


Slow pages cause you all sorts of problems. Here are just a few.

First and probably most important, Google takes speed into account when it ranks your pages. With Google's ongoing updates to their algorithm, it seems that site speed is always becoming more and more critical to where they place you in search results.

Google wants to prioritize the most relevant content that creates the best user-experience for web searchers. If your loading speed is bad, visitors are going to get annoyed, and Google doesn't want that.

If your website is slow, it's going to show up lower in organic search. Plain and simple.

That means that you need to optimize your pagespeed as much as possible. If you want to rank at the top, you need to chisel away every millisecond that you can.

Beyond just not ranking, slower page loads actually cause conversion rates on your website to drop no matter what you are offering. So, if you are a blogger, slower pages lead to fewer email opt-ins, fewer e-book sales, and etc.

Last, if your pages are not properly optimized for speed, your bounce rate is going to be higher.

According to Pingdom, for pages loading in under 2 seconds, the average bounce rate is 9%. Once your page hits the 3 second mark, the bounce rate starts to skyrocket.

Again, that's bad no matter what your website is about. It means someone got interested in what you have to say and clicked on a link, and then they left before you had a chance to engage with them.

You had their attention, and then you lost it.

Problems with Conventional Share Buttons


Most social sharing buttons, in particular those that show sharing or follow counts, make API calls to the social network they represent.

Think about it. In order for a share button to tell you how many likes or shares something has, it has to go ask the specific social network for that information. That takes time.

Beyond that, some platforms are set up such that if you embed their buttons, your website has to constantly request resources from their server.

If you are using a Javascript embed code to render social sharing buttons - or if your widget generates one - keep reading and you'll see how you can save yourself some load time.

Pure CSS Social Sharing


For Leadjetty, we use free, pure CSS social buttons from sharingbuttons.io. There are a bunch of providers out there, and some simple Google research will turn up a lot of options for you.

How do pure CSS buttons work?

First, CSS-based sharing buttons typically involve two things:

  • Link tags that contain SVG markup that go directly into your HTML
  • CSS that adds style to the links

If you're totally new to the web space, or perhaps if you just haven't really dug into the underpinnings of how your blog works, here are a few basic definitions for you.

HTML stands for "Hypertext Markup Language". In a nutshell, it's a markup (programming) language that instructs web browsers so they know what different things are. For example, headers vs. paragraphs vs. images.

CSS stands for "Cascading Style Sheets". Essentially, CSS is how you specify what your pages should look like.

SVG stands for "Scalable Vector Graphics". They are used to render things like icons onto the screen without needing to load an image.

For example, the SVG tags that come from sharingbuttons.io generate logos for each of the social networks that you want people to be able to share to.

Why is CSS a better option?


Everything that you put on your website has to load from a server somewhere. Everything.

When you use images, those files have to be loaded. When you embed script tags, those get executed and often load resources from someone else's server.

Two things that will always load no matter what: the HTML for your site, and the CSS that styles it.

These two things are the bare minimum for a nice looking, functional website. Since these are always being loaded, the fastest thing we can possibly do is just add content to them.

When you add a paragraph to a blog post, you don't worry that the page will load noticeably slower. This is the same logic. We're code to the things that are already rendering.

The SVG icons go directly into our HTML, and since they contain the code necessary to just draw the icons directly onto the webpage, we don't need to load any images. Suppose you have 7 social buttons. If you use SVG icons instead of images, you just saved yourself 7 HTTP requests.

You can see what the instructions for drawing an icon look like in this screenshot.It's in the <path> tag inside the SVG. You don't need to understand this at all, but if you're a nerd like me, you might like to check it out.

The Downside


As with all things, there are drawbacks to using pure CSS social buttons. The main drawback is that you don't get fancy things like counters.

This is because we are specifically not making any HTTP requests. Since we aren't talking to any external systems, we can't use any external data.

However, in my opinion, the increase in page load speed makes this an excellent tradeoff.

How You Can Test Your Site


You might be wondering how to actually run a speed test on your website. Pingdom has a great tool that you can use here that will give you some great pagespeed insights.

Just enter a URL you want to test and choose a region to test from. It's a good idea to pick somewhere that's typical for where your readers might live. 

If your audience is USA based for example, then run tests from a few different US locations. If you have a global audience, then you need to put a bit more effort into it and run tests in different geographies.

Once you run the test, you should get:

  • A performance grade, which takes a range of things into consideration
  • The load time
  • The page size
  • The number of HTTP requests that your page generates

At the time of this writing, this page is getting a C (we need to work on some things with page structure), but our load time is 553 milliseconds, which is awesome.

Up next


We're going to be publishing a series of articles on website performance optimization. As it becomes more and more important to reduce loading time, it's going to require better knowledge of how to use the right tools to maximize speed.